Merge pull request #22 from Syed-Ali-Abbas-Zaidi/Ali-Abbas/react-router-upgrade

feat: upgrade react router to v6

Author: Ben Warzeski

package-lock.json

@@ -36,7 +36,7 @@
     "@edx/brand": "npm:@edx/[email protected]",
     "@edx/frontend-component-footer": "12.2.1",
     "@edx/frontend-component-header": "4.6.0",
-    "@edx/frontend-platform": "4.6.3",
+    "@edx/frontend-platform": "5.1.0",
     "@edx/paragon": "^20.20.0",
     "@edx/react-unit-test-utils": "1.7.0",
     "@edx/tinymce-language-selector": "1.1.0",
@@ -58,8 +58,8 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-redux": "7.2.9",
-    "react-router": "5.3.4",
-    "react-router-dom": "5.3.4",
+    "react-router": "6.15.0",
+    "react-router-dom": "6.15.0",
     "redux": "4.2.1",
     "redux-devtools-extension": "^2.13.9",
     "redux-logger": "^3.0.6",

package.json

@@ -1,4 +1,4 @@
-import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
+import { Routes, Route } from 'react-router-dom';
 import { ErrorPage } from '@edx/frontend-platform/react';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
@@ -13,25 +13,13 @@ const RouterRoot = () => {
   const { formatMessage } = useIntl();
 
   return (
-    <Router>
-      <Switch>
-        <Route path={routes.peerAssessment}>
-          <PeerAssessmentView />
-        </Route>
-        <Route path={routes.selfAssessment}>
-          <SelfAssessmentView />
-        </Route>
-        <Route path={routes.studentTraining}>
-          <StudentTrainingView />
-        </Route>
-        <Route path={routes.submission}>
-          <SubmissionView />
-        </Route>
-        <Route path={routes.root}>
-          <ErrorPage message={formatMessage(messages.error404Message)} />
-        </Route>
-      </Switch>
-    </Router>
+    <Routes>
+      <Route path={routes.peerAssessment} element={<PeerAssessmentView />} />
+      <Route path={routes.selfAssessment} element={<SelfAssessmentView />} />
+      <Route path={routes.studentTraining} element={<StudentTrainingView />} />
+      <Route path={routes.submission} element={<SubmissionView />} />
+      <Route path={routes.root} element={<ErrorPage message={formatMessage(messages.error404Message)} />} />
+    </Routes>
   );
 };
 

src/App.jsx

@@ -1,5 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
-import { useRouteMatch } from 'react-router-dom';
+import { useMatch } from 'react-router-dom';
 import { camelCaseObject } from '@edx/frontend-platform';
 import { when } from 'jest-when';
 
@@ -12,7 +12,7 @@ import { useORAConfig, usePageData } from './api';
 
 jest.mock('@tanstack/react-query', () => ({ useQuery: jest.fn() }));
 
-jest.mock('react-router-dom', () => ({ useRouteMatch: jest.fn() }));
+jest.mock('react-router-dom', () => ({ useMatch: jest.fn() }));
 
 interface QueryFn { (): string }
 interface QueryArgs { queryKey: string, queryFn: QueryFn }
@@ -52,8 +52,8 @@ describe('lms api hooks', () => {
     });
     it('initializes query with promise pointing to assessment text', async () => {
       const old = window.location;
-      Object.defineProperty(window, "location", {
-        value: new URL(`http://dummy.com/text`),
+      Object.defineProperty(window, 'location', {
+        value: new URL('http://dummy.com/text'),
         writable: true,
       });
       const response = await out.queryFn();
@@ -86,16 +86,16 @@ describe('lms api hooks', () => {
         .mockImplementationOnce(mockUseQuery(data));
     };
 
-    const mockUseRouteMatch = (path) => {
-      when(useRouteMatch)
-        .calledWith()
-        .mockReturnValueOnce({ path });
+    const mockUseMatch = (path) => {
+      when(useMatch)
+        .calledWith(path)
+        .mockReturnValueOnce({ pattern: { path } });
     };
 
     const testUsePageData = usePageData as unknown as MockPageDataUseConfigHook;
     describe('submission', () => {
       beforeEach(() => {
-        mockUseRouteMatch(routes.submission);
+        mockUseMatch(routes.submission);
         mockUseQueryForPageData(fakeData.pageData.shapes.emptySubmission, false);
         out = testUsePageData();
       });
@@ -112,7 +112,7 @@ describe('lms api hooks', () => {
     });
     describe('assessment', () => {
       beforeEach(() => {
-        mockUseRouteMatch(routes.peerAssessment);
+        mockUseMatch(routes.peerAssessment);
         mockUseQueryForPageData(fakeData.pageData.shapes.peerAssessment, true);
         out = testUsePageData();
       });
@@ -128,7 +128,7 @@ describe('lms api hooks', () => {
       });
     });
     it('returns empty object from data if data has not been returned', () => {
-      mockUseRouteMatch(routes.submission);
+      mockUseMatch(routes.submission);
       mockUseQueryForPageData(undefined, false);
       out = testUsePageData();
       expect(out.data).toEqual({});

src/data/services/lms/hooks/api.test.ts

@@ -1,6 +1,6 @@
 import { useQuery } from '@tanstack/react-query';
 
-import { useRouteMatch } from 'react-router-dom';
+import { useMatch } from 'react-router-dom';
 import { camelCaseObject } from '@edx/frontend-platform';
 
 import routes from 'routes';
@@ -24,8 +24,8 @@ export const useORAConfig = (): types.QueryData<types.ORAConfig> => {
 };
 
 export const usePageData = (): types.QueryData<types.PageData> => {
-  const route = useRouteMatch();
-  const isAssessment = route.path === routes.peerAssessment;
+  const route = useMatch(routes.peerAssessment);
+  const isAssessment = !!route && route.pattern.path === routes.peerAssessment;
   const returnData = isAssessment
     ? fakeData.pageData.shapes.peerAssessment
     : fakeData.pageData.shapes.emptySubmission;