Upgrading React Router to 6.x.

Author: krulis-martin

package.json

@@ -79,8 +79,8 @@
     "react-intl": "6.4.4",
     "react-motion": "^0.5.2",
     "react-redux": "^8.1.2",
-    "react-router": "^5.3.4",
-    "react-router-dom": "^5.3.4",
+    "react-router": "^6.14.2",
+    "react-router-dom": "^6.14.2",
     "react-syntax-highlighter": "^15.5.0",
     "react-toggle": "4.1.3",
     "redux": "^4.2.1",

src/components/Assignments/Assignment/AssignmentsTable/AssignmentsTable.js

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { Table, Modal } from 'react-bootstrap';
 import { FormattedMessage, injectIntl } from 'react-intl';
-import { withRouter } from 'react-router';
 import { defaultMemoize } from 'reselect';
 import moment from 'moment';
 
@@ -18,6 +17,8 @@ import { UserUIDataContext } from '../../../../helpers/contexts';
 import { EMPTY_LIST, EMPTY_OBJ, EMPTY_ARRAY } from '../../../../helpers/common';
 import { prepareInitialValues, transformSubmittedData } from '../../../forms/EditAssignmentForm';
 
+import withRouter, { withRouterProps } from '../../../../helpers/withRouter';
+
 const fetchAssignmentStatus = (statuses, assignmentId) => {
   const assignStatus =
     statuses && Array.isArray(statuses) ? statuses.find(assignStatus => assignStatus.id === assignmentId) : null;
@@ -182,7 +183,7 @@ class AssignmentsTable extends Component {
       editAssignment = null,
       deleteAssignment = null,
       intl: { locale },
-      history: { push },
+      navigate,
     } = this.props;
     const someAssignmentsAreLoading = assignments.some(isLoading);
     const assignmentsPreprocessedAll = assignments
@@ -297,7 +298,7 @@ class AssignmentsTable extends Component {
                       discussionOpen={() => this.openDialog(assignment)}
                       setSelected={multiActions ? this.selectAssignmentClickHandler(assignmentsPreprocessedAll) : null}
                       selected={Boolean(this.state.selectedAssignments[assignment.id])}
-                      doubleClickPush={openOnDoubleclick ? push : null}
+                      doubleClickPush={openOnDoubleclick ? navigate : null}
                     />
                   ))}
               </tbody>
@@ -479,9 +480,7 @@ AssignmentsTable.propTypes = {
   editAssignment: PropTypes.func,
   deleteAssignment: PropTypes.func,
   intl: PropTypes.object.isRequired,
-  history: PropTypes.shape({
-    push: PropTypes.func.isRequired,
-  }),
+  navigate: withRouterProps.navigate,
 };
 
 export default withRouter(injectIntl(AssignmentsTable));

src/components/Assignments/ShadowAssignment/ShadowAssignmentsTable/ShadowAssignmentsTable.js

@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { Table } from 'react-bootstrap';
-import { withRouter } from 'react-router';
 import { FormattedMessage, injectIntl } from 'react-intl';
 
 import { isReady, isLoading, getJsData } from '../../../../redux/helpers/resourceManager';
@@ -11,14 +10,15 @@ import { compareShadowAssignments } from '../../../helpers/assignments';
 import { LoadingIcon } from '../../../icons';
 import { UserUIDataContext } from '../../../../helpers/contexts';
 import { EMPTY_LIST, EMPTY_OBJ } from '../../../../helpers/common';
+import withRouter, { withRouterProps } from '../../../../helpers/withRouter';
 
 const ShadowAssignmentsTable = ({
   shadowAssignments = EMPTY_LIST,
   userId,
   stats = EMPTY_OBJ,
   isAdmin = false,
   intl: { locale },
-  history: { push },
+  navigate,
 }) => (
   <UserUIDataContext.Consumer>
     {({ openOnDoubleclick = false }) => (
@@ -93,7 +93,7 @@ const ShadowAssignmentsTable = ({
                   Object.keys(stats).length !== 0 ? stats.assignments.find(item => item.id === assignment.id) : null
                 }
                 isAdmin={isAdmin}
-                doubleClickPush={openOnDoubleclick ? push : null}
+                doubleClickPush={openOnDoubleclick ? navigate : null}
               />
             ))}
         </tbody>
@@ -108,9 +108,7 @@ ShadowAssignmentsTable.propTypes = {
   stats: PropTypes.object,
   isAdmin: PropTypes.bool,
   intl: PropTypes.shape({ locale: PropTypes.string.isRequired }).isRequired,
-  history: PropTypes.shape({
-    push: PropTypes.func.isRequired,
-  }),
+  navigate: withRouterProps.navigate,
 };
 
 export default withRouter(injectIntl(ShadowAssignmentsTable));

src/components/Assignments/SolutionsTable/SolutionsTable.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { FormattedMessage } from 'react-intl';
 import { Table } from 'react-bootstrap';
-import { withRouter } from 'react-router';
+import { useNavigate } from 'react-router-dom';
 import { defaultMemoize } from 'reselect';
 
 import NoSolutionYetTableRow from './NoSolutionYetTableRow';
@@ -29,8 +29,8 @@ const SolutionsTable = ({
   assignmentSolversLoading = false,
   showActionButtons = true,
   onSelect = null,
-  history: { push },
 }) => {
+  const navigate = useNavigate();
   const highlightsIndex = createHighlightsIndex(highlights);
 
   return (
@@ -141,7 +141,7 @@ const SolutionsTable = ({
                   highlighted={highlightsIndex.has(id)}
                   showActionButtons={showActionButtons}
                   onSelect={onSelect}
-                  doubleclickAction={openOnDoubleclick ? push : null}
+                  doubleclickAction={openOnDoubleclick ? navigate : null}
                   {...data}
                 />
               );
@@ -166,9 +166,6 @@ SolutionsTable.propTypes = {
   assignmentSolversLoading: PropTypes.bool,
   showActionButtons: PropTypes.bool,
   onSelect: PropTypes.func,
-  history: PropTypes.shape({
-    push: PropTypes.func.isRequired,
-  }),
 };
 
-export default withRouter(SolutionsTable);
+export default SolutionsTable;

src/components/Exercises/ExercisesList/ExercisesList.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Table } from 'react-bootstrap';
 import { FormattedMessage } from 'react-intl';
-import { withRouter } from 'react-router';
+import { useNavigate } from 'react-router-dom';
 
 import ExercisesListItem from '../ExercisesListItem';
 import { LoadingIcon } from '../../icons';
@@ -15,46 +15,51 @@ const ExercisesList = ({
   showAssignButton = false,
   assignExercise = null,
   reload,
-  history: { push },
-}) => (
-  <UserUIDataContext.Consumer>
-    {({ openOnDoubleclick = false }) => (
-      <Table hover>
-        {Boolean(heading) && <thead>{heading}</thead>}
-        <tbody>
-          {exercises.map((exercise, idx) =>
-            exercise ? (
-              <ExercisesListItem
-                {...exercise}
-                showGroups={showGroups}
-                showAssignButton={showAssignButton}
-                assignExercise={assignExercise}
-                key={exercise ? exercise.id : idx}
-                reload={reload}
-                doubleClickPush={openOnDoubleclick ? push : null}
-              />
-            ) : (
-              <tr key={idx}>
-                <td colSpan={showGroups ? 8 : 7}>
-                  <LoadingIcon gapRight />
-                  <FormattedMessage id="generic.loading" defaultMessage="Loading..." />
+}) => {
+  const navigate = useNavigate();
+  return (
+    <UserUIDataContext.Consumer>
+      {({ openOnDoubleclick = false }) => (
+        <Table hover>
+          {Boolean(heading) && <thead>{heading}</thead>}
+          <tbody>
+            {exercises.map((exercise, idx) =>
+              exercise ? (
+                <ExercisesListItem
+                  {...exercise}
+                  showGroups={showGroups}
+                  showAssignButton={showAssignButton}
+                  assignExercise={assignExercise}
+                  key={exercise ? exercise.id : idx}
+                  reload={reload}
+                  doubleClickPush={openOnDoubleclick ? navigate : null}
+                />
+              ) : (
+                <tr key={idx}>
+                  <td colSpan={showGroups ? 8 : 7}>
+                    <LoadingIcon gapRight />
+                    <FormattedMessage id="generic.loading" defaultMessage="Loading..." />
+                  </td>
+                </tr>
+              )
+            )}
+
+            {exercises.length === 0 && (
+              <tr>
+                <td className="text-center text-muted" colSpan={showGroups ? 8 : 7}>
+                  <FormattedMessage
+                    id="app.exercisesList.empty"
+                    defaultMessage="No exercises match selected filters."
+                  />
                 </td>
               </tr>
-            )
-          )}
-
-          {exercises.length === 0 && (
-            <tr>
-              <td className="text-center text-muted" colSpan={showGroups ? 8 : 7}>
-                <FormattedMessage id="app.exercisesList.empty" defaultMessage="No exercises match selected filters." />
-              </td>
-            </tr>
-          )}
-        </tbody>
-      </Table>
-    )}
-  </UserUIDataContext.Consumer>
-);
+            )}
+          </tbody>
+        </Table>
+      )}
+    </UserUIDataContext.Consumer>
+  );
+};
 
 ExercisesList.propTypes = {
   heading: PropTypes.any,
@@ -63,9 +68,6 @@ ExercisesList.propTypes = {
   showAssignButton: PropTypes.bool,
   assignExercise: PropTypes.func,
   reload: PropTypes.func,
-  history: PropTypes.shape({
-    push: PropTypes.func.isRequired,
-  }),
 };
 
-export default withRouter(ExercisesList);
+export default ExercisesList;

src/components/Groups/ResultsTable/ResultsTable.js

@@ -143,9 +143,9 @@ class ResultsTable extends Component {
     showOnlyMe: false,
   };
 
-  componentDidMount = () => {
+  componentDidMount() {
     this.setState({ showOnlyMe: storageGetItem(localStorageShowOnlyMeKey, false) });
-  };
+  }
 
   toggleShowOnlyMe = () => {
     const showOnlyMe = !this.state.showOnlyMe;

src/components/Solutions/SolutionActions/SolutionActions.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
-import { withRouter } from 'react-router';
+import { useLocation, useNavigate } from 'react-router-dom';
 
 import withLinks from '../../../helpers/withLinks';
 import { safeGet } from '../../../helpers/common';
@@ -112,10 +112,11 @@ const SolutionActions = ({
   setReviewState = null,
   deleteReview = null,
   setPoints = null,
-  history: { push },
-  location: { pathname },
   links: { SOLUTION_SOURCE_CODES_URI_FACTORY },
 }) => {
+  const { pathname } = useLocation();
+  const navigate = useNavigate();
+
   const review = solution && solution.review;
   const assignmentId = solution && solution.assignmentId;
   const accepted = solution && solution.accepted;
@@ -154,12 +155,12 @@ const SolutionActions = ({
     open:
       openReview &&
       (!review || !review.startedAt) &&
-      (isOnReviewPage ? openReview : () => openReview().then(() => push(reviewPageUri))),
+      (isOnReviewPage ? openReview : () => openReview().then(() => navigate(reviewPageUri))),
     reopen:
       openReview &&
       review &&
       review.closedAt &&
-      (isOnReviewPage ? openReview : () => openReview().then(() => push(reviewPageUri))),
+      (isOnReviewPage ? openReview : () => openReview().then(() => navigate(reviewPageUri))),
     openClose: setReviewState && (!review || !review.startedAt) && showAllButtons && (() => setReviewState(true)),
     close: setReviewState && review && review.startedAt && !review.closedAt && (() => setReviewState(true)),
     delete: showAllButtons && review && review.startedAt && deleteReview,
@@ -224,13 +225,7 @@ SolutionActions.propTypes = {
   setReviewState: PropTypes.func,
   deleteReview: PropTypes.func,
   setPoints: PropTypes.func,
-  history: PropTypes.shape({
-    push: PropTypes.func.isRequired,
-  }),
-  location: PropTypes.shape({
-    pathname: PropTypes.string.isRequired,
-  }).isRequired,
   links: PropTypes.object.isRequired,
 };
 
-export default withLinks(withRouter(SolutionActions));
+export default withLinks(SolutionActions);