Prepare for react-router-dom v6 upgrade (#1497)

hackforla · Nov 4, 2023 · 33bbcd1 · 33bbcd1
1 parent 35d7618
commit 33bbcd1
Show file tree

Hide file tree

Showing 19 changed files with 99 additions and 197 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -49,7 +49,7 @@
     "react-jss": "^10.8.2",
     "react-loader": "^2.4.7",
     "react-quill": "^2.0.0",
-    "react-router-dom": "^5.3.0",
+    "react-router-dom": "5.3",
     "react-select": "^5.2.2",
     "react-string-replace": "^1.1.0",
     "react-to-print": "^2.14.12",

diff --git a/client/src/App.js b/client/src/App.js
@@ -69,7 +69,6 @@ const App = ({
         <Switch>
           {/* These routes either have no sidebar or use a custom sidebar */}
           <Route
-            isAuthorized={account && !!account.email}
             path="/projects"
             render={() => (
               <RequireAuth
@@ -103,15 +102,21 @@ const App = ({
             />
           </Route>
 
-          <Route exact path="/calculation">
-            <Redirect to="/calculation/1" />
-          </Route>
+          <Route
+            exact
+            path="/calculation"
+            render={() => <Redirect to="/calculation/1" />}
+          />
 
-          <Route exact path="/">
-            <Redirect
-              to={account && account.email ? "/calculation/1" : "/login"}
-            />
-          </Route>
+          <Route
+            exact
+            path="/"
+            render={() => (
+              <Redirect
+                to={account && account.email ? "/calculation/1" : "/login"}
+              />
+            )}
+          />
 
           {/* These routes use the same sidebar component */}
           <Route>

diff --git a/client/src/components/Authorization/ConfirmEmail.js b/client/src/components/Authorization/ConfirmEmail.js
@@ -1,14 +1,14 @@
 import React, { useState, useEffect } from "react";
-import PropTypes from "prop-types";
-import { Redirect, withRouter } from "react-router-dom";
+import { Redirect, useParams, useHistory } from "react-router-dom";
 import * as accountService from "../../services/account.service";
 import { useToast } from "../../contexts/Toast";
 import SendEmailForm from "./SendEmailForm";
 import ContentContainer from "../Layout/ContentContainer";
 
-const ConfirmEmail = props => {
-  const { history, match } = props;
-  const token = match.params.token;
+const ConfirmEmail = () => {
+  const params = useParams();
+  const history = useHistory();
+  const token = params.token;
   const [submitted, setSubmitted] = useState(false);
   const [confirmResult, setConfirmResult] = useState(false);
   const toast = useToast();
@@ -54,15 +54,4 @@ const ConfirmEmail = props => {
   );
 };
 
-ConfirmEmail.propTypes = {
-  match: PropTypes.shape({
-    params: PropTypes.shape({
-      token: PropTypes.string
-    })
-  }),
-  history: PropTypes.shape({
-    push: PropTypes.func.isRequired
-  })
-};
-
-export default withRouter(ConfirmEmail);
+export default ConfirmEmail;
diff --git a/client/src/components/Authorization/ForgotPassword.js b/client/src/components/Authorization/ForgotPassword.js
@@ -1,5 +1,4 @@
 import React, { useState } from "react";
-import { withRouter } from "react-router-dom";
 import * as accountService from "../../services/account.service";
 import ContentContainer from "../Layout/ContentContainer";
 import SendEmailForm from "./SendEmailForm";
@@ -32,4 +31,4 @@ const ForgotPassword = () => {
   );
 };
 
-export default withRouter(ForgotPassword);
+export default ForgotPassword;
diff --git a/client/src/components/Authorization/Login.js b/client/src/components/Authorization/Login.js
@@ -1,7 +1,6 @@
 import React, { useState, useRef, useContext } from "react";
 import UserContext from "../../contexts/UserContext";
-import PropTypes from "prop-types";
-import { Link, withRouter, useHistory, useLocation } from "react-router-dom";
+import { Link, useParams, useHistory, useLocation } from "react-router-dom";
 import { createUseStyles, useTheme } from "react-jss";
 import { Formik, Form, Field, ErrorMessage } from "formik";
 import * as Yup from "yup";
@@ -31,10 +30,9 @@ const useStyles = createUseStyles(theme => ({
   }
 }));
 
-const Login = props => {
+const Login = () => {
   const focusRef = useRef(null);
   const userContext = useContext(UserContext);
-  const { match } = props;
   const { search } = useLocation();
   const searchParams = new URLSearchParams(search);
   const projectId = searchParams.get("projectId");
@@ -44,8 +42,9 @@ const Login = props => {
     useState(false);
   const classes = useStyles();
   const theme = useTheme();
+  const params = useParams();
   const initialValues = {
-    email: match.params.email ? decodeURIComponent(match.params.email) : "",
+    email: params.email ? decodeURIComponent(params.email) : "",
     password: ""
   };
 
@@ -64,11 +63,7 @@ const Login = props => {
   const trackLogin = useTrackEvent(appInsights, "Login");
   const trackLoginFail = useTrackEvent(appInsights, "Login Failed");
 
-  const handleSubmit = async (
-    { email, password },
-    { setSubmitting },
-    { history }
-  ) => {
+  const handleSubmit = async ({ email, password }, { setSubmitting }) => {
     try {
       const loginResponse = await accountService.login(email, password);
 
@@ -164,7 +159,7 @@ const Login = props => {
         <Formik
           initialValues={initialValues}
           validationSchema={loginSchema}
-          onSubmit={(values, actions) => handleSubmit(values, actions, props)}
+          onSubmit={(values, actions) => handleSubmit(values, actions)}
         >
           {({ touched, errors, isSubmitting, values }) => {
             const isDisabled = !!(
@@ -271,12 +266,5 @@ const Login = props => {
     </ContentContainer>
   );
 };
-Login.propTypes = {
-  match: PropTypes.shape({
-    params: PropTypes.shape({
-      email: PropTypes.string
-    })
-  })
-};
 
-export default withRouter(Login);
+export default Login;
diff --git a/client/src/components/Authorization/Register.js b/client/src/components/Authorization/Register.js
@@ -1,9 +1,9 @@
 import React, { useState, useRef } from "react";
-import PropTypes from "prop-types";
+import { useParams } from "react-router-dom";
 import * as accountService from "../../services/account.service";
 import { createUseStyles } from "react-jss";
 import { Formik, Form, Field, ErrorMessage } from "formik";
-import { Link, withRouter } from "react-router-dom";
+import { Link } from "react-router-dom";
 import * as Yup from "yup";
 import Button from "../Button/Button";
 import ContentContainer from "../Layout/ContentContainer";
@@ -20,11 +20,11 @@ const useStyles = createUseStyles({
 const Register = props => {
   const focusRef = useRef(null);
   const classes = useStyles();
-  const { match } = props;
+  const params = useParams();
   const initialValues = {
     firstName: "",
     lastName: "",
-    email: match.params.email || "",
+    email: params.email || "",
     password: "",
     passwordConfirm: ""
   };
@@ -227,12 +227,5 @@ const Register = props => {
     </ContentContainer>
   );
 };
-Register.propTypes = {
-  match: PropTypes.shape({
-    params: PropTypes.shape({
-      email: PropTypes.string
-    })
-  })
-};
 
-export default withRouter(Register);
+export default Register;
diff --git a/client/src/components/Authorization/ResetPassword.js b/client/src/components/Authorization/ResetPassword.js
@@ -1,6 +1,5 @@
 import React, { useState, useEffect, useRef } from "react";
-import PropTypes from "prop-types";
-import { withRouter } from "react-router-dom";
+import { useHistory, useParams } from "react-router-dom";
 import * as accountService from "../../services/account.service";
 import { Formik, Form, Field, ErrorMessage } from "formik";
 import * as Yup from "yup";
@@ -26,10 +25,12 @@ const validationSchema = Yup.object().shape({
     .oneOf([Yup.ref("password")], "Password does not match")
 });
 
-const ResetPassword = props => {
+const ResetPassword = () => {
+  const history = useHistory();
   const focusRef = useRef(null);
   const [success, setSuccess] = useState(false);
-  const { token } = props.match.params;
+  const params = useParams();
+  const token = params.token;
   const classes = useStyles();
   const toast = useToast();
 
@@ -119,7 +120,7 @@ const ResetPassword = props => {
           <h3>Redirecting to login</h3>
           <div className="hide">
             {setTimeout(() => {
-              props.history.push(`/login/${success}`);
+              history.push(`/login/${success}`);
             }, 2000)}
           </div>
         </>
@@ -128,15 +129,4 @@ const ResetPassword = props => {
   );
 };
 
-ResetPassword.propTypes = {
-  match: PropTypes.shape({
-    params: PropTypes.shape({
-      token: PropTypes.string
-    })
-  }),
-  history: PropTypes.shape({
-    push: PropTypes.func.isRequired
-  })
-};
-
-export default withRouter(ResetPassword);
+export default ResetPassword;
diff --git a/client/src/components/Authorization/SendEmailForm.js b/client/src/components/Authorization/SendEmailForm.js
@@ -1,6 +1,6 @@
 import React, { useRef } from "react";
 import PropTypes from "prop-types";
-import { Link, withRouter } from "react-router-dom";
+import { Link } from "react-router-dom";
 import Button from "../Button/Button";
 import { createUseStyles } from "react-jss";
 import { Formik, Form, Field, ErrorMessage } from "formik";
@@ -52,10 +52,6 @@ const SendEmailForm = ({ label, submitted, handleSubmit }) => {
   const focusRef = useRef(null);
   const classes = useStyles();
 
-  // useEffect(() => {
-  //   focusRef.current.focus();
-  // });
-
   return !submitted ? (
     <>
       <h1 className={classes.pageTitle}>Send {label} Email</h1>
@@ -124,4 +120,4 @@ SendEmailForm.propTypes = {
   submitted: PropTypes.bool.isRequired
 };
 
-export default withRouter(SendEmailForm);
+export default SendEmailForm;