Upgrade NextJS 13 -> 15 (#76)

* Run next/codemod

Excludes Yarn files

* Lockfile

* Fixes

* Change login to a server action

Hopefully it's more reliable ?? but idk how to test. This fixes an issue with the navbar not updating whne logging in though

* Convert remaining routes to server actions

This also fixes an issue of the name in the navbar not updating (because of the stale USER cookie)

* fix other checkbox not being selectable by its label

Author: SheepTester

client/next.config.js

@@ -32,9 +32,6 @@ const nextConfig = {
       },
     ];
   },
-  experimental: {
-    serverActions: true,
-  },
 };
 
 module.exports = nextConfig;

client/package.json

@@ -16,25 +16,29 @@
     "@mui/material": "^6.2.1",
     "@svgr/webpack": "^8.1.0",
     "@types/node": "20.6.0",
-    "@types/react": "18.2.21",
-    "@types/react-dom": "18.2.7",
+    "@types/react": "19.0.8",
+    "@types/react-dom": "19.0.3",
     "@types/validator": "^13.12.2",
     "axios": "^1.7.9",
     "cookies-next": "^5.0.2",
     "localforage": "^1.10.0",
-    "next": "13.4.16",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "next": "15.1.6",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "react-hook-form": "^7.54.2",
     "react-toastify": "^11.0.2",
     "typescript": "5.2.2",
     "validator": "^13.12.0"
   },
   "devDependencies": {
     "eslint": "^8.49.0",
-    "eslint-config-next": "^13.4.19",
+    "eslint-config-next": "15.1.6",
     "eslint-config-prettier": "^9.0.0",
     "prettier": "^3.0.3",
     "sass": "^1.70.0"
+  },
+  "resolutions": {
+    "@types/react": "19.0.8",
+    "@types/react-dom": "19.0.3"
   }
 }

client/src/app/api/getCurrentUser/route.ts

@@ -5,10 +5,11 @@ import Button from '@/components/Button';
 import styles from './page.module.scss';
 
 interface CheckEmailProps {
-  searchParams: { email?: string };
+  searchParams: Promise<{ email?: string }>;
 }
 
-const CheckEmail = ({ searchParams }: CheckEmailProps) => {
+const CheckEmail = async (props: CheckEmailProps) => {
+  const searchParams = await props.searchParams;
   const email = searchParams.email;
 
   return (

client/src/app/api/login/route.ts

@@ -0,0 +1,19 @@
+'use server';
+
+import { login as apiLogin } from '@/lib/api/UserAPI';
+import { setCookie } from '@/lib/services/CookieService';
+import { CookieType } from '@/lib/types/enums';
+import { getErrorMessage } from '@/lib/utils';
+import { redirect } from 'next/navigation';
+
+export async function login(email: string, password: string): Promise<string> {
+  let response;
+  try {
+    response = await apiLogin(email, password);
+  } catch (error) {
+    return getErrorMessage(error);
+  }
+  await setCookie(CookieType.ACCESS_TOKEN, response.token);
+  await setCookie(CookieType.USER, JSON.stringify(response.user));
+  redirect('/');
+}

client/src/app/api/updateUser/route.ts

@@ -13,6 +13,7 @@ import { UserAPI } from '@/lib/api';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { getErrorMessage } from '@/lib/utils';
+import { login } from './login';
 
 interface LoginValues {
   email: string;
@@ -30,13 +31,10 @@ export default function LoginPage() {
   } = useForm<LoginValues>();
 
   const onSubmit: SubmitHandler<LoginValues> = async credentials => {
-    try {
-      await UserAPI.login(credentials.email, credentials.password);
-      router.refresh();
-      router.push('/');
-    } catch (error) {
-      setError(getErrorMessage(error));
-    }
+    // If successful, the page will redirect and the rest of this function will
+    // not run
+    const error = await login(credentials.email, credentials.password);
+    setError(error);
   };
 
   return (

client/src/app/check-email/page.tsx

@@ -1,4 +1,5 @@
 @use '@/styles/vars.scss' as vars;
+@use 'sass:list';
 
 .container {
   display: grid;
@@ -67,7 +68,7 @@
       // Wrap each shadow in drop-shadow()
       $drop-shadows: ();
       @each $shadow in vars.$text-shadow {
-        $drop-shadows: append($drop-shadows, drop-shadow(#{$shadow}));
+        $drop-shadows: list.append($drop-shadows, drop-shadow(#{$shadow}));
       }
       filter: #{$drop-shadows};
 

client/src/app/login/login.ts

@@ -1,6 +1,6 @@
 'use client ';
 
-import { Checkbox, Radio } from '@mui/material';
+import { Checkbox, CheckboxProps, Radio, RadioProps } from '@mui/material';
 import styles from './style.module.scss';
 import { useRef, useState } from 'react';
 
@@ -55,31 +55,33 @@ const MultipleChoiceGroup = ({
   return (
     <div className={`${styles.wrapper} ${inline ? styles.inline : ''}`} ref={ref}>
       {choices.map(choice => {
+        const props: RadioProps & CheckboxProps = {
+          name,
+          value: choice,
+          // For checkboxes, we can require at least one checkbox by
+          // only setting all of them `required` if none of them are
+          // checked
+          required: required && (mode === 'radio' || selected === NONE),
+          onChange: e => {
+            if (e.currentTarget.checked) {
+              setSelected(choice);
+            } else if (mode === 'checkbox' && !ref.current?.querySelector(':checked')) {
+              setSelected(NONE);
+            }
+          },
+          disabled,
+        };
+        // React has a distinction between undefined and whether the prop is
+        // present at all, and these two props can't both be present
+        if (mode === 'radio') {
+          props.checked = selected === choice;
+        } else if (defaultValue !== undefined) {
+          props.defaultChecked = Array.isArray(defaultValue) && defaultValue.includes(choice);
+        }
         return (
           <p key={choice}>
             <label className={styles.checkboxLabel}>
-              <Component
-                name={name}
-                value={choice}
-                // For checkboxes, we can require at least one checkbox by
-                // only setting all of them `required` if none of them are
-                // checked
-                required={required && (mode === 'radio' || selected === NONE)}
-                checked={mode === 'radio' ? selected === choice : undefined}
-                defaultChecked={
-                  defaultValue === undefined || mode === 'radio'
-                    ? undefined
-                    : Array.isArray(defaultValue) && defaultValue.includes(choice)
-                }
-                onChange={e => {
-                  if (e.currentTarget.checked) {
-                    setSelected(choice);
-                  } else if (mode === 'checkbox' && !ref.current?.querySelector(':checked')) {
-                    setSelected(NONE);
-                  }
-                }}
-                disabled={disabled}
-              />
+              <Component {...props} />
               {choice}
             </label>
           </p>
@@ -88,7 +90,10 @@ const MultipleChoiceGroup = ({
       {other ? (
         <p
           className={styles.checkboxLabel}
-          onClick={() => {
+          onClick={e => {
+            if (e.target instanceof HTMLInputElement || e.target instanceof HTMLLabelElement) {
+              return;
+            }
             setShowOther(true);
             setSelected(OTHER);
           }}
@@ -99,9 +104,6 @@ const MultipleChoiceGroup = ({
               value={OTHER}
               required={required && (mode === 'radio' || selected === NONE)}
               checked={isOtherEnabled}
-              defaultChecked={
-                defaultValue === undefined || mode === 'radio' ? undefined : defaultOther !== null
-              }
               onChange={e => {
                 setShowOther(e.currentTarget.checked);
                 if (e.currentTarget.checked) {

client/src/app/login/page.tsx

@@ -9,11 +9,11 @@ import TextField from '@/components/TextField';
 import CloseIcon from '../../../public/assets/icons/close.svg';
 import EditIcon from '../../../public/assets/icons/edit.svg';
 import { UserAPI } from '@/lib/api';
-import { reportError } from '@/lib/utils';
 import { useWindowSize } from '@/lib/hooks/useWindowSize';
 import isEmail from 'validator/lib/isEmail';
 import styles from './style.module.scss';
 import logout from './logout';
+import showToast from '@/lib/showToast';
 
 interface UpdateProfileValues {
   firstName: string;
@@ -45,13 +45,13 @@ const Profile = ({ user }: ProfileClientProps) => {
   });
 
   const onSubmit: SubmitHandler<UpdateProfileValues> = async updateProfile => {
-    try {
-      const updatedUser = await UserAPI.updateCurrentUserProfile(updateProfile);
+    const updatedUser = await UserAPI.updateCurrentUserProfile(updateProfile);
+    if (typeof updatedUser === 'string') {
+      showToast('Changes failed to save', updatedUser);
+    } else {
       setCurrentUser(updatedUser);
       setEditProfile(prevState => !prevState);
       reset(updatedUser);
-    } catch (error) {
-      reportError('Changes failed to save', error);
     }
   };
 

client/src/components/Dashboard/style.module.scss

@@ -5,7 +5,7 @@ import { cookies } from 'next/headers';
 import { redirect } from 'next/navigation';
 
 export default async function logout() {
-  const cookieStore = cookies();
+  const cookieStore = await cookies();
   cookieStore.delete(CookieType.ACCESS_TOKEN);
   cookieStore.delete(CookieType.USER);
   redirect('/login');