fix: routing issues

openedx · Nov 29, 2023 · 1996a10 · 1996a10
1 parent bf76d80
commit 1996a10
Show file tree

Hide file tree

Showing 9 changed files with 62 additions and 85 deletions.
diff --git a/src/data/constants.js b/src/data/constants.js
@@ -144,7 +144,7 @@ export const Routes = {
     PATH: BASE_PATH,
   },
   LEARNERS: {
-    PATH: `${BASE_PATH}/learners`,
+    PATH: `${BASE_PATH}/learners/:learnerUsername?`,
     POSTS: `${BASE_PATH}/learners/:learnerUsername/posts/:postId?`,
     POSTS_EDIT: `${BASE_PATH}/learners/:learnerUsername/posts/:postId/edit`,
   },
@@ -165,19 +165,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/*`,
     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: {
@@ -188,10 +188,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`,
   },
 };

diff --git a/src/discussions/discussions-home/DiscussionSidebar.jsx b/src/discussions/discussions-home/DiscussionSidebar.jsx
@@ -90,20 +90,16 @@ const DiscussionSidebar = ({ displaySidebar, postActionBarRef }) => {
             ROUTES.TOPICS.CATEGORY,
             ROUTES.TOPICS.CATEGORY_POST,
             ROUTES.TOPICS.CATEGORY_POST_EDIT,
+            ROUTES.TOPICS.TOPIC,
+            ROUTES.TOPICS.TOPIC_POST,
+            ROUTES.TOPICS.TOPIC_POST_EDIT,
           ].map((route) => (
             <Route
               key={route}
               path={route}
               element={<PostsView />}
             />
           ))}
-          {[ROUTES.TOPICS.TOPIC, ROUTES.TOPICS.TOPIC_POST, ROUTES.TOPICS.TOPIC_POST_EDIT].map((route) => (
-            <Route
-              key={route}
-              path={route}
-              element={<PostsView />}
-            />
-          ))}
           {ROUTES.TOPICS.PATH.map(path => (
             <Route key={path} path={path} element={<LegacyTopicsView />} />
           ))}
@@ -116,7 +112,7 @@ const DiscussionSidebar = ({ displaySidebar, postActionBarRef }) => {
             <Route path={ROUTES.LEARNERS.PATH} element={<LearnersView />} />
           )}
           {configStatus === RequestStatus.SUCCESSFUL && (
-            <Route path={ROUTES.DISCUSSIONS.PATH} element={<Navigate to="posts" />} />
+            <Route path={`${ROUTES.DISCUSSIONS.PATH}/*`} element={<Navigate to="posts" />} />
           )}
         </Routes>
       </Suspense>

diff --git a/src/discussions/discussions-home/DiscussionsHome.jsx b/src/discussions/discussions-home/DiscussionsHome.jsx
@@ -128,18 +128,18 @@ const DiscussionsHome = () => {
             {!displayContentArea && (
               <Routes>
                 <>
-                  {ROUTES.TOPICS.PATH.map(path => (
+                  {ROUTES.TOPICS.PATH.map(route => (
                     <Route
-                      key={path}
-                      path={path}
+                      key={route}
+                      path={`${route}/*`}
                       element={(enableInContext || enableInContextSidebar) ? <InContextEmptyTopics /> : <EmptyTopics />}
                     />
                   ))}
                   <Route
                     path={ROUTES.POSTS.MY_POSTS}
                     element={<EmptyPosts subTitleMessage={messages.emptyMyPosts} />}
                   />
-                  {[ROUTES.POSTS.PATH, ROUTES.POSTS.ALL_POSTS, ROUTES.LEARNERS.POSTS].map((route) => (
+                  {[`${ROUTES.POSTS.PATH}/*`, ROUTES.POSTS.ALL_POSTS, ROUTES.LEARNERS.POSTS].map((route) => (
                     <Route
                       key={route}
                       path={route}

diff --git a/src/discussions/in-context-topics/TopicPostsView.test.jsx b/src/discussions/in-context-topics/TopicPostsView.test.jsx
@@ -61,24 +61,23 @@ async function renderComponent({ topicId, category } = { }) {
         >
           <MemoryRouter initialEntries={[path]}>
             <Routes>
-              <Route
-                path={ROUTES.POSTS.PATH}
-                element={(
-                  <>
-                    <TopicPostsView />
-                    <LocationComponent />
-                  </>
-                )}
-              />
-              <Route
-                path={ROUTES.TOPICS.CATEGORY}
-                element={(
-                  <>
-                    <TopicPostsView />
-                    <LocationComponent />
-                  </>
-                )}
-              />
+              {
+                [
+                  ROUTES.POSTS.PATH,
+                  ROUTES.TOPICS.CATEGORY,
+                ].map((route) => (
+                  <Route
+                    key={route}
+                    path={route}
+                    element={(
+                      <>
+                        <TopicPostsView />
+                        <LocationComponent />
+                      </>
+                    )}
+                  />
+                ))
+              }
               <Route
                 path={ROUTES.TOPICS.ALL}
                 element={(

diff --git a/src/discussions/learners/LearnersView.jsx b/src/discussions/learners/LearnersView.jsx
@@ -1,9 +1,7 @@
 import React, { useCallback, useEffect, useMemo } from 'react';
 
 import { useDispatch, useSelector } from 'react-redux';
-import {
-  Navigate, useLocation, useParams,
-} from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { Button, Spinner } from '@edx/paragon';
@@ -12,7 +10,6 @@ import SearchInfo from '../../components/SearchInfo';
 import { RequestStatus } from '../../data/constants';
 import { selectConfigLoadingStatus, selectLearnersTabEnabled } from '../data/selectors';
 import NoResults from '../posts/NoResults';
-import { truncatePath } from '../utils';
 import {
   learnersLoadingStatus,
   selectAllLearners,
@@ -28,7 +25,6 @@ import messages from './messages';
 const LearnersView = () => {
   const intl = useIntl();
   const { courseId } = useParams();
-  const location = useLocation();
   const dispatch = useDispatch();
   const orderBy = useSelector(selectLearnerSorting());
   const nextPage = useSelector(selectLearnerNextPage());
@@ -84,11 +80,6 @@ const LearnersView = () => {
         />
       )}
       <div className="list-group list-group-flush learner" role="list">
-        {courseConfigLoadingStatus === RequestStatus.SUCCESSFUL && !learnersTabEnabled && (
-          <Navigate
-            to={`${truncatePath(location.pathname)}`}
-          />
-        )}
         {renderLearnersList}
         {loadingStatus === RequestStatus.IN_PROGRESS ? (
           <div className="d-flex justify-content-center p-4">

diff --git a/src/discussions/navigation/breadcrumb-menu/LegacyBreadcrumbMenu.test.jsx b/src/discussions/navigation/breadcrumb-menu/LegacyBreadcrumbMenu.test.jsx
@@ -31,14 +31,18 @@ function renderComponent(path) {
       <AppProvider store={store} wrapWithRouter={false}>
         <MemoryRouter initialEntries={[path]}>
           <Routes>
-            <Route
-              path={ROUTES.POSTS.PATH}
-              element={<LegacyBreadcrumbMenu />}
-            />
-            <Route
-              path={ROUTES.TOPICS.CATEGORY}
-              element={<LegacyBreadcrumbMenu />}
-            />
+            {
+              [
+                ROUTES.POSTS.PATH,
+                ROUTES.TOPICS.CATEGORY,
+              ].map((route) => (
+                <Route
+                  key={route}
+                  path={route}
+                  element={<LegacyBreadcrumbMenu />}
+                />
+              ))
+            }
           </Routes>
         </MemoryRouter>
       </AppProvider>

diff --git a/src/discussions/post-comments/PostCommentsView.jsx b/src/discussions/post-comments/PostCommentsView.jsx
@@ -10,15 +10,15 @@ import { ArrowBack } from '@edx/paragon/icons';
 
 import Spinner from '../../components/Spinner';
 import {
-  EndorsementStatus, PAGES, PostsPages, ThreadType,
+  EndorsementStatus, PostsPages, ThreadType,
 } from '../../data/constants';
 import { useDispatchWithState } from '../../data/hooks';
 import { DiscussionContext } from '../common/context';
 import { useIsOnDesktop } from '../data/hooks';
 import { EmptyPage } from '../empty-posts';
 import { Post } from '../posts';
 import { fetchThread } from '../posts/data/thunks';
-import { discussionsPath, truncatePath } from '../utils';
+import { discussionsPath } from '../utils';
 import { ResponseEditor } from './comments/comment';
 import { useCommentsCount, usePost } from './data/hooks';
 import messages from './messages';
@@ -43,10 +43,6 @@ const PostCommentsView = () => {
     courseId, learnerUsername, category, topicId,
   })(location);
 
-  if (page === PAGES.TOPICS || page === PAGES.CATEGORY) {
-    redirectUrl.pathname = truncatePath(redirectUrl.pathname);
-  }
-
   useEffect(() => {
     if (!threadId) {
       submitDispatch(fetchThread(postId, courseId, true));

diff --git a/src/discussions/posts/PostsView.test.jsx b/src/discussions/posts/PostsView.test.jsx
@@ -68,19 +68,16 @@ async function renderComponent({
           }}
           >
             <Routes>
-              <Route path={ROUTES.POSTS.MY_POSTS} element={<PostsView />} />
-              <Route
-                path={ROUTES.POSTS.PATH}
-                element={<PostsView />}
-              />
-              <Route
-                path={ROUTES.POSTS.ALL_POSTS}
-                element={<PostsView />}
-              />
-              <Route
-                path={ROUTES.TOPICS.CATEGORY}
-                element={<PostsView />}
-              />
+              {
+                [
+                  ROUTES.POSTS.PATH,
+                  ROUTES.POSTS.MY_POSTS,
+                  ROUTES.POSTS.ALL_POSTS,
+                  ROUTES.TOPICS.CATEGORY,
+                ].map((route) => (
+                  <Route key={route} path={route} element={<PostsView />} />
+                ))
+              }
             </Routes>
           </DiscussionContext.Provider>
         </MemoryRouter>

diff --git a/src/discussions/posts/post/Post.jsx b/src/discussions/posts/post/Post.jsx
@@ -4,14 +4,14 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { toString } from 'lodash';
 import { useDispatch, useSelector } from 'react-redux';
-import { matchPath, useLocation, useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 
 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { Hyperlink, useToggle } from '@edx/paragon';
 
 import HTMLLoader from '../../../components/HTMLLoader';
-import { ContentActions, Routes } from '../../../data/constants';
+import { ContentActions } from '../../../data/constants';
 import { selectorForUnitSubsection, selectTopicContext } from '../../../data/selectors';
 import { AlertBanner, Confirmation } from '../../common';
 import { DiscussionContext } from '../../common/context';
@@ -50,13 +50,7 @@ const Post = ({ handleAddResponseButton }) => {
   const displayPostFooter = following || voteCount || closed || (groupId && userHasModerationPrivileges);
 
   const handleDeleteConfirmation = useCallback(async () => {
-    const isTopicCategoryPostsPage = Boolean(
-      matchPath({ path: Routes.TOPICS.CATEGORY_POST }, location.pathname)
-      || matchPath({ path: Routes.TOPICS.TOPIC_POST }, location.pathname),
-    );
-
-    let basePath = truncatePath(location.pathname);
-    if (isTopicCategoryPostsPage) { basePath = truncatePath(basePath); }
+    const basePath = truncatePath(location.pathname);
 
     await dispatch(removeThread(postId));
     navigate({