Update to node 22.14.0

.prettierrc.json

@@ -0,0 +1,6 @@
+{
+    "tabWidth": 4,
+    "singleQuote": true,
+    "trailingComma": "all",
+    "singleAttributePerLine": true
+}

app/.eslintrc.js

@@ -27,7 +27,10 @@ module.exports = {
         'react/jsx-indent': ['error', 4],
         'react/jsx-indent-props': ['error', 4],
         // project structure
-        'react/jsx-filename-extension': ['error', { extensions: ['.js', '.jsx', '.ts', '.tsx'] }],
+        'react/jsx-filename-extension': [
+            'error',
+            { extensions: ['.js', '.jsx', '.ts', '.tsx'] },
+        ],
         'import/extensions': [
             'error',
             'ignorePackages',
@@ -43,11 +46,31 @@ module.exports = {
         'no-use-before-define': 'off',
         'no-unused-vars': 'off',
         'react/require-default-props': 'off',
+        'operator-linebreak': 'off',
+        'object-curly-newline': ['error', { consistent: true }],
+        'react/no-unknown-property': 'off',
+        'react/jsx-one-expression-per-line': 'off',
+        'implicit-arrow-linebreak': 0,
+        'react/jsx-curly-newline': 'off',
+        'react/jsx-wrap-multilines': [
+            'error',
+            {
+                declaration: 'parens',
+                assignment: 'parens',
+                return: 'parens',
+                arrow: 'parens',
+            },
+        ],
+        // 'function-paren-newline': ['error', 'multiline'],
+        'function-paren-newline': ['off', 'multiline'],
         // due to DB IDs we have to disable this
         'no-underscore-dangle': 'off',
-        camelcase: ['error', {
-            allow: ['redirect_uri', 'client_id', 'response_type'],
-        }],
+        camelcase: [
+            'error',
+            {
+                allow: ['redirect_uri', 'client_id', 'response_type'],
+            },
+        ],
         // preferences
         '@typescript-eslint/no-use-before-define': 'off',
         'no-plusplus': 'off',

app/components/common/CleanButton.tsx

@@ -8,7 +8,7 @@ import { ButtonType } from 'antd/lib/button';
 interface CleanButtonProps {
     children?: React.ReactNode;
     style?: CSSProperties;
-    onClick?: React.MouseEventHandler<HTMLElement>,
+    onClick?: React.MouseEventHandler<HTMLElement>;
     size?: SizeType;
     backColor?: string;
     textColor?: string;
@@ -22,14 +22,14 @@ interface CleanButtonProps {
 }
 
 const getButtonPadding = (size: SizeType) => {
-    switch (size) {
-    case 'small':
+    if (size === 'small') {
         return '0rem 1rem';
-    case 'middle':
+    }
+    if (size === 'middle') {
         return '0rem 1.5rem';
-    default:
-        return '0rem 2rem';
     }
+    // Default to large size padding
+    return '0rem 2rem';
 };
 
 const ButtonComponent = ({
@@ -51,11 +51,14 @@ const ButtonComponent = ({
 
     const parsedBackColor = backColor && parse(backColor);
 
-    const darkenedBackColor = backColor && parsedBackColor
-        && `hsl(${parsedBackColor.hsl[0]}, ${parsedBackColor.hsl[1]}%, ${parsedBackColor.hsl[2] * 0.8}%)`;
+    const darkenedBackColor = useMemo(() => {
+        if (!darkenOnHover || !parsedBackColor) return backColor;
+        return `hsl(${parsedBackColor.hsl[0]}, ${parsedBackColor.hsl[1]}%, ${
+            parsedBackColor.hsl[2] * 0.8
+        }%)`;
+    }, [darkenOnHover, parsedBackColor, backColor]);
 
-    const cssTextColor = textColor
-        || 'rgba(255, 255, 255, 0.95)';
+    const cssTextColor = textColor || 'rgba(255, 255, 255, 0.95)';
 
     const buttonStyle = {
         default: {
@@ -117,48 +120,62 @@ const CleanButton = ({
     darkenOnHover,
     className,
 }: CleanButtonProps): JSX.Element => {
-    const buttonComponent: React.ReactNode = useMemo(() => (
-        <ButtonComponent
-            onClick={onClick}
-            style={style}
-            backColor={backColor}
-            textColor={textColor}
-            type={type}
-            url={url}
-            size={size}
-            openInNewTab={openInNewTab}
-            hoverAnimation={hoverAnimation}
-            disabled={disabled}
-            darkenOnHover={darkenOnHover}
-            className={className}
-        >
-            {children}
-        </ButtonComponent>
-    ), [children, onClick, style, backColor, textColor, type, url, size,
-        openInNewTab, hoverAnimation, disabled, darkenOnHover, className]);
+    const buttonComponent: React.ReactNode = useMemo(
+        () => (
+            <ButtonComponent
+                onClick={onClick}
+                style={style}
+                backColor={backColor}
+                textColor={textColor}
+                type={type}
+                url={url}
+                size={size}
+                openInNewTab={openInNewTab}
+                hoverAnimation={hoverAnimation}
+                disabled={disabled}
+                darkenOnHover={darkenOnHover}
+                className={className}
+            >
+                {children}
+            </ButtonComponent>
+        ),
+        [
+            children,
+            onClick,
+            style,
+            backColor,
+            textColor,
+            type,
+            url,
+            size,
+            openInNewTab,
+            hoverAnimation,
+            disabled,
+            darkenOnHover,
+            className,
+        ],
+    );
 
     // If there is no URL, return button directly
     if (!url) {
-        return (
-            <>
-                {buttonComponent}
-            </>
-        );
+        return <>{buttonComponent}</>;
     }
 
     // Handle URL return types depending on whether it should opened in a new tab
     return (
         <>
             {openInNewTab ? (
                 <Link href={url}>
-                    <a target="_blank" rel="noreferrer" href={url}>
+                    <a
+                        target="_blank"
+                        rel="noreferrer"
+                        href={url}
+                    >
                         {buttonComponent}
                     </a>
                 </Link>
             ) : (
-                <Link href={url}>
-                    {buttonComponent}
-                </Link>
+                <Link href={url}>{buttonComponent}</Link>
             )}
         </>
     );

app/components/common/DiscordButton.tsx

@@ -2,9 +2,7 @@
 import React from 'react';
 import Link from 'next/link';
 import Icon from '@ant-design/icons';
-import {
-    Button,
-} from 'antd';
+import { Button } from 'antd';
 
 import DiscordSVG from '../../assets/discord.svg';
 
@@ -19,9 +17,17 @@ const DISCORD_URL = 'https://discord.gg/RPbZHvxNRG';
 
 const DiscordButton = (): JSX.Element => (
     <Link href={DISCORD_URL}>
-        <a target="_blank" rel="noreferrer" href={DISCORD_URL}>
+        <a
+            target="_blank"
+            rel="noreferrer"
+            href={DISCORD_URL}
+        >
             <Button
-                style={{ borderColor: '#5865f2aa', color: '#5865f2', fontWeight: 500 }}
+                style={{
+                    borderColor: '#5865f2aa',
+                    color: '#5865f2',
+                    fontWeight: 500,
+                }}
                 size="small"
                 icon={<DiscordIcon />}
                 className="inline-flex items-center dojo-discord-button"
@@ -30,7 +36,6 @@ const DiscordButton = (): JSX.Element => (
             </Button>
         </a>
     </Link>
-
 );
 
 export default DiscordButton;

app/components/common/Footer.tsx

@@ -1,9 +1,7 @@
 import React from 'react';
 
 const Footer = () => (
-    <div
-        className="flex flex-row mt-10 lg:mt-20 px-10 items-center justify-end w-full h-20 shadow-md bg-gray-750"
-    >
+    <div className="flex flex-row mt-10 lg:mt-20 px-10 items-center justify-end w-full h-20 shadow-md bg-gray-750">
         <div className="flex flex-row gap-3 items-center">
             <img
                 src="/images/tmdojo_logo.png"

app/components/common/PageHeaderBar.tsx

@@ -5,13 +5,16 @@ import React from 'react';
 import UserDisplay from './UserDisplay';
 
 interface PageHeaderBarProps {
-    title: string,
-    subtitle?: string,
-    backUrl?: string,
-    children?: React.ReactNode
+    title: string;
+    subtitle?: string;
+    backUrl?: string;
+    children?: React.ReactNode;
 }
 const PageHeaderBar = ({
-    title, subtitle, children, backUrl,
+    title,
+    subtitle,
+    children,
+    backUrl,
 }: PageHeaderBarProps) => {
     const router = useRouter();
 
@@ -37,16 +40,11 @@ const PageHeaderBar = ({
                     />
 
                     <div className="flex flex-wrap gap-4 items-baseline">
-                        <span className="text-xl font-bold">
-                            {title}
-                        </span>
+                        <span className="text-xl font-bold">{title}</span>
                         {subtitle && (
-                            <span className="text-gray-400">
-                                {subtitle}
-                            </span>
+                            <span className="text-gray-400">{subtitle}</span>
                         )}
                     </div>
-
                 </div>
 
                 <div className="flex flex-wrap justify-center gap-4">

app/components/common/PlayerLink.tsx

@@ -7,11 +7,9 @@ interface PlayerLinkProps {
     webId: string;
     name: string;
     className?: string;
-    style?: React.CSSProperties
+    style?: React.CSSProperties;
 }
-const PlayerLink = ({
-    webId, name, className, style,
-}: PlayerLinkProps) => (
+const PlayerLink = ({ webId, name, className, style }: PlayerLinkProps) => (
     <Link href={`${ABSOLUTE_USERS_PATH}/${webId}`}>
         <a
             target="_blank"

app/components/common/SideDrawerExpandButton.tsx

@@ -9,7 +9,10 @@ interface SideDrawerExpandButtonProps {
     includeArrowIcon?: boolean;
 }
 const SideDrawerExpandButton = ({
-    onClick, content, side, includeArrowIcon = true,
+    onClick,
+    content,
+    side,
+    includeArrowIcon = true,
 }: SideDrawerExpandButtonProps) => (
     <Button
         onClick={onClick}

app/components/common/UserDisplay.tsx

@@ -48,17 +48,19 @@ const UserDisplay = () => {
         }
     };
 
-    return user === undefined
-        ? <LoginButton onClick={startAuthFlow} />
-        : (
-            <div className="flex flex-col md:flex-row gap-1 md:gap-6 items-center text-sm md:text-base text-right">
-                {`Welcome, ${user.displayName}!`}
-                <div className="flex gap-4">
-                    <ProfileButton webId={user.accountId} />
-                    <LogoutButton onClick={onLogout} />
-                </div>
+    if (user === undefined) {
+        return <LoginButton onClick={startAuthFlow} />;
+    }
+
+    return (
+        <div className="flex flex-col md:flex-row gap-1 md:gap-6 items-center text-sm md:text-base text-right">
+            {`Welcome, ${user.displayName}!`}
+            <div className="flex gap-4">
+                <ProfileButton webId={user.accountId} />
+                <LogoutButton onClick={onLogout} />
             </div>
-        );
+        </div>
+    );
 };
 
 export default UserDisplay;