I349 react upgrade (#358)

* Upgrading to react typscript, react-query and other package to the next to latest

frontend/app/components/Home.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { Alert, Box, Grid, LinearProgress, Snackbar, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
 
@@ -36,7 +36,7 @@ function Home (props: HomeProps) {
   const [searchFilter, setSearchFilter] = useState('');
   const [showRefreshAlert, setShowRefreshAlert] = useState<undefined | boolean>(undefined);
 
-  const { isLoading: getToolsLoading, error: getToolsError } = useQuery('getTools', getTools, {
+  const { isLoading: getToolsLoading, error: getToolsError } = useQuery(['getTools'], getTools, {
     onSuccess: (data) => setTools(data)
   });
 
@@ -105,7 +105,7 @@ function Home (props: HomeProps) {
         </div>
       </MainContainer>
       <Typography component='footer' sx={{ textAlign: 'center' }}>
-        Copyright © 2022 The Regents of the University of Michigan
+        Copyright © 2024 The Regents of the University of Michigan
       </Typography>
       <Snackbar open={showRefreshAlert} onClose={handleRefreshAlertClose} autoHideDuration={10000}>
         <Alert severity='info' elevation={2} onClose={handleRefreshAlertClose}>

frontend/app/components/ToolCard.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import AddBox from '@mui/icons-material/AddBox';
-import { useMutation } from 'react-query';
+import { useMutation } from '@tanstack/react-query';
 import CheckCircleOutline from '@mui/icons-material/CheckCircleOutline';
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';

frontend/app/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
-import { QueryClient, QueryClientProvider } from 'react-query';
+import { createRoot } from 'react-dom/client';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ThemeProvider } from '@mui/material';
 
 import Home from './components/Home';
@@ -24,13 +24,14 @@ const queryClient = new QueryClient({
   }
 });
 
-ReactDOM.render(
-  (
-    <QueryClientProvider client={queryClient}>
-      <ThemeProvider theme={theme}>
-        <Home globals={globals} />
-      </ThemeProvider>
-    </QueryClientProvider>
-  ),
-  document.getElementById('react-app')
+const container = document.getElementById('react-app');
+if (container === null) throw Error('"react-app" was not found!');
+const root = createRoot(container);
+
+root.render(
+  <QueryClientProvider client={queryClient}>
+    <ThemeProvider theme={theme}>
+      <Home globals={globals} />
+    </ThemeProvider>
+  </QueryClientProvider>
 );