refactor: removed remaining router v5 code

src/App.test.jsx

@@ -17,7 +17,6 @@ import Head from './head/Head';
 jest.mock('react-router-dom', () => ({
   BrowserRouter: () => 'BrowserRouter',
   Route: () => 'Route',
-  Switch: () => 'Switch',
 }));
 jest.mock('@edx/frontend-platform/react', () => ({
   AppProvider: () => 'AppProvider',

src/containers/GradebookPage/index.jsx

@@ -14,7 +14,7 @@ import GradesView from 'components/GradesView';
 import GradebookFilters from 'components/GradebookFilters';
 import BulkManagementHistoryView from 'components/BulkManagementHistoryView';
 
-import withParams from '../../utils/hoc';
+import { withParams, withNavigate, withLocation } from '../../utils/hoc';
 
 /**
  * <GradebookPage />
@@ -34,6 +34,7 @@ export class GradebookPage extends React.Component {
   }
 
   updateQueryParams(queryParams) {
+    const { pathname } = this.props.location;
     const parsed = queryString.parse(this.props.location.search);
     Object.keys(queryParams).forEach((key) => {
       if (queryParams[key]) {
@@ -42,7 +43,7 @@ export class GradebookPage extends React.Component {
         delete parsed[key];
       }
     });
-    this.props.history.push(`?${queryString.stringify(parsed)}`);
+    this.props.navigate({ pathname, search: `?${queryString.stringify(parsed)}` });
   }
 
   render() {
@@ -62,13 +63,11 @@ export class GradebookPage extends React.Component {
   }
 }
 GradebookPage.defaultProps = {
-  location: { search: '' },
+  location: { pathname: '/', search: '' },
 };
 GradebookPage.propTypes = {
-  history: PropTypes.shape({
-    push: PropTypes.func,
-  }).isRequired,
-  location: PropTypes.shape({ search: PropTypes.string }),
+  navigate: PropTypes.func.isRequired,
+  location: PropTypes.shape({ pathname: PropTypes.string, search: PropTypes.string }),
   courseId: PropTypes.string.isRequired,
   // redux
   activeView: PropTypes.string.isRequired,
@@ -83,4 +82,4 @@ export const mapDispatchToProps = {
   initializeApp: thunkActions.app.initialize,
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(withParams(GradebookPage));
+export default connect(mapStateToProps, mapDispatchToProps)(withParams(withNavigate(withLocation(GradebookPage))));

src/containers/GradebookPage/test.jsx

@@ -50,14 +50,15 @@ describe('GradebookPage', () => {
     let el;
     const props = {
       location: {
+        pathname: '/',
         search: 'searchString',
       },
       courseId,
       activeView: views.grades,
     };
     beforeEach(() => {
       props.initializeApp = jest.fn();
-      props.history = { push: jest.fn() };
+      props.navigate = jest.fn();
     });
     test('snapshot - shows BulkManagementHistoryView if activeView === views.bulkManagementHistory', () => {
       el = shallow(<GradebookPage {...props} activeView={views.bulkManagementHistory} />);
@@ -130,7 +131,7 @@ describe('GradebookPage', () => {
           const val2 = 'VALTWO!!';
           const args = { [newKey]: val1, [props.location.search]: val2 };
           el.instance().updateQueryParams(args);
-          expect(props.history.push).toHaveBeenCalledWith(`?${queryString.stringify(args)}`);
+          expect(props.navigate).toHaveBeenCalledWith({ pathname: '/', search: `?${queryString.stringify(args)}` });
         });
         it('clears values for non-truthy values', () => {
           queryString.parse.mockImplementation(key => ({ [key]: key }));
@@ -139,8 +140,8 @@ describe('GradebookPage', () => {
           const val2 = false;
           const args = { [newKey]: val1, [props.location.search]: val2 };
           el.instance().updateQueryParams(args);
-          expect(props.history.push).toHaveBeenCalledWith(
-            `?${queryString.stringify({ [newKey]: val1 })}`,
+          expect(props.navigate).toHaveBeenCalledWith(
+            { pathname: '/', search: `?${queryString.stringify({ [newKey]: val1 })}` },
           );
         });
       });

src/utils/hoc.jsx

@@ -1,10 +1,24 @@
 import React from 'react';
 
-import { useParams } from 'react-router-dom';
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
 
-const withParams = WrappedComponent => {
+export const withParams = WrappedComponent => {
   const WithParamsComponent = props => <WrappedComponent {...useParams()} {...props} />;
   return WithParamsComponent;
 };
 
-export default withParams;
+export const withNavigate = WrappedComponent => {
+  const WithNavigateComponent = props => {
+    const navigate = useNavigate();
+    return <WrappedComponent navigate={navigate} {...props} />;
+  };
+  return WithNavigateComponent;
+};
+
+export const withLocation = WrappedComponent => {
+  const WithLocationComponent = props => {
+    const location = useLocation();
+    return <WrappedComponent location={location} {...props} />;
+  };
+  return WithLocationComponent;
+};