feat: upgrade react router to v6 (#542)

* feat: upgrade react router to v6

* fix: routing issues

* fix: category route should redirect to all posts

* fix: path error on routes

package.json

@@ -36,7 +36,7 @@
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
     "@edx/frontend-component-footer": "12.6.0",
     "@edx/frontend-component-header": "4.10.1",
-    "@edx/frontend-platform": "4.6.3",
+    "@edx/frontend-platform": "5.6.1",
     "@edx/paragon": "20.46.3",
     "@reduxjs/toolkit": "1.8.0",
     "@tinymce/tinymce-react": "3.13.1",
@@ -51,8 +51,8 @@
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-redux": "7.2.9",
-    "react-router": "5.2.1",
-    "react-router-dom": "5.3.0",
+    "react-router": "6.18.0",
+    "react-router-dom": "6.18.0",
     "redux": "4.2.1",
     "regenerator-runtime": "0.14.0",
     "timeago.js": "4.0.2",

src/components/TinyMCEEditor.jsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useState } from 'react';
 
 import { Editor } from '@tinymce/tinymce-react';
-import { useLocation, useParams } from 'react-router';
+import { useLocation, useParams } from 'react-router-dom';
 // TinyMCE so the global var exists
 // eslint-disable-next-line no-unused-vars,import/no-extraneous-dependencies
 import tinymce from 'tinymce/tinymce';

src/data/constants.js

@@ -147,18 +147,17 @@ export const Routes = {
     PATH: BASE_PATH,
   },
   LEARNERS: {
-    PATH: `${BASE_PATH}/learners`,
-    POSTS: `${BASE_PATH}/learners/:learnerUsername/posts(/:postId)?`,
+    PATH: `${BASE_PATH}/learners/:learnerUsername?`,
+    POSTS: `${BASE_PATH}/learners/:learnerUsername/posts/:postId?`,
+    POSTS_EDIT: `${BASE_PATH}/learners/:learnerUsername/posts/:postId/edit`,
   },
   POSTS: {
     PATH: `${BASE_PATH}/topics/:topicId`,
-    MY_POSTS: `${BASE_PATH}/my-posts(/:postId)?`,
-    ALL_POSTS: `${BASE_PATH}/posts(/:postId)?`,
-    NEW_POST: [
-      `${BASE_PATH}/topics/:topicId/posts/:postId`,
-      `${BASE_PATH}/topics/:topicId`,
-      `${BASE_PATH}`,
-    ],
+    MY_POSTS: `${BASE_PATH}/my-posts/:postId?`,
+    ALL_POSTS: `${BASE_PATH}/posts/:postId?`,
+    EDIT_MY_POSTS: `${BASE_PATH}/my-posts/:postId/edit`,
+    EDIT_ALL_POSTS: `${BASE_PATH}/posts/:postId/edit`,
+    NEW_POST: `${BASE_PATH}/*`,
     EDIT_POST: [
       `${BASE_PATH}/category/:category/posts/:postId/edit`,
       `${BASE_PATH}/topics/:topicId/posts/:postId/edit`,
@@ -169,19 +168,19 @@ export const Routes = {
   },
   COMMENTS: {
     PATH: [
-      `${BASE_PATH}/category/:category/posts/:postId`,
-      `${BASE_PATH}/topics/:topicId/posts/:postId`,
+      `${BASE_PATH}/category/:category/posts/:postId?`,
+      `${BASE_PATH}/topics/:topicId/posts/:postId?`,
       `${BASE_PATH}/posts/:postId`,
       `${BASE_PATH}/my-posts/:postId`,
-      `${BASE_PATH}/learners/:learnerUsername/posts/:postId`,
+      `${BASE_PATH}/learners/:learnerUsername/posts/:postId?`,
     ],
-    PAGE: `${BASE_PATH}/:page`,
+    PAGE: `${BASE_PATH}/:page/*`,
     PAGES: {
-      category: `${BASE_PATH}/category/:category/posts/:postId`,
-      topics: `${BASE_PATH}/topics/:topicId/posts/:postId`,
+      category: `${BASE_PATH}/category/:category/posts/:postId?`,
+      topics: `${BASE_PATH}/topics/:topicId/posts/:postId?`,
       posts: `${BASE_PATH}/posts/:postId`,
       'my-posts': `${BASE_PATH}/my-posts/:postId`,
-      learners: `${BASE_PATH}/learners/:learnerUsername/posts/:postId`,
+      learners: `${BASE_PATH}/learners/:learnerUsername/posts/:postId?`,
     },
   },
   TOPICS: {
@@ -192,9 +191,10 @@ export const Routes = {
     ],
     ALL: `${BASE_PATH}/topics`,
     CATEGORY: `${BASE_PATH}/category/:category`,
-    CATEGORY_POST: `${BASE_PATH}/category/:category/posts/:postId`,
+    CATEGORY_POST: `${BASE_PATH}/category/:category/posts/:postId?`,
+    CATEGORY_POST_EDIT: `${BASE_PATH}/category/:category/posts/:postId/edit`,
     TOPIC: `${BASE_PATH}/topics/:topicId`,
-    TOPIC_POST: `${BASE_PATH}/topics/:topicId/posts/:postId`,
+    TOPIC_POST: `${BASE_PATH}/topics/:topicId/posts/:postId?`,
     TOPIC_POST_EDIT: `${BASE_PATH}/topics/:topicId/posts/:postId/edit`,
   },
 };
@@ -208,11 +208,12 @@ export const PostsPages = {
 };
 
 export const ALL_ROUTES = []
-  .concat([Routes.TOPICS.CATEGORY_POST, Routes.TOPICS.CATEGORY])
+  .concat([Routes.TOPICS.CATEGORY_POST, `${Routes.TOPICS.CATEGORY}?`])
   .concat(Routes.COMMENTS.PATH)
   .concat(Routes.TOPICS.PATH)
+  .concat(Routes.POSTS.EDIT_POST)
   .concat([Routes.POSTS.ALL_POSTS, Routes.POSTS.MY_POSTS])
   .concat([Routes.LEARNERS.POSTS, Routes.LEARNERS.PATH])
-  .concat([Routes.DISCUSSIONS.PATH]);
+  .concat([`${Routes.DISCUSSIONS.PATH}/*`]);
 
 export const MAX_UPLOAD_FILE_SIZE = 1024;

src/discussions/common/AuthorLabel.jsx

@@ -2,8 +2,7 @@ import React, { useContext, useMemo } from 'react';
 import PropTypes from 'prop-types';
 
 import classNames from 'classnames';
-import { generatePath } from 'react-router';
-import { Link } from 'react-router-dom';
+import { generatePath, Link } from 'react-router-dom';
 import * as timeago from 'timeago.js';
 
 import { useIntl } from '@edx/frontend-platform/i18n';

src/discussions/common/HoverCard.test.jsx

@@ -3,7 +3,7 @@ import {
 } from '@testing-library/react';
 import MockAdapter from 'axios-mock-adapter';
 import { IntlProvider } from 'react-intl';
-import { MemoryRouter, Route } from 'react-router';
+import { MemoryRouter } from 'react-router-dom';
 import { Factory } from 'rosie';
 
 import { initializeMockApp } from '@edx/frontend-platform';
@@ -60,15 +60,12 @@ async function mockAxiosReturnPagedCommentsResponses() {
 function renderComponent(postId) {
   const wrapper = render(
     <IntlProvider locale="en">
-      <AppProvider store={store}>
+      <AppProvider store={store} wrapWithRouter={false}>
         <DiscussionContext.Provider
-          value={{ courseId, postId }}
+          value={{ courseId, postId, page: 'posts' }}
         >
           <MemoryRouter initialEntries={[`/${courseId}/posts/${postId}`]}>
             <DiscussionContent />
-            <Route
-              path="*"
-            />
           </MemoryRouter>
         </DiscussionContext.Provider>
       </AppProvider>

src/discussions/data/hooks.js

@@ -4,7 +4,9 @@ import {
 } from 'react';
 
 import { useDispatch, useSelector } from 'react-redux';
-import { useHistory, useLocation, useRouteMatch } from 'react-router';
+import {
+  matchPath, useLocation, useMatch, useNavigate,
+} from 'react-router-dom';
 
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import { useIntl } from '@edx/frontend-platform/i18n';
@@ -52,16 +54,18 @@ export function useTotalTopicThreadCount() {
 }
 
 export const useSidebarVisible = () => {
+  const location = useLocation();
   const enableInContext = useSelector(selectEnableInContext);
-  const isViewingTopics = useRouteMatch(Routes.TOPICS.ALL);
-  const isViewingLearners = useRouteMatch(Routes.LEARNERS.PATH);
+  const isViewingTopics = useMatch(Routes.TOPICS.ALL);
+  const isViewingLearners = useMatch(`${Routes.LEARNERS.PATH}/*`);
   const isFiltered = useSelector(selectAreThreadsFiltered);
   const totalThreads = useSelector(selectPostThreadCount);
   const isThreadsEmpty = Boolean(useSelector(threadsLoadingStatus()) === RequestStatus.SUCCESSFUL && !totalThreads);
-  const isIncontextTopicsView = Boolean(useRouteMatch(Routes.TOPICS.PATH) && enableInContext);
-  const hideSidebar = Boolean(isThreadsEmpty && !isFiltered && !(isViewingTopics?.isExact || isViewingLearners));
+  const matchInContextTopicView = Routes.TOPICS.PATH.find((route) => matchPath({ path: `${route}/*` }, location.pathname));
+  const isInContextTopicsView = Boolean(matchInContextTopicView && enableInContext);
+  const hideSidebar = Boolean(isThreadsEmpty && !isFiltered && !(isViewingTopics || isViewingLearners));
 
-  if (isIncontextTopicsView) {
+  if (isInContextTopicsView) {
     return true;
   }
 
@@ -84,7 +88,7 @@ export function useCourseDiscussionData(courseId) {
 
 export function useRedirectToThread(courseId, enableInContextSidebar) {
   const dispatch = useDispatch();
-  const history = useHistory();
+  const navigate = useNavigate();
   const location = useLocation();
 
   const redirectToThread = useSelector(
@@ -101,7 +105,7 @@ export function useRedirectToThread(courseId, enableInContextSidebar) {
         postId: redirectToThread.threadId,
         topicId: redirectToThread.topicId,
       })(location);
-      history.push(newLocation);
+      navigate({ ...newLocation });
     }
   }, [redirectToThread]);
 }