feat!: upgrade react router to v6 (#344)

BREAKING CHANGE: Upgrade react-router-dom from v5 to v6. Upgrade frontend-platform from v4 to v5.
openedx · Aug 15, 2023 · 54f6340 · 54f6340
1 parent bb8ce43
commit 54f6340
Show file tree

Hide file tree

Showing 16 changed files with 188 additions and 138 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/catalog-search/package.json b/packages/catalog-search/package.json
@@ -45,7 +45,7 @@
   "devDependencies": {
     "@edx/browserslist-config": "1.1.0",
     "@edx/frontend-build": "12.7.0",
-    "@edx/frontend-platform": "4.6.0",
+    "@edx/frontend-platform": "5.0.0",
     "@edx/paragon": "20.45.0",
     "@testing-library/jest-dom": "5.11.6",
     "@testing-library/react": "12.1.4",
@@ -54,15 +54,15 @@
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-instantsearch-dom": "6.8.3",
-    "react-router-dom": "5.2.0",
+    "react-router-dom": "6.14.2",
     "react-test-renderer": "17.0.2"
   },
   "peerDependencies": {
-    "@edx/frontend-platform": "^4.0.1",
+    "@edx/frontend-platform": "^5.0.0",
     "@edx/paragon": "^19.15.0 || ^20.0.0",
     "react": "^16.12.0 || ^17.0.0",
     "react-dom": "^16.12.0 || ^17.0.0",
     "react-instantsearch-dom": "^6.8.3",
-    "react-router-dom": "^5.2.0"
+    "react-router-dom": "^6.0.0"
   }
 }
diff --git a/packages/catalog-search/src/SearchContext.jsx b/packages/catalog-search/src/SearchContext.jsx
@@ -3,7 +3,7 @@ import React, {
   createContext, useReducer, useMemo, useEffect,
 } from 'react';
 import PropTypes from 'prop-types';
-import { useLocation, useHistory } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { useIsFirstRender } from '@edx/frontend-enterprise-utils';
 
 import {
@@ -43,8 +43,8 @@ const SearchData = ({ children, searchFacetFilters, trackingName }) => {
     {},
   );
 
-  const { search } = useLocation();
-  const history = useHistory();
+  const { pathname, search } = useLocation();
+  const navigate = useNavigate();
 
   /**
    * Applies initial URL query params on page load to the refinements
@@ -70,7 +70,7 @@ const SearchData = ({ children, searchFacetFilters, trackingName }) => {
   useEffect(() => {
     if (!isFirstRender) {
       const newQueryString = stringifyRefinements(refinements);
-      history.push({ search: newQueryString });
+      navigate({ pathname, search: newQueryString });
     }
   }, [JSON.stringify(refinements)]);
 

diff --git a/packages/catalog-search/src/SearchSuggestionItem.jsx b/packages/catalog-search/src/SearchSuggestionItem.jsx
@@ -14,6 +14,7 @@ const SearchSuggestionItem = ({
       suggestionItemHandler(hit);
     }
   };
+
   return (
     <Link to={url} key={hit.title} className="suggestion-item" onClick={handleLinkDisable}>
       <div>

diff --git a/packages/catalog-search/src/tests/CurrentRefinements.test.jsx b/packages/catalog-search/src/tests/CurrentRefinements.test.jsx
@@ -12,6 +12,17 @@ import {
 } from '../data/tests/constants';
 import SearchData from '../SearchContext';
 
+const mockedNavigator = jest.fn();
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: () => mockedNavigator,
+  useLocation: () => ({
+    pathname: '/',
+    search: 'subjects=Computer Science&subjects=Communication',
+  }),
+}));
+
 describe('<CurrentRefinements />', () => {
   const items = [
     {
@@ -60,19 +71,19 @@ describe('<CurrentRefinements />', () => {
   });
 
   test('supports removing an active refinement from the url by clicking on it', async () => {
-    const { history } = renderWithRouter(
+    renderWithRouter(
       <SearchData>
         <CurrentRefinementsBase items={items} />
       </SearchData>,
-      {
-        route: `/?subjects=${SUBJECTS.COMPUTER_SCIENCE}&subjects=${SUBJECTS.COMMUNICATION}`,
-      },
     );
 
     // click a specific refinement to remove it
     fireEvent.click(screen.queryByText(SUBJECTS.COMMUNICATION));
 
     // assert the clicked refinement in the url is removed but others stay put
-    expect(history.location.search).toEqual('?subjects=Computer%20Science');
+    expect(mockedNavigator.mock.calls[mockedNavigator.mock.calls.length - 1][0]).toStrictEqual({
+      pathname: '/',
+      search: 'subjects=Computer%20Science',
+    });
   });
 });