Updated frontend dependencies

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 (