diff --git a/src/courseware/utils.jsx b/src/courseware/utils.jsx
new file mode 100644
index 0000000000..2c4c337996
--- /dev/null
+++ b/src/courseware/utils.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { useNavigate, useParams } from 'react-router-dom';
+
+const withParamsAndNavigation = WrappedComponent => {
+ const WithParamsNavigationComponent = props => {
+ const { courseId, sequenceId, unitId } = useParams();
+ const navigate = useNavigate();
+ return (
+
+ );
+ };
+ return WithParamsNavigationComponent;
+};
+
+export default withParamsAndNavigation;
diff --git a/src/decode-page-route/index.jsx b/src/decode-page-route/index.jsx
index cc38013b24..15a0d0e102 100644
--- a/src/decode-page-route/index.jsx
+++ b/src/decode-page-route/index.jsx
@@ -1,7 +1,14 @@
import PropTypes from 'prop-types';
-import { PageRoute } from '@edx/frontend-platform/react';
+import { PageWrap } from '@edx/frontend-platform/react';
import React from 'react';
-import { useHistory, generatePath } from 'react-router';
+import {
+ generatePath, useMatch, Navigate,
+} from 'react-router-dom';
+import { DECODE_ROUTES } from '../constants';
+
+const ROUTES = [].concat(
+ ...Object.values(DECODE_ROUTES).map(value => (Array.isArray(value) ? value : [value])),
+);
export const decodeUrl = (encodedUrl) => {
const decodedUrl = decodeURIComponent(encodedUrl);
@@ -11,10 +18,16 @@ export const decodeUrl = (encodedUrl) => {
return decodeUrl(decodedUrl);
};
-const DecodePageRoute = (props) => {
- const history = useHistory();
- if (props.computedMatch) {
- const { url, path, params } = props.computedMatch;
+const DecodePageRoute = ({ children }) => {
+ let computedMatch = null;
+
+ ROUTES.forEach((route) => {
+ const matchedRoute = useMatch(route);
+ if (matchedRoute) { computedMatch = matchedRoute; }
+ });
+
+ if (computedMatch) {
+ const { pathname, pattern, params } = computedMatch;
Object.keys(params).forEach((param) => {
// only decode params not the entire url.
@@ -22,28 +35,19 @@ const DecodePageRoute = (props) => {
params[param] = decodeUrl(params[param]);
});
- const newUrl = generatePath(path, params);
+ const newUrl = generatePath(pattern.path, params);
// if the url get decoded, reroute to the decoded url
- if (newUrl !== url) {
- history.replace(newUrl);
+ if (newUrl !== pathname) {
+ return
;
}
}
- return
;
+ return
{children} ;
};
DecodePageRoute.propTypes = {
- computedMatch: PropTypes.shape({
- url: PropTypes.string.isRequired,
- path: PropTypes.string.isRequired,
- // eslint-disable-next-line react/forbid-prop-types
- params: PropTypes.any,
- }),
-};
-
-DecodePageRoute.defaultProps = {
- computedMatch: null,
+ children: PropTypes.node.isRequired,
};
export default DecodePageRoute;
diff --git a/src/generic/CourseAccessErrorPage.jsx b/src/generic/CourseAccessErrorPage.jsx
index 3440382ff4..969d6e2976 100644
--- a/src/generic/CourseAccessErrorPage.jsx
+++ b/src/generic/CourseAccessErrorPage.jsx
@@ -1,9 +1,8 @@
import React, { useEffect } from 'react';
import { LearningHeader as Header } from '@edx/frontend-component-header';
import Footer from '@edx/frontend-component-footer';
-import { useParams } from 'react-router-dom';
+import { useParams, useNavigate } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
-import { Redirect } from 'react-router';
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import useActiveEnterpriseAlert from '../alerts/active-enteprise-alert';
import { AlertList } from './user-messages';
@@ -14,6 +13,7 @@ import messages from '../tab-page/messages';
const CourseAccessErrorPage = ({ intl }) => {
const { courseId } = useParams();
+ const navigate = useNavigate();
const dispatch = useDispatch();
const activeEnterpriseAlert = useActiveEnterpriseAlert(courseId);
@@ -38,7 +38,7 @@ const CourseAccessErrorPage = ({ intl }) => {
);
}
if (courseStatus === LOADED) {
- return (
);
+ navigate(`/redirect/home/${courseId}`);
}
return (
<>
diff --git a/src/generic/path-fixes/PathFixesProvider.jsx b/src/generic/path-fixes/PathFixesProvider.jsx
index 3215660927..02bf11a0fc 100644
--- a/src/generic/path-fixes/PathFixesProvider.jsx
+++ b/src/generic/path-fixes/PathFixesProvider.jsx
@@ -1,7 +1,8 @@
-import { Redirect, useLocation } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
import PropTypes from 'prop-types';
import { sendTrackEvent } from '@edx/frontend-platform/analytics';
+import { useEffect } from 'react';
/**
* We have seen evidence of learners hitting MFE pages with spaces instead of plus signs (which are used commonly
@@ -13,24 +14,27 @@ import { sendTrackEvent } from '@edx/frontend-platform/analytics';
*/
const PathFixesProvider = ({ children }) => {
const location = useLocation();
-
- // We only check for spaces. That's not the only kind of character that is escaped in URLs, but it would always be
- // present for our cases, and I believe it's the only one we use normally.
- if (location.pathname.includes(' ')) {
- const newLocation = {
- ...location,
- pathname: location.pathname.replaceAll(' ', '+'),
- };
-
- sendTrackEvent('edx.ui.lms.path_fixed', {
- new_path: newLocation.pathname,
- old_path: location.pathname,
- referrer: document.referrer,
- search: location.search,
- });
-
- return (
);
- }
+ const navigate = useNavigate();
+
+ useEffect(() => {
+ // We only check for spaces. That's not the only kind of character that is escaped in URLs, but it would always be
+ // present for our cases, and I believe it's the only one we use normally.
+ if (location.pathname.includes('%20')) {
+ const newLocation = {
+ ...location,
+ pathname: location.pathname.replaceAll('%20', '+'),
+ };
+
+ sendTrackEvent('edx.ui.lms.path_fixed', {
+ new_path: newLocation.pathname,
+ old_path: location.pathname,
+ referrer: document.referrer,
+ search: location.search,
+ });
+
+ navigate(newLocation);
+ }
+ }, [location.pathname]);
return children; // pass through
};
diff --git a/src/index.jsx b/src/index.jsx
index a509e1f6a8..cdba49f1d4 100755
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -6,10 +6,10 @@ import {
mergeConfig,
getConfig,
} from '@edx/frontend-platform';
-import { AppProvider, ErrorPage, PageRoute } from '@edx/frontend-platform/react';
+import { AppProvider, ErrorPage, PageWrap } from '@edx/frontend-platform/react';
import React from 'react';
import ReactDOM from 'react-dom';
-import { Switch } from 'react-router-dom';
+import { Routes, Route } from 'react-router-dom';
import { Helmet } from 'react-helmet';
import { fetchDiscussionTab, fetchLiveTab } from './course-home/data/thunks';
@@ -36,6 +36,7 @@ import PathFixesProvider from './generic/path-fixes';
import LiveTab from './course-home/live-tab/LiveTab';
import CourseAccessErrorPage from './generic/CourseAccessErrorPage';
import DecodePageRoute from './decode-page-route';
+import { DECODE_ROUTES, ROUTES } from './constants';
subscribe(APP_READY, () => {
ReactDOM.render(
@@ -46,59 +47,91 @@ subscribe(APP_READY, () => {
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- (
- fetchProgressTab(courseId, match.params.targetUserId)}
- slice="courseHome"
- >
-
-
+
+ } />
+ } />
+ }
+ />
+
+
+
+
+
+ )}
+ />
+
+
+
+
+
+ )}
+ />
+
+
+
+
+
)}
/>
-
-
-
-
-
-
+
+
+
+
+ )}
+ />
+ {DECODE_ROUTES.PROGRESS.map((route) => (
+
+
+
+
+
+ )}
+ />
+ ))}
+
+
+
+
+
+ )}
/>
-
+ {DECODE_ROUTES.COURSEWARE.map((route) => (
+
+
+
+ )}
+ />
+ ))}
+
diff --git a/src/tab-page/TabContainer.jsx b/src/tab-page/TabContainer.jsx
index c5331f9fe8..d69e62f40f 100644
--- a/src/tab-page/TabContainer.jsx
+++ b/src/tab-page/TabContainer.jsx
@@ -12,15 +12,21 @@ const TabContainer = (props) => {
fetch,
slice,
tab,
+ isProgressTab,
} = props;
- const { courseId: courseIdFromUrl } = useParams();
+ const { courseId: courseIdFromUrl, targetUserId } = useParams();
const dispatch = useDispatch();
+
useEffect(() => {
// The courseId from the URL is the course we WANT to load.
- dispatch(fetch(courseIdFromUrl));
+ if (isProgressTab) {
+ dispatch(fetch(courseIdFromUrl, targetUserId));
+ } else {
+ dispatch(fetch(courseIdFromUrl));
+ }
// eslint-disable-next-line react-hooks/exhaustive-deps
- }, [courseIdFromUrl]);
+ }, [courseIdFromUrl, targetUserId]);
// The courseId from the store is the course we HAVE loaded. If the URL changes,
// we don't want the application to adjust to it until it has actually loaded the new data.
@@ -47,6 +53,11 @@ TabContainer.propTypes = {
fetch: PropTypes.func.isRequired,
slice: PropTypes.string.isRequired,
tab: PropTypes.string.isRequired,
+ isProgressTab: PropTypes.bool,
+};
+
+TabContainer.defaultProps = {
+ isProgressTab: false,
};
export default TabContainer;