upgrade to react18

interface/package.json

@@ -12,8 +12,8 @@
     "@table-library/react-table-library": "^3.1.2",
     "@types/lodash": "^4.14.182",
     "@types/node": "^17.0.35",
-    "@types/react": "^17.0.43",
-    "@types/react-dom": "^17.0.14",
+    "@types/react": "^18.0.9",
+    "@types/react-dom": "^18.0.4",
     "@types/react-router-dom": "^5.3.3",
     "async-validator": "^4.1.1",
     "axios": "^0.27.2",
@@ -22,9 +22,9 @@
     "lodash": "^4.17.21",
     "notistack": "^2.0.5",
     "parse-ms": "^3.0.0",
-    "react": "^17.0.2",
+    "react": "^18.1.0",
     "react-app-rewired": "^2.2.1",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.1.0",
     "react-dropzone": "^14.2.1",
     "react-icons": "^4.3.1",
     "react-router-dom": "^6.3.0",

interface/src/CustomTheme.tsx

@@ -4,6 +4,8 @@ import { CssBaseline } from '@mui/material';
 import { createTheme, responsiveFontSizes, ThemeProvider } from '@mui/material/styles';
 import { blueGrey, blue } from '@mui/material/colors';
 
+import { RequiredChildrenProps } from './utils';
+
 const theme = responsiveFontSizes(
   createTheme({
     typography: {
@@ -21,7 +23,7 @@ const theme = responsiveFontSizes(
   })
 );
 
-const CustomTheme: FC = ({ children }) => (
+const CustomTheme: FC<RequiredChildrenProps> = ({ children }) => (
   <ThemeProvider theme={theme}>
     <CssBaseline />
     {children}

interface/src/components/SectionContent.tsx

@@ -2,7 +2,9 @@ import { FC } from 'react';
 
 import { Paper, Divider } from '@mui/material';
 
-interface SectionContentProps {
+import { RequiredChildrenProps } from '../utils';
+
+interface SectionContentProps extends RequiredChildrenProps {
   title: string;
   titleGutter?: boolean;
   id?: string;

interface/src/components/layout/Layout.tsx

@@ -4,13 +4,15 @@ import { useLocation } from 'react-router-dom';
 import { Box, Toolbar } from '@mui/material';
 
 import { PROJECT_NAME } from '../../api/env';
+import { RequiredChildrenProps } from '../../utils';
+
 import LayoutDrawer from './LayoutDrawer';
 import LayoutAppBar from './LayoutAppBar';
 import { LayoutContext } from './context';
 
 export const DRAWER_WIDTH = 240;
 
-const Layout: FC = ({ children }) => {
+const Layout: FC<RequiredChildrenProps> = ({ children }) => {
   const [mobileOpen, setMobileOpen] = useState(false);
   const [title, setTitle] = useState(PROJECT_NAME);
   const { pathname } = useLocation();

interface/src/components/routing/RequireAdmin.tsx

@@ -2,8 +2,9 @@ import { FC, useContext } from 'react';
 import { Navigate } from 'react-router-dom';
 
 import { AuthenticatedContext } from '../../contexts/authentication';
+import { RequiredChildrenProps } from '../../utils';
 
-const RequireAdmin: FC = ({ children }) => {
+const RequireAdmin: FC<RequiredChildrenProps> = ({ children }) => {
   const authenticatedContext = useContext(AuthenticatedContext);
   return authenticatedContext.me.admin ? <>{children}</> : <Navigate replace to="/" />;
 };

interface/src/components/routing/RequireAuthenticated.tsx

@@ -8,7 +8,9 @@ import {
 } from '../../contexts/authentication/context';
 import { storeLoginRedirect } from '../../api/authentication';
 
-const RequireAuthenticated: FC = ({ children }) => {
+import { RequiredChildrenProps } from '../../utils';
+
+const RequireAuthenticated: FC<RequiredChildrenProps> = ({ children }) => {
   const authenticationContext = useContext(AuthenticationContext);
   const location = useLocation();
 

interface/src/components/routing/RequireUnauthenticated.tsx

@@ -3,9 +3,10 @@ import { Navigate } from 'react-router-dom';
 
 import * as AuthenticationApi from '../../api/authentication';
 import { AuthenticationContext } from '../../contexts/authentication';
+import { RequiredChildrenProps } from '../../utils';
 import { FeaturesContext } from '../../contexts/features';
 
-const RequireUnauthenticated: FC = ({ children }) => {
+const RequireUnauthenticated: FC<RequiredChildrenProps> = ({ children }) => {
   const { features } = useContext(FeaturesContext);
   const authenticationContext = useContext(AuthenticationContext);
 

interface/src/components/routing/RouterTabs.tsx

@@ -3,7 +3,9 @@ import { useNavigate } from 'react-router-dom';
 
 import { Tabs, useMediaQuery, useTheme } from '@mui/material';
 
-interface RouterTabsProps {
+import { RequiredChildrenProps } from '../../utils';
+
+interface RouterTabsProps extends RequiredChildrenProps {
   value: string | false;
 }
 

interface/src/contexts/authentication/Authentication.tsx

@@ -4,12 +4,13 @@ import { useNavigate } from 'react-router-dom';
 
 import * as AuthenticationApi from '../../api/authentication';
 import { ACCESS_TOKEN } from '../../api/endpoints';
+import { RequiredChildrenProps } from '../../utils';
 import { LoadingSpinner } from '../../components';
 import { Me } from '../../types';
 import { FeaturesContext } from '../features';
 import { AuthenticationContext } from './context';
 
-const Authentication: FC = ({ children }) => {
+const Authentication: FC<RequiredChildrenProps> = ({ children }) => {
   const { features } = useContext(FeaturesContext);
   const navigate = useNavigate();
   const { enqueueSnackbar } = useSnackbar();

interface/src/contexts/features/FeaturesLoader.tsx

@@ -2,13 +2,13 @@ import { FC, useCallback, useEffect, useState } from 'react';
 
 import * as FeaturesApi from '../../api/features';
 
-import { extractErrorMessage } from '../../utils';
+import { extractErrorMessage, RequiredChildrenProps } from '../../utils';
 import { Features } from '../../types';
 import { ApplicationError, LoadingSpinner } from '../../components';
 
 import { FeaturesContext } from '.';
 
-const FeaturesLoader: FC = (props) => {
+const FeaturesLoader: FC<RequiredChildrenProps> = (props) => {
   const [errorMessage, setErrorMessage] = useState<string>();
   const [features, setFeatures] = useState<Features>();
 

interface/src/utils/index.ts

@@ -4,3 +4,5 @@ export * from './route';
 export * from './submit';
 export * from './time';
 export * from './useRest';
+export * from './props';
+

interface/src/utils/props.ts

@@ -0,0 +1,3 @@
+export interface RequiredChildrenProps {
+  children: React.ReactNode;
+}