Merge pull request #88 from andrewwippler/hotfix/frontendbuild

Fix build errors

frontend/Dockerfile

@@ -1,5 +1,5 @@
 # source: https://github.com/vercel/next.js/blob/7cc4159561f6591140ff669c4ac3c74a049c783b/examples/with-docker/Dockerfile
-FROM node:18-alpine AS base
+FROM node:20-alpine AS base
 
 # Install dependencies only when needed
 FROM base AS deps

frontend/package.json

@@ -9,26 +9,26 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@headlessui/react": "^1.7.19",
+    "@headlessui/react": "^2.1.2",
     "@heroicons/react": "^2.1.5",
-    "@reduxjs/toolkit": "^1.9.7",
+    "@reduxjs/toolkit": "^2.2.7",
     "@tailwindcss/forms": "^0.5.7",
-    "@types/node": "18.19.42",
-    "@types/react": "18.0.38",
+    "@types/node": "22.0.0",
+    "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
-    "date-fns": "^2.29.3",
-    "eslint": "8.36.0",
-    "eslint-config-next": "13.2.4",
+    "date-fns": "^2.30.0",
+    "eslint": "9.8.0",
+    "eslint-config-next": "14.2.5",
     "iron-session": "^6.3.1",
     "lodash": "^4.17.21",
     "next": "14.2.5",
     "next-redux-wrapper": "^8.1.0",
     "octokit": "^4.0.2",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "react-redux": "^8.1.3",
+    "react-redux": "^9.1.2",
     "react-use": "^17.5.1",
-    "redux": "^4.2.1",
+    "redux": "^5.0.1",
     "redux-devtools-extension": "^2.13.9",
     "redux-thunk": "^3.1.0",
     "swr": "^2.2.5",

frontend/src/components/ConfirmDialog.tsx

@@ -8,7 +8,6 @@ import {
   setThingToDelete,
   thingToDelete,
 } from "@/features/modal/reducer";
-import { transpileDeclaration } from "typescript";
 import useUser from "@/library/useUser";
 import api from "@/library/api";
 import { setUpdateUI } from "@/features/ui/reducer";
@@ -62,7 +61,6 @@ export default function ConfirmDialog() {
   };
 
   return (
-    <div>
       <Transition.Root show={open} as={Fragment}>
         <Dialog
           as="div"
@@ -146,6 +144,5 @@ export default function ConfirmDialog() {
           </div>
         </Dialog>
       </Transition.Root>
-    </div>
   );
 }

frontend/src/components/IllustrationForm.tsx

@@ -1,4 +1,4 @@
-import { FormEvent, useState } from "react";
+import { ChangeEvent, FormEvent, useState } from "react";
 import { ArrowLeftIcon, TrashIcon, PhotoIcon } from "@heroicons/react/24/solid";
 import api from "@/library/api";
 import { useAppSelector, useAppDispatch } from "@/hooks";
@@ -34,8 +34,12 @@ export default function IllustrationForm({
   const [file, setFile] = useState<Boolean>();
   const [deleteUpload, setDeleteUpload] = useState<UploadType>();
 
-  function handleFileChange(event) {
-    const uploadedFile = event.target.files[0];
+  function handleFileChange(event: ChangeEvent<HTMLInputElement>) {
+
+    const files = event.target.files
+    if (!files) { return }
+    const uploadedFile = files[0];
+
     if (
       uploadedFile.type !== "image/png" &&
       uploadedFile.type !== "application/pdf" &&

frontend/src/library/illustrationType.ts

@@ -8,13 +8,13 @@ export class UploadType {
 }
 
 export class illustrationType {
-  uploads: Array<UploadType> | undefined;
-  content: string | undefined;
-  tags: Array<tagType> | undefined;
-  places: Array<placeType> | undefined;
-  source: string | undefined;
-  author: string | undefined;
-  title: string | undefined;
-  id: number | undefined;
+  uploads: Array<UploadType> = [];
+  content!: string;
+  tags: Array<tagType> = [];
+  places: Array<placeType> = [];
+  source!: string;
+  author!: string ;
+  title!: string ;
+  id!: number ;
 
 }

frontend/src/pages/author/[id].tsx

@@ -36,7 +36,7 @@ export default function Author() {
         setData(data); // illustrations
         setLoading(false)
     });
-  }, [name]);
+  }, [name, dispatch, user?.token]);
 
 
   if (!user?.token) return

frontend/src/pages/authors.tsx

@@ -13,7 +13,7 @@ export default function Authors() {
   const dispatch = useAppDispatch();
   useEffect(() => {
     if (!user?.token) dispatch(setRedirect(`/authors`));
-  }, [user]);
+  }, [user, dispatch]);
   if (!user?.token) return;
   return <Layout>{user?.isLoggedIn && <Author token={user?.token} />}</Layout>;
 }

frontend/src/pages/illustration/[id].tsx

@@ -80,7 +80,7 @@ export default function IllustrationWrapper() {
         dispatch(setUpdateUI(false));
       }
     });
-  }, [router.query.id, refreshUI, user, userSettings]);
+  }, [router.query.id, refreshUI, user, userSettings, dispatch, router]);
 
   if (isLoading) return <Layout>Loading...</Layout>;
 
@@ -223,7 +223,7 @@ export default function IllustrationWrapper() {
             )}
 
             <div className="columns-1">
-              {illustration?.uploads > 0 && (
+              {illustration?.uploads.length > 0 && (
                 <div className="text-l font-bold pt-8 text-sky-900">
                   <span className="mr-4">Attachments</span>
                 </div>

frontend/src/pages/illustrations/[id].tsx

@@ -40,7 +40,7 @@ export default function LegacyIllustration() {
       router.replace(`/illustration/${data.id}`);
       setLoading(false);
     });
-  }, [id, dispatch, router]);
+  }, [id, dispatch, router, user?.token]);
 
   if (isLoading)
     return (

frontend/src/pages/new-illustration.tsx

@@ -14,7 +14,7 @@ export default function Login() {
   const dispatch = useAppDispatch();
   useEffect(() => {
     if (!user?.token) dispatch(setRedirect(`/new-illustration`));
-  }, [user]);
+  }, [user, dispatch]);
   if (!user?.token) return;
   return (
     <Layout>

frontend/src/pages/search.tsx

@@ -30,7 +30,7 @@ export default function Search() {
 
   useEffect(() => {
     if (!user?.token) dispatch(setRedirect(`/search`));
-  }, [user]);
+  }, [user, dispatch]);
 
   const onSubmit = (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();

frontend/src/pages/settings.tsx

@@ -27,7 +27,7 @@ export default function Settings() {
 
   useEffect(() => {
     if (!user?.token) dispatch(setRedirect(`/settings`));
-  }, [user]);
+  }, [user, dispatch]);
 
   const onSubmit = (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();

frontend/src/pages/tag/[name].tsx

@@ -45,7 +45,7 @@ export default function Tag() {
       setData(data); // illustrations
       setLoading(false);
     });
-  }, [name]);
+  }, [name, user, dispatch, router.query.name]);
 
   const handleSave = (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();