feat: upgrade react rotuer to v6

openedx · May 22, 2023 · 099833a · 099833a
1 parent f2f761e
commit 099833a
Show file tree

Hide file tree

Showing 15 changed files with 163 additions and 136 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,7 +14,7 @@
     "lint": "fedx-scripts eslint --ext .js --ext .jsx .",
     "snapshot": "fedx-scripts jest --updateSnapshot",
     "start": "fedx-scripts webpack-dev-server --progress",
-    "test": "TZ=UTC fedx-scripts jest --coverage --passWithNoTests"
+    "test": "TZ=UTC fedx-scripts jest --passWithNoTests"
   },
   "bugs": {
     "url": "https://github.com/openedx/frontend-app-account/issues"
@@ -66,7 +66,7 @@
     "react-helmet": "6.1.0",
     "react-redux": "7.2.9",
     "react-router": "5.2.1",
-    "react-router-dom": "5.3.0",
+    "react-router-dom": "^6.0.0",
     "react-router-hash-link": "2.4.3",
     "react-scrollspy": "3.4.3",
     "react-transition-group": "4.4.5",

diff --git a/src/account-settings/name-change/NameChange.jsx b/src/account-settings/name-change/NameChange.jsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { connect, useDispatch } from 'react-redux';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import PropTypes from 'prop-types';
 
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
@@ -29,7 +29,7 @@ const NameChangeModal = ({
   saveState,
 }) => {
   const dispatch = useDispatch();
-  const { push } = useHistory();
+  const navigate = useNavigate();
   const { username } = getAuthenticatedUser();
   const [verifiedNameInput, setVerifiedNameInput] = useState(formValues.verified_name || '');
   const [confirmedWarning, setConfirmedWarning] = useState(false);
@@ -69,9 +69,9 @@ const NameChangeModal = ({
   useEffect(() => {
     if (saveState === 'complete') {
       handleClose();
-      push(`/id-verification?next=${encodeURIComponent('account/settings')}`);
+      navigate(`/id-verification?next=${encodeURIComponent('account/settings')}`);
     }
-  }, [handleClose, push, saveState]);
+  }, [handleClose, navigate, saveState]);
 
   function renderErrors() {
     if (Object.keys(errors).length > 0) {

diff --git a/src/id-verification/IdVerificationPage.jsx b/src/id-verification/IdVerificationPage.jsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { connect } from 'react-redux';
 import {
-  Route, Switch, Redirect, useRouteMatch, useLocation,
+  Route, Routes, useLocation, useNavigate,
 } from 'react-router-dom';
 import camelCase from 'lodash.camelcase';
 import qs from 'qs';
@@ -27,8 +27,8 @@ import messages from './IdVerification.messages';
 
 // eslint-disable-next-line react/prefer-stateless-function
 const IdVerificationPage = (props) => {
-  const { path } = useRouteMatch();
   const { search } = useLocation();
+  const navigate = useNavigate();
 
   const [isModalOpen, setIsModalOpen] = useState(false);
 
@@ -45,81 +45,82 @@ const IdVerificationPage = (props) => {
     }
   }, [search]);
 
+  useEffect(() => {
+    navigate('/id-verification/review-requirements');
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   return (
-    <>
-      {/* If user reloads, redirect to the beginning of the process */}
-      <Redirect to={`${path}/review-requirements`} />
-      <div className="page__id-verification container-fluid py-5">
-        <div className="row">
-          <div className="col-lg-6 col-md-8">
-            <VerifiedNameContextProvider>
-              <IdVerificationContextProvider>
-                <Switch>
-                  <Route path={`${path}/review-requirements`} component={ReviewRequirementsPanel} />
-                  <Route path={`${path}/request-camera-access`} component={RequestCameraAccessPanel} />
-                  <Route path={`${path}/portrait-photo-context`} component={PortraitPhotoContextPanel} />
-                  <Route path={`${path}/take-portrait-photo`} component={TakePortraitPhotoPanel} />
-                  <Route path={`${path}/id-context`} component={IdContextPanel} />
-                  <Route path={`${path}/get-name-id`} component={GetNameIdPanel} />
-                  <Route path={`${path}/take-id-photo`} component={TakeIdPhotoPanel} />
-                  <Route path={`${path}/summary`} component={SummaryPanel} />
-                  <Route path={`${path}/submitted`} component={SubmittedPanel} />
-                </Switch>
-              </IdVerificationContextProvider>
-            </VerifiedNameContextProvider>
-          </div>
-          <div className="col-lg-6 col-md-4 pt-md-0 pt-4 text-right">
-            <Button variant="link" className="px-0" onClick={() => setIsModalOpen(true)}>
-              Privacy Information
-            </Button>
-          </div>
+    <div className="page__id-verification container-fluid py-5">
+      <div className="row">
+        <div className="col-lg-6 col-md-8">
+          <VerifiedNameContextProvider>
+            <IdVerificationContextProvider>
+              <Routes>
+                <Route path="/review-requirements" element={<ReviewRequirementsPanel />} />
+                <Route path="/request-camera-access" element={<RequestCameraAccessPanel />} />
+                <Route path="/portrait-photo-context" element={<PortraitPhotoContextPanel />} />
+                <Route path="/take-portrait-photo" element={<TakePortraitPhotoPanel />} />
+                <Route path="/id-context" element={<IdContextPanel />} />
+                <Route path="/get-name-id" element={<GetNameIdPanel />} />
+                <Route path="/take-id-photo" element={<TakeIdPhotoPanel />} />
+                <Route path="/summary" element={<SummaryPanel />} />
+                <Route path="/submitted" element={<SubmittedPanel />} />
+              </Routes>
+            </IdVerificationContextProvider>
+          </VerifiedNameContextProvider>
+        </div>
+        <div className="col-lg-6 col-md-4 pt-md-0 pt-4 text-right">
+          <Button variant="link" className="px-0" onClick={() => setIsModalOpen(true)}>
+            Privacy Information
+          </Button>
         </div>
-        <ModalDialog
-          isOpen={isModalOpen}
-          title="Id modal"
-          onClose={() => setIsModalOpen(false)}
-          size="lg"
-          hasCloseButton={false}
-        >
-          <ModalDialog.Header>
-            <ModalDialog.Title data-testid="Id-modal">
-              {props.intl.formatMessage(messages['id.verification.privacy.title'])}
-            </ModalDialog.Title>
-          </ModalDialog.Header>
-          <ModalDialog.Body>
-            <div className="p-3">
-              <h6>
-                {props.intl.formatMessage(
-                  messages['id.verification.privacy.need.photo.question'],
-                  { siteName: getConfig().SITE_NAME },
-                )}
-              </h6>
-              <p>{props.intl.formatMessage(messages['id.verification.privacy.need.photo.answer'])}</p>
-              <h6>
-                {props.intl.formatMessage(
-                  messages['id.verification.privacy.do.with.photo.question'],
-                  { siteName: getConfig().SITE_NAME },
-                )}
-              </h6>
-              <p>
-                {props.intl.formatMessage(
-                  messages['id.verification.privacy.do.with.photo.answer'],
-                  { siteName: getConfig().SITE_NAME },
-                )}
-              </p>
-            </div>
-          </ModalDialog.Body>
-          <ModalDialog.Footer className="p-2">
-            <ActionRow>
-              <ModalDialog.CloseButton variant="link">
-                Close
-              </ModalDialog.CloseButton>
-            </ActionRow>
-          </ModalDialog.Footer>
-        </ModalDialog>
-
       </div>
-    </>
+      <ModalDialog
+        isOpen={isModalOpen}
+        title="Id modal"
+        onClose={() => setIsModalOpen(false)}
+        size="lg"
+        hasCloseButton={false}
+      >
+        <ModalDialog.Header>
+          <ModalDialog.Title data-testid="Id-modal">
+            {props.intl.formatMessage(messages['id.verification.privacy.title'])}
+          </ModalDialog.Title>
+        </ModalDialog.Header>
+        <ModalDialog.Body>
+          <div className="p-3">
+            <h6>
+              {props.intl.formatMessage(
+                messages['id.verification.privacy.need.photo.question'],
+                { siteName: getConfig().SITE_NAME },
+              )}
+            </h6>
+            <p>{props.intl.formatMessage(messages['id.verification.privacy.need.photo.answer'])}</p>
+            <h6>
+              {props.intl.formatMessage(
+                messages['id.verification.privacy.do.with.photo.question'],
+                { siteName: getConfig().SITE_NAME },
+              )}
+            </h6>
+            <p>
+              {props.intl.formatMessage(
+                messages['id.verification.privacy.do.with.photo.answer'],
+                { siteName: getConfig().SITE_NAME },
+              )}
+            </p>
+          </div>
+        </ModalDialog.Body>
+        <ModalDialog.Footer className="p-2">
+          <ActionRow>
+            <ModalDialog.CloseButton variant="link">
+              Close
+            </ModalDialog.CloseButton>
+          </ActionRow>
+        </ModalDialog.Footer>
+      </ModalDialog>
+
+    </div>
   );
 };
 

diff --git a/src/id-verification/panels/BasePanel.jsx b/src/id-verification/panels/BasePanel.jsx
@@ -1,6 +1,6 @@
 import React, { useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { Redirect } from 'react-router';
+import { Navigate } from 'react-router-dom';
 import { useVerificationRedirectSlug } from '../routing-utilities';
 
 const BasePanel = ({
@@ -20,7 +20,7 @@ const BasePanel = ({
 
   const redirectSlug = useVerificationRedirectSlug(name);
   if (redirectSlug) {
-    return <Redirect to={redirectSlug} />;
+    return <Navigate replace to={`/id-verification/${redirectSlug}`} />;
   }
 
   return (

diff --git a/src/id-verification/panels/GetNameIdPanel.jsx b/src/id-verification/panels/GetNameIdPanel.jsx
@@ -2,7 +2,7 @@ import React, {
   useContext, useEffect, useRef,
 } from 'react';
 import { Form } from '@edx/paragon';
-import { Link, useHistory } from 'react-router-dom';
+import { Link, useNavigate, useLocation } from 'react-router-dom';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
 import { useNextPanelSlug } from '../routing-utilities';
@@ -12,7 +12,8 @@ import IdVerificationContext from '../IdVerificationContext';
 import messages from '../IdVerification.messages';
 
 const GetNameIdPanel = (props) => {
-  const { push, location } = useHistory();
+  const location = useLocation();
+  const navigate = useNavigate();
   const nameInputRef = useRef();
   const panelSlug = 'get-name-id';
   const nextPanelSlug = useNextPanelSlug(panelSlug);
@@ -33,7 +34,7 @@ const GetNameIdPanel = (props) => {
   const handleSubmit = (e) => {
     e.preventDefault();
     if (idPhotoName) {
-      push(nextPanelSlug);
+      navigate(nextPanelSlug, { replace: true });
     }
   };
 
@@ -79,7 +80,7 @@ const GetNameIdPanel = (props) => {
 
       <div className="action-row">
         <Link
-          to={nextPanelSlug}
+          to={`/id-verification/${nextPanelSlug}`}
           className={`btn btn-primary ${!idPhotoName && 'disabled'}`}
           data-testid="next-button"
           aria-disabled={!idPhotoName}

diff --git a/src/id-verification/panels/IdContextPanel.jsx b/src/id-verification/panels/IdContextPanel.jsx
@@ -41,7 +41,7 @@ const IdContextPanel = (props) => {
       </div>
       <CameraHelp isOpen />
       <div className="action-row">
-        <Link to={nextPanelSlug} className="btn btn-primary" data-testid="next-button">
+        <Link to={`/id-verification/${nextPanelSlug}`} className="btn btn-primary" data-testid="next-button">
           {props.intl.formatMessage(messages['id.verification.next'])}
         </Link>
       </div>

diff --git a/src/id-verification/panels/PortraitPhotoContextPanel.jsx b/src/id-verification/panels/PortraitPhotoContextPanel.jsx
@@ -38,7 +38,7 @@ const PortraitPhotoContextPanel = (props) => {
       </div>
       <CameraHelp isOpen isPortrait />
       <div className="action-row">
-        <Link to={nextPanelSlug} className="btn btn-primary" data-testid="next-button">
+        <Link to={`/id-verification/${nextPanelSlug}`} className="btn btn-primary" data-testid="next-button">
           {props.intl.formatMessage(messages['id.verification.next'])}
         </Link>
       </div>

diff --git a/src/id-verification/panels/RequestCameraAccessPanel.jsx b/src/id-verification/panels/RequestCameraAccessPanel.jsx
@@ -85,7 +85,7 @@ const RequestCameraAccessPanel = (props) => {
             {props.intl.formatMessage(messages['id.verification.camera.access.success'])}
           </p>
           <div className="action-row">
-            <Link to={nextPanelSlug} className="btn btn-primary" data-testid="next-button">
+            <Link to={`/id-verification/${nextPanelSlug}`} className="btn btn-primary" data-testid="next-button">
               {props.intl.formatMessage(messages['id.verification.next'])}
             </Link>
           </div>

diff --git a/src/id-verification/panels/ReviewRequirementsPanel.jsx b/src/id-verification/panels/ReviewRequirementsPanel.jsx
@@ -118,7 +118,7 @@ const ReviewRequirementsPanel = (props) => {
       </p>
 
       <div className="action-row">
-        <Link to={nextPanelSlug} className="btn btn-primary" data-testid="next-button">
+        <Link to={`/id-verification/${nextPanelSlug}`} className="btn btn-primary" data-testid="next-button">
           {props.intl.formatMessage(messages['id.verification.next'])}
         </Link>
       </div>