Merge pull request #87 from tsukashusan/APLtoReact18

Application to React18

Author: HeidiSteen

search-website-functions-v4/client/package.json

@@ -4,22 +4,23 @@
   "private": true,
   "proxy": "http://localhost:7071",
   "dependencies": {
-    "@material-ui/core": "^4.12.4",
-    "@material-ui/icons": "^4.11.3",
-    "@material-ui/lab": "^4.0.0-alpha.61",
+    "@mui/material": "^5.11.16",
+    "@mui/icons-material": "^5.11.16",
+    "@mui/lab": "^5.0.0-alpha.125",
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.5.0",
-    "axios": "^1.1.3",
-    "bootstrap": "^5.2.2",
-    "jquery": "^3.6.1",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@emotion/styled":"11.10.6",
+    "axios": "^1.3.4",
+    "bootstrap": "^5.2.3",
+    "jquery": "^3.6.4",
     "popper.js": "^1.16.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.4.2",
-    "react-scripts": "5.0.1",
-    "styled-components": "^5.3.6",
-    "web-vitals": "^2.1.4"
+    "react-router-dom": "^6.10.0",
+    "react-scripts": "^5.0.1",
+    "styled-components": "^5.3.9",
+    "web-vitals": "^3.3.1"
   },
   "scripts": {
     "start": "react-scripts start",

search-website-functions-v4/client/src/App/App.js

@@ -1,12 +1,12 @@
 import React, {useState, useEffect} from 'react';
-import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
 
 // Context for user authentication
 import { AuthContext } from '../contexts/AuthContext';
 
 // App shell components
 import AppHeader from '../components/AppHeader/AppHeader';
-//import AppFooter from '../components/AppFooter/AppFooter';
+import AppFooter from '../components/AppFooter/AppFooter';
 
 // React Router page components
 import Home from '../pages/Home/Home';
@@ -46,14 +46,15 @@ export default function App() {
     <AuthContext.Provider value={user}>
       <div className="container-fluid app">
         <AppHeader />
-        <Router>
+        <BrowserRouter>
           <Routes>
-            <Route path="/" element={<Home />} />
-            <Route path="/search" element={<Search />} />
-            <Route path="/details/:id" element={<Details />} />
+            <Route path={`/`} element={<Home />} />
+            <Route path={`/search`} element={<Search />} />
+            <Route path={`/details/:id`} element={<Details />}/>
+            <Route path={`*`} element={<Home />} />
           </Routes>
-        </Router>
-        {/* <AppFooter /> */}
+        </BrowserRouter>
+        {<AppFooter />}
       </div>
     </AuthContext.Provider>
   );

search-website-functions-v4/client/src/components/AppFooter/AppFooter.js

@@ -6,7 +6,7 @@ export default function AppFooter() {
   return (
       <footer className="footer">
         <hr />
-        &copy; 2020 Microsoft
+        &copy; 2023 Microsoft
       </footer>
   );
 };

search-website-functions-v4/client/src/components/AppHeader/AppHeader.js

@@ -19,7 +19,7 @@ export default function AppHeader() {
         <div className="collapse navbar-collapse" id="navbarSupportedContent">
           <ul className="navbar-nav mr-auto">
             <li className="nav-item">
-              <a className="nav-link" href="/Search">Search</a>
+              <a className="nav-link" href="/search">Search</a>
             </li>
             <li className="nav-item">
               <a className="nav-link" href="https://azure.microsoft.com/services/search/">Learn more</a>

search-website-functions-v4/client/src/components/Facets/CheckboxFacet/CheckboxFacet.js

@@ -1,6 +1,6 @@
 import React, {useState} from 'react';
-import { Collapse, Checkbox, List, ListItem, ListItemText } from '@material-ui/core';
-import { ExpandLess, ExpandMore } from '@material-ui/icons';
+import { Collapse, Checkbox, List, ListItem, ListItemText } from '@mui/material';
+import { ExpandLess, ExpandMore } from '@mui/icons-material';
 import styled from 'styled-components';
 
 import './CheckboxFacet.css';

search-website-functions-v4/client/src/components/Facets/Facets.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { List, Chip } from '@material-ui/core';
+import { List, Chip } from '@mui/material';
 import CheckboxFacet from './CheckboxFacet/CheckboxFacet';
 import styled from 'styled-components';
 import "./Facets.css";

search-website-functions-v4/client/src/pages/Details/Details.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { useParams } from 'react-router-dom';
-import Rating from '@material-ui/lab/Rating';
-import CircularProgress from '@material-ui/core/CircularProgress';
+import Rating from '@mui/material/Rating';
+import CircularProgress from '@mui/material/CircularProgress';
 import axios from 'axios';
 
 import "./Details.css";

search-website-functions-v4/client/src/pages/Search/Search.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import axios from 'axios';
-import CircularProgress  from '@material-ui/core/CircularProgress';
+import CircularProgress  from '@mui/material/CircularProgress';
 import { useLocation, useNavigate } from "react-router-dom";
 
 import Results from '../../components/Results/Results';

search-website-functions-v4/client/staticwebapp.config.json

@@ -0,0 +1,5 @@
+{
+    "navigationFallback": {
+      "rewrite": "/index.html"
+    }
+}