From abf4bfccfee53396f211d0d5aea6e94885ac5a8b Mon Sep 17 00:00:00 2001
From: Syed Ali Abbas Zaidi <syed.ali.abbas@arbisoft.com>
Date: Sun, 20 Aug 2023 16:24:00 +0500
Subject: [PATCH] refactor: removed remaining router v5 code

---
 src/App.test.jsx                       |  1 -
 src/containers/GradebookPage/index.jsx | 15 +++++++--------
 src/containers/GradebookPage/test.jsx  |  9 +++++----
 src/utils/hoc.jsx                      | 20 +++++++++++++++++---
 4 files changed, 29 insertions(+), 16 deletions(-)

diff --git a/src/App.test.jsx b/src/App.test.jsx
index 9bb5f682..4ed87af1 100644
--- a/src/App.test.jsx
+++ b/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',
diff --git a/src/containers/GradebookPage/index.jsx b/src/containers/GradebookPage/index.jsx
index 4b94703c..d5db5006 100644
--- a/src/containers/GradebookPage/index.jsx
+++ b/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))));
diff --git a/src/containers/GradebookPage/test.jsx b/src/containers/GradebookPage/test.jsx
index a79fad69..78728fab 100644
--- a/src/containers/GradebookPage/test.jsx
+++ b/src/containers/GradebookPage/test.jsx
@@ -50,6 +50,7 @@ describe('GradebookPage', () => {
     let el;
     const props = {
       location: {
+        pathname: '/',
         search: 'searchString',
       },
       courseId,
@@ -57,7 +58,7 @@ describe('GradebookPage', () => {
     };
     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 })}` },
           );
         });
       });
diff --git a/src/utils/hoc.jsx b/src/utils/hoc.jsx
index 41563546..e5492306 100644
--- a/src/utils/hoc.jsx
+++ b/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;
+};