Update npm packages

.github/workflows/frontend.yml

@@ -17,7 +17,5 @@ jobs:
         working-directory: ./frontend
     steps:
     - uses: actions/checkout@v3
-    - run: yarn install
-   # Requires lockfile to be updated first
-   # - run: yarn install --frozen-lockfile
-    - run: yarn build
+    - run: npm install
+    - run: npm run build

documentation/setup.asciidoc

@@ -60,7 +60,7 @@ Next, we import the new `backend` project into our Eclipse IDE:
 * Open http://localhost:8080/ in your browser and you should see the quarkus welcome page of the app.
 
 === Build Frontend
-The frontend is written in react and can be build with npm. Please go into `frontend` and run `npm install` on a command line. Please do not use npm.
+The frontend is written in react and can be build with npm. Please go into `frontend` and run `npm install` on a command line.
 
 When the build was successful and the backend is running, too, you can start the frontend by running `npm start` in the same directory.
 

frontend/.gitignore

@@ -10,7 +10,5 @@ node_modules
 /build
 
 npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
 /backup
 /package-lock.json

frontend/package.json

@@ -3,25 +3,26 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@material-ui/core": "^4.11.2",
-    "@material-ui/icons": "^4.11.2",
-    "@material-ui/lab": "^4.0.0-alpha.57",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@hello-pangea/dnd": "^18.0.1",
+    "@mui/icons-material": "^9.1.1",
+    "@mui/lab": "^9.0.0-beta.5",
+    "@mui/material": "^9.1.1",
     "@tailwindcss/vite": "^4.0.14",
     "@types/react-big-calendar": "^1.16.1",
     "darkreader": "^4.9.26",
-    "http-proxy-middleware": "^2.0.6",
-    "lucide-react": "^0.479.0",
+    "http-proxy-middleware": "^4.1.0",
+    "lucide-react": "^1.17.0",
     "moment": "^2.30.1",
-    "react": "^17.0.1",
-    "react-beautiful-dnd": "^13.0.0",
+    "react": "^19.2.7",
     "react-big-calendar": "^1.18.0",
-    "react-dom": "^17.0.1",
+    "react-dom": "^19.2.7",
     "react-flip-move": "^3.0.4",
-    "react-scripts": "^5.0.1",
     "tailwindcss": "^4.0.14",
-    "typescript": "^4.1.3",
-    "uuid": "^7.0.3",
-    "wouter": "^2.7.0"
+    "typescript": "^6.0.3",
+    "uuid": "^14.0.0",
+    "wouter": "^3.10.0"
   },
   "scripts": {
     "start": "vite",
@@ -45,10 +46,9 @@
   },
   "devDependencies": {
     "@types/material-ui": "^0.21.8",
-    "@types/react": "^17.0.1",
-    "@types/react-beautiful-dnd": "^13.0.0",
-    "@types/react-dom": "^17.0.1",
-    "@vitejs/plugin-react": "^4.3.4",
-    "vite": "^6.2.1"
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.2",
+    "vite": "^8.0.16"
   }
 }

frontend/src/App.tsx

@@ -1,5 +1,5 @@
-import { Snackbar } from "@material-ui/core";
-import { Alert } from "@material-ui/lab";
+import Snackbar from "@mui/material/Snackbar";
+import Alert from "@mui/material/Alert";
 import { useContext } from "react";
 import { Route } from "wouter";
 import CalendarView from "./components/calendar";

frontend/src/components/overlay/aboutOverlay.tsx

@@ -1,4 +1,6 @@
-import { GitHub, Group, YouTube } from "@material-ui/icons";
+import GitHubIcon from "@mui/icons-material/GitHub";
+import GroupIcon from "@mui/icons-material/Group";
+import YouTubeIcon from "@mui/icons-material/YouTube";
 import { X } from "lucide-react";
 import { forwardRef, RefObject, useContext } from "react";
 import useOutsideClick from "../../hooks/outsideClick";
@@ -43,7 +45,7 @@ const About = forwardRef<HTMLDivElement, AboutI>((props, ref) => {
           target="_blank"
           rel="noopener noreferrer"
         >
-          <GitHub fontSize="large" className="text-white" />
+          <GitHubIcon fontSize="large" className="text-white" />
         </a>
         <a
           href="https://www.youtube.com/channel/UCtb1p-24jus-QoXy49t9Xzg"
@@ -55,7 +57,7 @@ const About = forwardRef<HTMLDivElement, AboutI>((props, ref) => {
           target="_blank"
           rel="noopener noreferrer"
         >
-          <YouTube fontSize="large" />
+          <YouTubeIcon fontSize="large" />
         </a>
         <a
           href="https://teams.microsoft.com/l/team/19%3af92c481ec30345a28a5434bc530a882a%40thread.skype/conversations?groupId=503df57a-d454-4eec-b3bc-d6d87c7c24f8&tenantId=76a2ae5a-9f00-4f6b-95ed-5d33d77c4d61"
@@ -67,7 +69,7 @@ const About = forwardRef<HTMLDivElement, AboutI>((props, ref) => {
           target="_blank"
           rel="noopener noreferrer"
         >
-          <Group fontSize="large" />
+          <GroupIcon fontSize="large" />
         </a>
       </div>
     </div>

frontend/src/index.tsx

@@ -1,5 +1,5 @@
-import { render } from "react-dom";
-import App from "./app";
+import { createRoot } from "react-dom/client";
+import App from "./App";
 import { DeleteConfirmProvider } from "./provider/deleteConfirmProvider";
 import { MainProvider } from "./provider/mainProvider";
 import { ThemeProvider } from "./provider/themeProvider";
@@ -8,22 +8,27 @@ import { TodoProvider } from "./provider/todoProvider";
 import "./styles/styles.css";
 import * as serviceWorkerRegistration from "./worker/serviceWorkerRegistration";
 
-render(
-  <MainProvider>
-    <ThemeProvider>
-      <DeleteConfirmProvider>
-        <TodoProvider>
-          <TodoListProvider>
-            <App />
-          </TodoListProvider>
-        </TodoProvider>
-      </DeleteConfirmProvider>
-    </ThemeProvider>
-  </MainProvider>,
-  document.getElementById("root")
+const rootElement = document.getElementById("root");
+
+if (!rootElement) {
+    throw new Error("Root element with id 'root' not found");
+}
+
+createRoot(rootElement).render(
+    <MainProvider>
+        <ThemeProvider>
+            <DeleteConfirmProvider>
+                <TodoProvider>
+                    <TodoListProvider>
+                        <App />
+                    </TodoListProvider>
+                </TodoProvider>
+            </DeleteConfirmProvider>
+        </ThemeProvider>
+    </MainProvider>
 );
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: https://cra.link/PWA
+// Learn more about service workers
 serviceWorkerRegistration.register();

frontend/src/provider/todoListProvider.tsx

@@ -1,6 +1,6 @@
 import { createContext, useContext, useEffect, useState } from "react";
 import { useRoute } from "wouter";
-import { navigate } from "wouter/use-location";
+import { useLocation } from "wouter";
 import { TaskListTypeI } from "../types/types";
 import { MainContext } from "./mainProvider";
 
@@ -12,6 +12,7 @@ export const TodoListProvider = ({ children }: PropsI) => {
   const [, params] = useRoute("/:listId");
   const listId = params?.listId;
   const [taskLists, setTaskLists] = useState<TaskListTypeI[]>([]);
+  const [, navigate] = useLocation();
 
   useEffect(() => {
     fetch(`/api/task/lists`, {

frontend/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />