Skip to content

Commit b35632d

Browse files
Syed-Ali-Abbas-ZaidiSyed-Ali-Abbas-Zaidi
authored
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
1 parent b36c026 commit b35632d

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+491
-413
lines changed

‎package-lock.json‎

Lines changed: 37 additions & 57 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
"@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
3737
"@edx/frontend-component-footer": "12.6.0",
3838
"@edx/frontend-component-header": "4.10.1",
39-
"@edx/frontend-platform": "4.6.3",
39+
"@edx/frontend-platform": "5.6.1",
4040
"@edx/paragon": "20.46.3",
4141
"@reduxjs/toolkit": "1.8.0",
4242
"@tinymce/tinymce-react": "3.13.1",
@@ -51,8 +51,8 @@
5151
"react": "17.0.2",
5252
"react-dom": "17.0.2",
5353
"react-redux": "7.2.9",
54-
"react-router": "5.2.1",
55-
"react-router-dom": "5.3.0",
54+
"react-router": "6.18.0",
55+
"react-router-dom": "6.18.0",
5656
"redux": "4.2.1",
5757
"regenerator-runtime": "0.14.0",
5858
"timeago.js": "4.0.2",

‎src/components/TinyMCEEditor.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useCallback, useEffect, useState } from 'react';
22

33
import { Editor } from '@tinymce/tinymce-react';
4-
import { useLocation, useParams } from 'react-router';
4+
import { useLocation, useParams } from 'react-router-dom';
55
// TinyMCE so the global var exists
66
// eslint-disable-next-line no-unused-vars,import/no-extraneous-dependencies
77
import tinymce from 'tinymce/tinymce';

‎src/data/constants.js‎

Lines changed: 21 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -147,18 +147,17 @@ export const Routes = {
147147
PATH: BASE_PATH,
148148
},
149149
LEARNERS: {
150-
PATH: `${BASE_PATH}/learners`,
151-
POSTS: `${BASE_PATH}/learners/:learnerUsername/posts(/:postId)?`,
150+
PATH: `${BASE_PATH}/learners/:learnerUsername?`,
151+
POSTS: `${BASE_PATH}/learners/:learnerUsername/posts/:postId?`,
152+
POSTS_EDIT: `${BASE_PATH}/learners/:learnerUsername/posts/:postId/edit`,
152153
},
153154
POSTS: {
154155
PATH: `${BASE_PATH}/topics/:topicId`,
155-
MY_POSTS: `${BASE_PATH}/my-posts(/:postId)?`,
156-
ALL_POSTS: `${BASE_PATH}/posts(/:postId)?`,
157-
NEW_POST: [
158-
`${BASE_PATH}/topics/:topicId/posts/:postId`,
159-
`${BASE_PATH}/topics/:topicId`,
160-
`${BASE_PATH}`,
161-
],
156+
MY_POSTS: `${BASE_PATH}/my-posts/:postId?`,
157+
ALL_POSTS: `${BASE_PATH}/posts/:postId?`,
158+
EDIT_MY_POSTS: `${BASE_PATH}/my-posts/:postId/edit`,
159+
EDIT_ALL_POSTS: `${BASE_PATH}/posts/:postId/edit`,
160+
NEW_POST: `${BASE_PATH}/*`,
162161
EDIT_POST: [
163162
`${BASE_PATH}/category/:category/posts/:postId/edit`,
164163
`${BASE_PATH}/topics/:topicId/posts/:postId/edit`,
@@ -169,19 +168,19 @@ export const Routes = {
169168
},
170169
COMMENTS: {
171170
PATH: [
172-
`${BASE_PATH}/category/:category/posts/:postId`,
173-
`${BASE_PATH}/topics/:topicId/posts/:postId`,
171+
`${BASE_PATH}/category/:category/posts/:postId?`,
172+
`${BASE_PATH}/topics/:topicId/posts/:postId?`,
174173
`${BASE_PATH}/posts/:postId`,
175174
`${BASE_PATH}/my-posts/:postId`,
176-
`${BASE_PATH}/learners/:learnerUsername/posts/:postId`,
175+
`${BASE_PATH}/learners/:learnerUsername/posts/:postId?`,
177176
],
178-
PAGE: `${BASE_PATH}/:page`,
177+
PAGE: `${BASE_PATH}/:page/*`,
179178
PAGES: {
180-
category: `${BASE_PATH}/category/:category/posts/:postId`,
181-
topics: `${BASE_PATH}/topics/:topicId/posts/:postId`,
179+
category: `${BASE_PATH}/category/:category/posts/:postId?`,
180+
topics: `${BASE_PATH}/topics/:topicId/posts/:postId?`,
182181
posts: `${BASE_PATH}/posts/:postId`,
183182
'my-posts': `${BASE_PATH}/my-posts/:postId`,
184-
learners: `${BASE_PATH}/learners/:learnerUsername/posts/:postId`,
183+
learners: `${BASE_PATH}/learners/:learnerUsername/posts/:postId?`,
185184
},
186185
},
187186
TOPICS: {
@@ -192,9 +191,10 @@ export const Routes = {
192191
],
193192
ALL: `${BASE_PATH}/topics`,
194193
CATEGORY: `${BASE_PATH}/category/:category`,
195-
CATEGORY_POST: `${BASE_PATH}/category/:category/posts/:postId`,
194+
CATEGORY_POST: `${BASE_PATH}/category/:category/posts/:postId?`,
195+
CATEGORY_POST_EDIT: `${BASE_PATH}/category/:category/posts/:postId/edit`,
196196
TOPIC: `${BASE_PATH}/topics/:topicId`,
197-
TOPIC_POST: `${BASE_PATH}/topics/:topicId/posts/:postId`,
197+
TOPIC_POST: `${BASE_PATH}/topics/:topicId/posts/:postId?`,
198198
TOPIC_POST_EDIT: `${BASE_PATH}/topics/:topicId/posts/:postId/edit`,
199199
},
200200
};
@@ -208,11 +208,12 @@ export const PostsPages = {
208208
};
209209

210210
export const ALL_ROUTES = []
211-
.concat([Routes.TOPICS.CATEGORY_POST, Routes.TOPICS.CATEGORY])
211+
.concat([Routes.TOPICS.CATEGORY_POST, `${Routes.TOPICS.CATEGORY}?`])
212212
.concat(Routes.COMMENTS.PATH)
213213
.concat(Routes.TOPICS.PATH)
214+
.concat(Routes.POSTS.EDIT_POST)
214215
.concat([Routes.POSTS.ALL_POSTS, Routes.POSTS.MY_POSTS])
215216
.concat([Routes.LEARNERS.POSTS, Routes.LEARNERS.PATH])
216-
.concat([Routes.DISCUSSIONS.PATH]);
217+
.concat([`${Routes.DISCUSSIONS.PATH}/*`]);
217218

218219
export const MAX_UPLOAD_FILE_SIZE = 1024;

‎src/discussions/common/AuthorLabel.jsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,7 @@ import React, { useContext, useMemo } from 'react';
22
import PropTypes from 'prop-types';
33

44
import classNames from 'classnames';
5-
import { generatePath } from 'react-router';
6-
import { Link } from 'react-router-dom';
5+
import { generatePath, Link } from 'react-router-dom';
76
import * as timeago from 'timeago.js';
87

98
import { useIntl } from '@edx/frontend-platform/i18n';

‎src/discussions/common/HoverCard.test.jsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import {
33
} from '@testing-library/react';
44
import MockAdapter from 'axios-mock-adapter';
55
import { IntlProvider } from 'react-intl';
6-
import { MemoryRouter, Route } from 'react-router';
6+
import { MemoryRouter } from 'react-router-dom';
77
import { Factory } from 'rosie';
88

99
import { initializeMockApp } from '@edx/frontend-platform';
@@ -60,15 +60,12 @@ async function mockAxiosReturnPagedCommentsResponses() {
6060
function renderComponent(postId) {
6161
const wrapper = render(
6262
<IntlProvider locale="en">
63-
<AppProvider store={store}>
63+
<AppProvider store={store} wrapWithRouter={false}>
6464
<DiscussionContext.Provider
65-
value={{ courseId, postId }}
65+
value={{ courseId, postId, page: 'posts' }}
6666
>
6767
<MemoryRouter initialEntries={[`/${courseId}/posts/${postId}`]}>
6868
<DiscussionContent />
69-
<Route
70-
path="*"
71-
/>
7269
</MemoryRouter>
7370
</DiscussionContext.Provider>
7471
</AppProvider>

‎src/discussions/data/hooks.js‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,9 @@ import {
44
} from 'react';
55

66
import { useDispatch, useSelector } from 'react-redux';
7-
import { useHistory, useLocation, useRouteMatch } from 'react-router';
7+
import {
8+
matchPath, useLocation, useMatch, useNavigate,
9+
} from 'react-router-dom';
810

911
import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
1012
import { useIntl } from '@edx/frontend-platform/i18n';
@@ -52,16 +54,18 @@ export function useTotalTopicThreadCount() {
5254
}
5355

5456
export const useSidebarVisible = () => {
57+
const location = useLocation();
5558
const enableInContext = useSelector(selectEnableInContext);
56-
const isViewingTopics = useRouteMatch(Routes.TOPICS.ALL);
57-
const isViewingLearners = useRouteMatch(Routes.LEARNERS.PATH);
59+
const isViewingTopics = useMatch(Routes.TOPICS.ALL);
60+
const isViewingLearners = useMatch(`${Routes.LEARNERS.PATH}/*`);
5861
const isFiltered = useSelector(selectAreThreadsFiltered);
5962
const totalThreads = useSelector(selectPostThreadCount);
6063
const isThreadsEmpty = Boolean(useSelector(threadsLoadingStatus()) === RequestStatus.SUCCESSFUL && !totalThreads);
61-
const isIncontextTopicsView = Boolean(useRouteMatch(Routes.TOPICS.PATH) && enableInContext);
62-
const hideSidebar = Boolean(isThreadsEmpty && !isFiltered && !(isViewingTopics?.isExact || isViewingLearners));
64+
const matchInContextTopicView = Routes.TOPICS.PATH.find((route) => matchPath({ path: `${route}/*` }, location.pathname));
65+
const isInContextTopicsView = Boolean(matchInContextTopicView && enableInContext);
66+
const hideSidebar = Boolean(isThreadsEmpty && !isFiltered && !(isViewingTopics || isViewingLearners));
6367

64-
if (isIncontextTopicsView) {
68+
if (isInContextTopicsView) {
6569
return true;
6670
}
6771

@@ -84,7 +88,7 @@ export function useCourseDiscussionData(courseId) {
8488

8589
export function useRedirectToThread(courseId, enableInContextSidebar) {
8690
const dispatch = useDispatch();
87-
const history = useHistory();
91+
const navigate = useNavigate();
8892
const location = useLocation();
8993

9094
const redirectToThread = useSelector(
@@ -101,7 +105,7 @@ export function useRedirectToThread(courseId, enableInContextSidebar) {
101105
postId: redirectToThread.threadId,
102106
topicId: redirectToThread.topicId,
103107
})(location);
104-
history.push(newLocation);
108+
navigate({ ...newLocation });
105109
}
106110
}, [redirectToThread]);
107111
}

0 commit comments

Comments
 (0)