Update to react v18 and react-router-dom v6

package.json

@@ -4,14 +4,15 @@
   "private": true,
   "homepage": "https://Yog9.github.io/SnapShot",
   "dependencies": {
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.3.2",
-    "@testing-library/user-event": "^7.1.2",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.2.0",
+    "@testing-library/user-event": "^13.5.0",
     "axios": "^0.19.2",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-router-dom": "^5.1.2",
-    "react-scripts": "3.4.1"
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "react-router-dom": "6.3.0",
+    "react-scripts": "3.4.1",
+    "web-vitals": "^2.1.4"
   },
   "scripts": {
     "predeploy": "npm run build",

src/App.js

@@ -1,60 +1,62 @@
-import React, { Component } from "react";
-import PhotoContextProvider from "./context/PhotoContext";
-import { HashRouter, Route, Switch, Redirect } from "react-router-dom";
-import Header from "./components/Header";
-import Item from "./components/Item";
-import Search from "./components/Search";
-import NotFound from "./components/NotFound";
+import React, {Component} from 'react'
+import PhotoContextProvider from './context/PhotoContext'
+import {
+  HashRouter,
+  Route,
+  Routes,
+  Navigate,
+  useNavigate,
+  useParams,
+} from 'react-router-dom'
+
+import Header from './components/Header'
+import Item from './components/Item'
+import Search from './components/Search'
+import NotFound from './components/NotFound'
+
+function withRouter(Component) {
+  return (props) => {
+    const navigate = useNavigate()
+    const params = useParams()
+    return <Component {...props} navigate={navigate} params={params} />
+  }
+}
+
+const Searching = withRouter(Search)
+const Headering = withRouter(Header)
 
 class App extends Component {
   // Prevent page reload, clear input, set URL and push history on submit
-  handleSubmit = (e, history, searchInput) => {
-    e.preventDefault();
-    e.currentTarget.reset();
-    let url = `/search/${searchInput}`;
-    history.push(url);
-  };
+  handleSubmit = (e, navigate, searchInput) => {
+    e.preventDefault()
+    e.currentTarget.reset()
+    const url = `/search/${searchInput}`
+    navigate(url)
+  }
 
   render() {
     return (
       <PhotoContextProvider>
         <HashRouter basename="/SnapScout">
           <div className="container">
-            <Route
-              render={props => (
-                <Header
-                  handleSubmit={this.handleSubmit}
-                  history={props.history}
-                />
-              )}
-            />
-            <Switch>
-              <Route
-                exact
-                path="/"
-                render={() => <Redirect to="/mountain" />}
-              />
-
+            <Headering handleSubmit={this.handleSubmit} />
+            <Routes>
+              <Route path="/" element={<Navigate replace to="/mountain" />} />
               <Route
                 path="/mountain"
-                render={() => <Item searchTerm="mountain" />}
-              />
-              <Route path="/beach" render={() => <Item searchTerm="beach" />} />
-              <Route path="/bird" render={() => <Item searchTerm="bird" />} />
-              <Route path="/food" render={() => <Item searchTerm="food" />} />
-              <Route
-                path="/search/:searchInput"
-                render={props => (
-                  <Search searchTerm={props.match.params.searchInput} />
-                )}
+                element={<Item searchTerm="mountain" />}
               />
-              <Route component={NotFound} />
-            </Switch>
+              <Route path="/beach" element={<Item searchTerm="beach" />} />
+              <Route path="/bird" element={<Item searchTerm="bird" />} />
+              <Route path="/food" element={<Item searchTerm="food" />} />
+              <Route path="/search/:searchTerm" element={<Searching />} />
+              <Route path="*" element={<NotFound />} />
+            </Routes>
           </div>
         </HashRouter>
       </PhotoContextProvider>
-    );
+    )
   }
 }
 
-export default App;
+export default App

src/components/Form.js

@@ -1,15 +1,15 @@
-import React, { useState } from "react";
+import React, {useState} from 'react'
 
-const Form = ({ handleSubmit, history }) => {
-  const [searchEntry, setSearchEntry] = useState("");
+const Form = ({navigate, handleSubmit}) => {
+  const [searchEntry, setSearchEntry] = useState('')
   // update search text state
-  const updateSearchInput = e => {
-    setSearchEntry(e.target.value);
-  };
+  const updateSearchInput = (e) => {
+    setSearchEntry(e.target.value)
+  }
   return (
     <form
       className="search-form"
-      onSubmit={e => handleSubmit(e, history, searchEntry)}
+      onSubmit={(e) => handleSubmit(e, navigate, searchEntry)}
     >
       <input
         type="text"
@@ -20,7 +20,7 @@ const Form = ({ handleSubmit, history }) => {
       />
       <button
         type="submit"
-        className={`search-button ${searchEntry.trim() ? "active" : null}`}
+        className={`search-button ${searchEntry.trim() ? 'active' : null}`}
         disabled={!searchEntry.trim()}
       >
         <svg height="32" width="32">
@@ -32,7 +32,7 @@ const Form = ({ handleSubmit, history }) => {
         </svg>
       </button>
     </form>
-  );
-};
+  )
+}
 
-export default Form;
+export default Form

src/components/Header.js

@@ -1,15 +1,15 @@
-import React from "react";
-import Form from "./Form";
-import Navigation from "./Navigation";
+import React from 'react'
+import Form from './Form'
+import Navigation from './Navigation'
 
-const Header = ({ history, handleSubmit }) => {
+const Header = ({navigate, handleSubmit}) => {
   return (
     <div>
       <h1>SnapShot</h1>
-      <Form history={history} handleSubmit={handleSubmit} />
+      <Form navigate={navigate} handleSubmit={handleSubmit} />
       <Navigation />
     </div>
-  );
-};
+  )
+}
 
-export default Header;
+export default Header

src/components/Search.js

@@ -1,13 +1,13 @@
-import React from "react";
-import Container from "./Container";
+import React from 'react'
+import Container from './Container'
 
-const Search = ({ searchTerm }) => {
+const Search = ({params: {searchTerm}}) => {
   return (
     <div>
       <h2>{searchTerm} Images</h2>
       <Container searchTerm={searchTerm} />
     </div>
-  );
-};
+  )
+}
 
-export default Search;
+export default Search

src/index.js

@@ -1,12 +1,23 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import * as serviceWorker from './serviceWorker';
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import './index.css'
+import App from './App'
+import * as serviceWorker from './serviceWorker'
+import reportWebVitals from './reportWebVitals'
 
-ReactDOM.render(<App />, document.getElementById('root'));
+const root = ReactDOM.createRoot(document.getElementById('root'))
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+)
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
 // Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();
+serviceWorker.unregister()
+
+// 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()

src/reportWebVitals.js

@@ -0,0 +1,13 @@
+const reportWebVitals = onPerfEntry => {
+  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;