feat: upgrade react router to v6 (#519)

## Ticket [React Router Upgrade to v6](openedx/platform-roadmap#276). ## Description This PR upgrades React Router from `v5` to `v6`.
openedx · Oct 20, 2023 · d497b01 · d497b01
1 parent 682c3b6
commit d497b01
Show file tree

Hide file tree

Showing 35 changed files with 7,217 additions and 7,525 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -38,9 +38,9 @@
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
     "@edx/frontend-component-footer": "^12.3.0",
     "@edx/frontend-component-header": "^4.7.0",
-    "@edx/frontend-enterprise-hotjar": "^1.2.1",
+    "@edx/frontend-enterprise-hotjar": "^2.0.0",
     "@edx/frontend-lib-content-components": "1.175.0",
-    "@edx/frontend-platform": "4.6.3",
+    "@edx/frontend-platform": "5.6.1",
     "@edx/paragon": "^20.45.4",
     "@fortawesome/fontawesome-svg-core": "1.2.28",
     "@fortawesome/free-brands-svg-icons": "5.11.2",
@@ -64,8 +64,8 @@
     "react-helmet": "^6.1.0",
     "react-redux": "7.2.9",
     "react-responsive": "9.0.2",
-    "react-router": "5.2.0",
-    "react-router-dom": "5.2.0",
+    "react-router": "6.16.0",
+    "react-router-dom": "6.16.0",
     "react-textarea-autosize": "^8.4.1",
     "react-transition-group": "4.4.1",
     "redux": "4.0.5",

diff --git a/src/CourseAuthoringRoutes.jsx b/src/CourseAuthoringRoutes.jsx
@@ -1,7 +1,6 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { Switch, useRouteMatch } from 'react-router';
-import { PageRoute } from '@edx/frontend-platform/react';
+import { Routes, Route, useParams } from 'react-router-dom';
+import { PageWrap } from '@edx/frontend-platform/react';
 import Placeholder from '@edx/frontend-lib-content-components';
 import CourseAuthoringPage from './CourseAuthoringPage';
 import { PagesAndResources } from './pages-and-resources';
@@ -34,85 +33,79 @@ import CourseImportPage from './import-page/CourseImportPage';
  * can move the Header/Footer rendering to this component and likely pull the course detail loading
  * in as well, and it'd feel a bit better-factored and the roles would feel more clear.
  */
-const CourseAuthoringRoutes = ({ courseId }) => {
-  const { path } = useRouteMatch();
+const CourseAuthoringRoutes = () => {
+  const { courseId } = useParams();
+
   return (
     <CourseAuthoringPage courseId={courseId}>
-      <Switch>
-        <PageRoute path={`${path}/outline`}>
-          {process.env.ENABLE_NEW_COURSE_OUTLINE_PAGE === 'true'
-            && (
-              <Placeholder />
-            )}
-        </PageRoute>
-        <PageRoute path={`${path}/course_info`}>
-          <CourseUpdates courseId={courseId} />
-        </PageRoute>
-        <PageRoute path={`${path}/assets`}>
-          <FilesAndUploads courseId={courseId} />
-        </PageRoute>
-        <PageRoute path={`${path}/videos`}>
-          {process.env.ENABLE_NEW_VIDEO_UPLOAD_PAGE === 'true'
-            && (
-              <Placeholder />
-            )}
-        </PageRoute>
-        <PageRoute path={`${path}/pages-and-resources`}>
-          <PagesAndResources courseId={courseId} />
-        </PageRoute>
-        <PageRoute path={`${path}/proctored-exam-settings`}>
-          <ProctoredExamSettings courseId={courseId} />
-        </PageRoute>
-        <PageRoute path={`${path}/custom-pages`}>
-          <CustomPages courseId={courseId} />
-        </PageRoute>
-        <PageRoute path={`${path}/container/:blockId`}>
-          {process.env.ENABLE_UNIT_PAGE === 'true'
-            && (
-              <Placeholder />
-            )}
-        </PageRoute>
-        <PageRoute path={`${path}/editor/course-videos/:blockId`}>
-          {process.env.ENABLE_NEW_EDITOR_PAGES === 'true'
-            && (
-              <VideoSelectorContainer
-                courseId={courseId}
-              />
-            )}
-        </PageRoute>
-        <PageRoute path={`${path}/editor/:blockType/:blockId?`}>
-          {process.env.ENABLE_NEW_EDITOR_PAGES === 'true'
-            && (
-              <EditorContainer
-                courseId={courseId}
-              />
-            )}
-        </PageRoute>
-        <PageRoute path={`${path}/settings/details`}>
-          <ScheduleAndDetails courseId={courseId} />
-        </PageRoute>
-        <PageRoute path={`${path}/settings/grading`}>
-          <GradingSettings courseId={courseId} />
-        </PageRoute>
-        <PageRoute path={`${path}/course_team`}>
-          <CourseTeam courseId={courseId} />
-        </PageRoute>
-        <PageRoute path={`${path}/settings/advanced`}>
-          <AdvancedSettings courseId={courseId} />
-        </PageRoute>
-        <PageRoute path={`${path}/import`}>
-          <CourseImportPage courseId={courseId} />
-        </PageRoute>
-        <PageRoute path={`${path}/export`}>
-          <CourseExportPage courseId={courseId} />
-        </PageRoute>
-      </Switch>
+      <Routes>
+        <Route
+          path="outline"
+          element={process.env.ENABLE_NEW_COURSE_OUTLINE_PAGE === 'true' ? <PageWrap><Placeholder /></PageWrap> : null}
+        />
+        <Route
+          path="course_info"
+          element={<PageWrap><CourseUpdates courseId={courseId} /></PageWrap>}
+        />
+        <Route
+          path="assets"
+          element={<PageWrap><FilesAndUploads courseId={courseId} /></PageWrap>}
+        />
+        <Route
+          path="videos"
+          element={process.env.ENABLE_NEW_VIDEO_UPLOAD_PAGE === 'true' ? <PageWrap><Placeholder /></PageWrap> : null}
+        />
+        <Route
+          path="pages-and-resources/*"
+          element={<PageWrap><PagesAndResources courseId={courseId} /></PageWrap>}
+        />
+        <Route
+          path="proctored-exam-settings"
+          element={<PageWrap><ProctoredExamSettings courseId={courseId} /></PageWrap>}
+        />
+        <Route
+          path="custom-pages/*"
+          element={<PageWrap><CustomPages courseId={courseId} /></PageWrap>}
+        />
+        <Route
+          path="/container/:blockId"
+          element={process.env.ENABLE_UNIT_PAGE === 'true' ? <PageWrap><Placeholder /></PageWrap> : null}
+        />
+        <Route
+          path="editor/course-videos/:blockId"
+          element={process.env.ENABLE_NEW_EDITOR_PAGES === 'true' ? <PageWrap><VideoSelectorContainer courseId={courseId} /></PageWrap> : null}
+        />
+        <Route
+          path="editor/:blockType/:blockId?"
+          element={process.env.ENABLE_NEW_EDITOR_PAGES === 'true' ? <PageWrap><EditorContainer courseId={courseId} /></PageWrap> : null}
+        />
+        <Route
+          path="settings/details"
+          element={<PageWrap><ScheduleAndDetails courseId={courseId} /></PageWrap>}
+        />
+        <Route
+          path="settings/grading"
+          element={<PageWrap><GradingSettings courseId={courseId} /></PageWrap>}
+        />
+        <Route
+          path="course_team"
+          element={<PageWrap><CourseTeam courseId={courseId} /></PageWrap>}
+        />
+        <Route
+          path="settings/advanced"
+          element={<PageWrap><AdvancedSettings courseId={courseId} /></PageWrap>}
+        />
+        <Route
+          path="import"
+          element={<PageWrap><CourseImportPage courseId={courseId} /></PageWrap>}
+        />
+        <Route
+          path="export"
+          element={<PageWrap><CourseExportPage courseId={courseId} /></PageWrap>}
+        />
+      </Routes>
     </CourseAuthoringPage>
   );
 };
 
-CourseAuthoringRoutes.propTypes = {
-  courseId: PropTypes.string.isRequired,
-};
-
 export default CourseAuthoringRoutes;
diff --git a/src/CourseAuthoringRoutes.test.jsx b/src/CourseAuthoringRoutes.test.jsx
@@ -15,6 +15,13 @@ const customPagesMockText = 'Custom Pages';
 let store;
 const mockComponentFn = jest.fn();
 
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useParams: () => ({
+    courseId,
+  }),
+}));
+
 // Mock the TinyMceWidget from frontend-lib-content-components
 jest.mock('@edx/frontend-lib-content-components', () => ({
   TinyMceWidget: () => <div>Widget</div>,
@@ -25,12 +32,6 @@ jest.mock('@edx/frontend-lib-content-components', () => ({
   })),
 }));
 
-jest.mock('react-router', () => ({
-  ...jest.requireActual('react-router'),
-  useRouteMatch: () => ({
-    path: `/course/${courseId}`,
-  }),
-}));
 jest.mock('./pages-and-resources/PagesAndResources', () => (props) => {
   mockComponentFn(props);
   return pagesAndResourcesMockText;
@@ -67,9 +68,9 @@ describe('<CourseAuthoringRoutes>', () => {
 
   fit('renders the PagesAndResources component when the pages and resources route is active', () => {
     render(
-      <AppProvider store={store}>
-        <MemoryRouter initialEntries={[`/course/${courseId}/pages-and-resources`]}>
-          <CourseAuthoringRoutes courseId={courseId} />
+      <AppProvider store={store} wrapWithRouter={false}>
+        <MemoryRouter initialEntries={['/pages-and-resources']}>
+          <CourseAuthoringRoutes />
         </MemoryRouter>
       </AppProvider>,
     );
@@ -85,9 +86,9 @@ describe('<CourseAuthoringRoutes>', () => {
 
   it('renders the ProctoredExamSettings component when the proctored exam settings route is active', () => {
     render(
-      <AppProvider store={store}>
-        <MemoryRouter initialEntries={[`/course/${courseId}/proctored-exam-settings`]}>
-          <CourseAuthoringRoutes courseId={courseId} />
+      <AppProvider store={store} wrapWithRouter={false}>
+        <MemoryRouter initialEntries={['/proctored-exam-settings']}>
+          <CourseAuthoringRoutes />
         </MemoryRouter>
       </AppProvider>,
     );
@@ -103,9 +104,9 @@ describe('<CourseAuthoringRoutes>', () => {
 
   it('renders the EditorContainer component when the course editor route is active', () => {
     render(
-      <AppProvider store={store}>
-        <MemoryRouter initialEntries={[`/course/${courseId}/editor/video/block-id`]}>
-          <CourseAuthoringRoutes courseId={courseId} />
+      <AppProvider store={store} wrapWithRouter={false}>
+        <MemoryRouter initialEntries={['/editor/video/block-id']}>
+          <CourseAuthoringRoutes />
         </MemoryRouter>
       </AppProvider>,
     );
@@ -121,9 +122,9 @@ describe('<CourseAuthoringRoutes>', () => {
 
   it('renders the VideoSelectorContainer component when the course videos route is active', () => {
     render(
-      <AppProvider store={store}>
-        <MemoryRouter initialEntries={[`/course/${courseId}/editor/course-videos/block-id`]}>
-          <CourseAuthoringRoutes courseId={courseId} />
+      <AppProvider store={store} wrapWithRouter={false}>
+        <MemoryRouter initialEntries={['/editor/course-videos/block-id']}>
+          <CourseAuthoringRoutes />
         </MemoryRouter>
       </AppProvider>,
     );

diff --git a/src/course-rerun/CourseRerun.test.jsx b/src/course-rerun/CourseRerun.test.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { useSelector } from 'react-redux';
 import { MemoryRouter } from 'react-router-dom';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
-import { history, initializeMockApp } from '@edx/frontend-platform';
+import { initializeMockApp } from '@edx/frontend-platform';
 import { IntlProvider, injectIntl } from '@edx/frontend-platform/i18n';
 import { AppProvider } from '@edx/frontend-platform/react';
 import {
@@ -35,7 +35,7 @@ jest.mock('react-router-dom', () => ({
 
 const RootWrapper = () => (
   <MemoryRouter>
-    <AppProvider store={store}>
+    <AppProvider store={store} wrapWithRouter={false}>
       <IntlProvider locale="en">
         <CourseRerun intl={injectIntl} />
       </IntlProvider>
@@ -71,7 +71,7 @@ describe('<CourseRerun />', () => {
 
     fireEvent.click(cancelButton);
     waitFor(() => {
-      expect(history.location.pathname).toBe('/home');
+      expect(window.location.pathname).toBe('/home');
     });
   });
 

diff --git a/src/course-rerun/hooks.jsx b/src/course-rerun/hooks.jsx
@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { history } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
+import { useNavigate } from 'react-router-dom';
 
 import { RequestStatus } from '../data/constants';
 import { updateSavingStatus } from '../generic/data/slice';
@@ -17,6 +17,7 @@ import { fetchStudioHomeData } from '../studio-home/data/thunks';
 const useCourseRerun = (courseId) => {
   const intl = useIntl();
   const dispatch = useDispatch();
+  const navigate = useNavigate();
   const savingStatus = useSelector(getSavingStatus);
   const courseData = useSelector(getCourseData);
   const courseRerunData = useSelector(getCourseRerunData);
@@ -47,7 +48,7 @@ const useCourseRerun = (courseId) => {
       dispatch(updateSavingStatus({ status: '' }));
       const { url } = redirectUrlObj;
       if (url) {
-        history.push('/home');
+        navigate('/home');
       }
     }
   }, [savingStatus]);

diff --git a/src/course-rerun/index.jsx b/src/course-rerun/index.jsx
@@ -1,15 +1,14 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
-import PropTypes from 'prop-types';
 import {
   Container,
   Layout,
   Stack,
   ActionRow,
   Button,
 } from '@edx/paragon';
-import { history } from '@edx/frontend-platform';
 import { StudioFooter } from '@edx/frontend-component-footer';
+import { useNavigate, useParams } from 'react-router-dom';
 
 import Header from '../header';
 import Loading from '../generic/Loading';
@@ -21,7 +20,9 @@ import CourseRerunSideBar from './course-rerun-sidebar';
 import messages from './messages';
 import { useCourseRerun } from './hooks';
 
-const CourseRerun = ({ courseId }) => {
+const CourseRerun = () => {
+  const { courseId } = useParams();
+  const navigate = useNavigate();
   const {
     intl,
     displayName,
@@ -36,7 +37,7 @@ const CourseRerun = ({ courseId }) => {
   }
 
   const handleRerunCourseCancel = () => {
-    history.push('/home');
+    navigate('/home');
   };
 
   return (
@@ -92,8 +93,4 @@ const CourseRerun = ({ courseId }) => {
   );
 };
 
-CourseRerun.propTypes = {
-  courseId: PropTypes.string.isRequired,
-};
-
 export default CourseRerun;
diff --git a/src/custom-pages/CustomPageCard.jsx b/src/custom-pages/CustomPageCard.jsx
@@ -1,6 +1,5 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
-import { history } from '@edx/frontend-platform';
 import { intlShape, injectIntl } from '@edx/frontend-platform/i18n';
 import {
   ActionRow,
@@ -18,6 +17,7 @@ import {
   Visibility,
   VisibilityOff,
 } from '@edx/paragon/icons';
+import { useNavigate } from 'react-router-dom';
 import { deleteSingleCustomPage, updateCustomPageVisibility } from './data/thunks';
 import messages from './messages';
 import { CustomPagesContext } from './CustomPagesProvider';
@@ -32,6 +32,8 @@ const CustomPageCard = ({
 }) => {
   const [isDeleteConfirmationOpen, openDeleteConfirmation, closeDeleteConfirmation] = useToggle(false);
   const { path: customPagesPath } = useContext(CustomPagesContext);
+  const navigate = useNavigate();
+
   const handleDelete = () => {
     dispatch(deleteSingleCustomPage({
       blockId: page.id,
@@ -47,7 +49,7 @@ const CustomPageCard = ({
   };
   const handleEditOpen = () => {
     setCurrentPage(page.id);
-    history.push(`${customPagesPath}/editor`);
+    navigate(`${customPagesPath}/editor`);
   };
 
   const deletePageStateProps = {