Updated frontend dependencies

.drone.yml

@@ -24,7 +24,7 @@ steps:
   commands:
   # Build website
   - cd geneit_app
-  - npm install 
+  - npm install --legacy-peer-deps # TODO : remove when mui-color-input is updated
   - GENERATE_SOURCEMAP=false npm run build 
   # Install AWS
   - curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip" -o "awscliv2.zip"

geneit_app/package.json

@@ -7,7 +7,7 @@
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
-    "@fontsource/roboto": "^5.1.0",
+    "@fontsource/roboto": "^5.2.5",
     "@fullcalendar/core": "^6.1.15",
     "@fullcalendar/daygrid": "^6.1.15",
     "@fullcalendar/interaction": "^6.1.15",
@@ -15,36 +15,35 @@
     "@fullcalendar/react": "^6.1.15",
     "@mdi/js": "^7.2.96",
     "@mdi/react": "^1.6.1",
-    "@mui/icons-material": "^6.1.2",
+    "@mui/icons-material": "^7.0.0",
-    "@mui/lab": "^6.0.0-beta.10",
+    "@mui/lab": "^7.0.0-beta.9",
-    "@mui/material": "^6.1.2",
+    "@mui/material": "^7.0.0",
-    "@mui/x-data-grid": "^7.18.0",
+    "@mui/x-data-grid": "^7.28.2",
-    "@mui/x-date-pickers": "^7.18.0",
+    "@mui/x-date-pickers": "^7.28.2",
-    "@mui/x-tree-view": "^7.18.0",
+    "@mui/x-tree-view": "^7.28.1",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
-    "@testing-library/user-event": "^14.0.0",
+    "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^29.5.13",
-    "@types/react": "^18.3.11",
+    "@types/react": "^19.0.12",
-    "@types/react-dom": "^18.3.0",
+    "@types/react-dom": "^19.0.4",
     "@vitejs/plugin-react": "^4.3.2",
     "date-and-time": "^3.6.0",
     "dayjs": "^1.11.13",
     "email-validator": "^2.0.4",
     "filesize": "^10.1.6",
-    "jspdf": "^2.5.2",
+    "jspdf": "^3.0.1",
-    "mui-color-input": "^5.0.0",
+    "mui-color-input": "^6.0.0",
-    "react": "^18.3.1",
+    "react": "^19.0.0",
-    "react-dom": "^18.3.1",
+    "react-dom": "^19.0.0",
-    "react-easy-crop": "^5.0.8",
+    "react-easy-crop": "^5.4.1",
     "react-qr-code": "^2.0.14",
-    "react-router-dom": "^7.0.0",
+    "react-router-dom": "^7.4.0",
-    "react-zoom-pan-pinch": "^3.4.4",
+    "react-zoom-pan-pinch": "^3.7.0",
-    "svg2pdf.js": "^2.2.3",
+    "svg2pdf.js": "^2.5.0",
-    "typescript": "^5.6.2",
+    "typescript": "^5.8.2",
-    "vite": "^6.0.0",
+    "vite": "^6.2.3",
-    "vite-tsconfig-paths": "^5.0.1",
+    "vite-tsconfig-paths": "^5.0.1"
-    "web-vitals": "^3.5.2"
   },
   "scripts": {
     "start": "vite",

geneit_app/src/index.tsx

@@ -3,7 +3,6 @@ import ReactDOM from "react-dom/client";
 import { App } from "./App";
 import { ServerApi } from "./api/ServerApi";
 import "./index.css";
-import reportWebVitals from "./reportWebVitals";
 
 // Roboto font
 import "@fontsource/roboto/300.css";
@@ -61,8 +60,3 @@ async function init() {
 }
 
 init();
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();

geneit_app/src/reportWebVitals.ts

@@ -1,15 +0,0 @@
-import { ReportHandler } from 'web-vitals';
-
-const reportWebVitals = (onPerfEntry?: ReportHandler) => {
-  if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
-  }
-};
-
-export default reportWebVitals;

geneit_app/src/routes/auth/LoginRoute.tsx

@@ -1,4 +1,5 @@
-import { Visibility, VisibilityOff } from "@mui/icons-material";
+import VisibilityIcon from "@mui/icons-material/Visibility";
+import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
 import {
   Alert,
   CircularProgress,
@@ -11,7 +12,7 @@ import {
 } from "@mui/material";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
-import Grid from "@mui/material/Grid2";
+import Grid from "@mui/material/Grid";
 import TextField from "@mui/material/TextField";
 import Typography from "@mui/material/Typography";
 import * as React from "react";
@@ -148,7 +149,7 @@ export function LoginRoute(): React.ReactElement {
                     onMouseDown={handleMouseDownPassword}
                     edge="end"
                   >
-                    {showPassword ? <VisibilityOff /> : <Visibility />}
+                    {showPassword ? <VisibilityOffIcon /> : <VisibilityIcon />}
                   </IconButton>
                 </Tooltip>
               </InputAdornment>

geneit_app/src/routes/family/genealogy/FamilyCoupleRoute.tsx

@@ -4,7 +4,7 @@ import EditIcon from "@mui/icons-material/Edit";
 import FileDownloadIcon from "@mui/icons-material/FileDownload";
 import SaveIcon from "@mui/icons-material/Save";
 import { Button, Stack } from "@mui/material";
-import Grid from "@mui/material/Grid2";
+import Grid from "@mui/material/Grid";
 import React from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { ServerApi } from "../../../api/ServerApi";

geneit_app/src/routes/family/genealogy/FamilyMemberRoute.tsx

@@ -12,7 +12,7 @@ import {
   ListItemText,
   Stack,
 } from "@mui/material";
-import Grid from "@mui/material/Grid2";
+import Grid from "@mui/material/Grid";
 import * as EmailValidator from "email-validator";
 import React from "react";
 import { useNavigate, useParams } from "react-router-dom";

geneit_app/src/setupTests.ts

@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';

geneit_app/src/widgets/BaseFamilyRoute.tsx

@@ -54,7 +54,7 @@ export function BaseFamilyRoute(): React.ReactElement {
 
   const loadKey = React.useRef(1);
 
-  const loadPromise = React.useRef<() => void>();
+  const loadPromise = React.useRef<() => void>(null);
 
   const load = async () => {
     const familyID = Number(familyId);
@@ -104,7 +104,7 @@ export function BaseFamilyRoute(): React.ReactElement {
       build={() => {
         if (loadPromise.current != null) {
           loadPromise.current?.();
-          loadPromise.current = undefined;
+          loadPromise.current = null;
         }
 
         return (

geneit_app/src/widgets/BaseLoginpage.tsx

@@ -3,10 +3,9 @@ import Icon from "@mdi/react";
 import Avatar from "@mui/material/Avatar";
 import Box from "@mui/material/Box";
 import CssBaseline from "@mui/material/CssBaseline";
-import Grid from "@mui/material/Grid2";
+import Grid from "@mui/material/Grid";
 import Paper from "@mui/material/Paper";
 import Typography from "@mui/material/Typography";
-import * as React from "react";
 import { Link, Outlet } from "react-router-dom";
 import { DarkThemeButton } from "./DarkThemeButton";
 

geneit_app/src/widgets/PasswordInput.tsx

@@ -1,4 +1,5 @@
-import { Visibility, VisibilityOff } from "@mui/icons-material";
+import VisibilityIcon from "@mui/icons-material/Visibility";
+import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
 import {
   FormControl,
   FormHelperText,
@@ -50,7 +51,7 @@ export function PasswordInput(p: {
               onMouseDown={handleMouseDownPassword}
               edge="end"
             >
-              {showPassword ? <VisibilityOff /> : <Visibility />}
+              {showPassword ? <VisibilityOffIcon /> : <VisibilityIcon />}
             </IconButton>
           </InputAdornment>
         }

geneit_app/src/widgets/accommodations/BaseAccommodationsRoute.tsx

@@ -27,7 +27,7 @@ export function BaseAccommodationsRoute(): React.ReactElement {
 
   const loadKey = React.useRef(1);
 
-  const loadPromise = React.useRef<() => void>();
+  const loadPromise = React.useRef<() => void>(null);
 
   const load = async () => {
     setAccommodations(
@@ -53,7 +53,7 @@ export function BaseAccommodationsRoute(): React.ReactElement {
       build={() => {
         if (loadPromise.current != null) {
           loadPromise.current?.();
-          loadPromise.current = undefined;
+          loadPromise.current = null;
         }
 
         return (

geneit_app/src/widgets/genealogy/BaseGenealogyRoute.tsx

@@ -22,7 +22,7 @@ export function BaseGenealogyRoute(): React.ReactElement {
 
   const loadKey = React.useRef(1);
 
-  const loadPromise = React.useRef<() => void>();
+  const loadPromise = React.useRef<() => void>(null);
 
   const load = async () => {
     setMembers(await MemberApi.GetEntireList(family.familyId));
@@ -48,7 +48,7 @@ export function BaseGenealogyRoute(): React.ReactElement {
       build={() => {
         if (loadPromise.current != null) {
           loadPromise.current?.();
-          loadPromise.current = undefined;
+          loadPromise.current = null;
         }
 
         return (