diff --git a/src/index.jsx b/src/index.jsx
index f9fdda3f..dbff9c9f 100755
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -31,9 +31,7 @@ subscribe(APP_READY, () => {
path="/"
render={() => Visit Demo Course}
/>
-
-
-
+
,
diff --git a/src/learning-sequence/CourseContainer.jsx b/src/learning-sequence/CourseContainer.jsx
index 34d44cf2..de66f814 100644
--- a/src/learning-sequence/CourseContainer.jsx
+++ b/src/learning-sequence/CourseContainer.jsx
@@ -48,9 +48,13 @@ function useLoadCourse(courseUsageKey) {
}
-function CourseContainer({
- courseUsageKey, sequenceId, unitId, intl,
-}) {
+function CourseContainer(props) {
+ const { intl, match } = props;
+ const {
+ courseUsageKey,
+ sequenceId,
+ unitId,
+ } = match.params;
const { models, courseId } = useLoadCourse(courseUsageKey);
useEffect(() => {
@@ -81,15 +85,14 @@ function CourseContainer({
}
CourseContainer.propTypes = {
- courseUsageKey: PropTypes.string.isRequired,
- sequenceId: PropTypes.string,
- unitId: PropTypes.string,
intl: intlShape.isRequired,
-};
-
-CourseContainer.defaultProps = {
- sequenceId: null,
- unitId: null,
+ match: PropTypes.shape({
+ params: PropTypes.shape({
+ courseUsageKey: PropTypes.string.isRequired,
+ sequenceId: PropTypes.string,
+ unitId: PropTypes.string,
+ }).isRequired,
+ }).isRequired,
};
export default injectIntl(CourseContainer);
diff --git a/src/learning-sequence/LearningSequencePage.jsx b/src/learning-sequence/LearningSequencePage.jsx
index 742b81e3..cb6e4e1e 100644
--- a/src/learning-sequence/LearningSequencePage.jsx
+++ b/src/learning-sequence/LearningSequencePage.jsx
@@ -1,30 +1,19 @@
import React from 'react';
-import PropTypes from 'prop-types';
+import { Switch, Route } from 'react-router';
import CourseContainer from './CourseContainer';
-export default function LearningSequencePage({ match }) {
- const {
- courseUsageKey,
- sequenceId,
- unitId,
- } = match.params;
-
+export default function LearningSequencePage() {
+ // In spirit, we determine which sort of course we're rendering here based on the URL parameters.
+ // Currently we only have one type, so this file doesn't have much to do.
return (
-
);
}
-
-LearningSequencePage.propTypes = {
- match: PropTypes.shape({
- params: PropTypes.shape({
- courseUsageKey: PropTypes.string.isRequired,
- sequenceId: PropTypes.string,
- unitId: PropTypes.string,
- }).isRequired,
- }).isRequired,
-};
diff --git a/src/learning-sequence/course/Course.jsx b/src/learning-sequence/course/Course.jsx
index 6e7d7ef4..c21fa179 100644
--- a/src/learning-sequence/course/Course.jsx
+++ b/src/learning-sequence/course/Course.jsx
@@ -1,6 +1,6 @@
-import React, { useMemo, useCallback } from 'react';
+import React, { useCallback } from 'react';
import PropTypes from 'prop-types';
-import { getConfig, history } from '@edx/frontend-platform';
+import { history } from '@edx/frontend-platform';
import CourseBreadcrumbs from './CourseBreadcrumbs';
import SequenceContainer from './SequenceContainer';
@@ -9,21 +9,6 @@ import { createSequenceIdList } from '../utils';
export default function Course({
courseUsageKey, courseId, sequenceId, unitId, models,
}) {
- const breadcrumbs = useMemo(() => {
- const sectionId = models[sequenceId].parentId;
- if (!unitId) {
- return [];
- }
- return [courseId, sectionId, sequenceId, unitId].map((nodeId) => {
- const node = models[nodeId];
- return {
- id: node.id,
- label: node.displayName,
- url: `${getConfig().LMS_BASE_URL}/courses/${courseUsageKey}/course/#${node.id}`,
- };
- });
- }, [courseUsageKey, courseId, sequenceId, unitId, models]);
-
const nextSequenceHandler = useCallback(() => {
const sequenceIds = createSequenceIdList(models, courseId);
const currentIndex = sequenceIds.indexOf(sequenceId);
@@ -48,7 +33,13 @@ export default function Course({
return (
-
+
+
+ {last ? label : ({label})}
+
+ {!last &&
+
+
+
+ }
+
+ );
+}
+
+CourseBreadcrumb.propTypes = {
+ url: PropTypes.string.isRequired,
+ label: PropTypes.string.isRequired,
+ last: PropTypes.bool.isRequired,
+};
diff --git a/src/learning-sequence/course/CourseBreadcrumbs.jsx b/src/learning-sequence/course/CourseBreadcrumbs.jsx
index 5ee1da50..98e1fb6b 100644
--- a/src/learning-sequence/course/CourseBreadcrumbs.jsx
+++ b/src/learning-sequence/course/CourseBreadcrumbs.jsx
@@ -1,10 +1,27 @@
-import React from 'react';
+import React, { useMemo } from 'react';
import PropTypes from 'prop-types';
+import { getConfig } from '@edx/frontend-platform';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faChevronRight } from '@fortawesome/free-solid-svg-icons';
+import CourseBreadcrumb from './CourseBreadcrumb';
+
+export default function CourseBreadcrumbs({
+ courseUsageKey, courseId, sequenceId, unitId, models,
+}) {
+ const links = useMemo(() => {
+ const sectionId = models[sequenceId].parentId;
+ if (!unitId) {
+ return [];
+ }
+ return [courseId, sectionId, sequenceId, unitId].map((nodeId) => {
+ const node = models[nodeId];
+ return {
+ id: node.id,
+ label: node.displayName,
+ url: `${getConfig().LMS_BASE_URL}/courses/${courseUsageKey}/course/#${node.id}`,
+ };
+ });
+ }, [courseUsageKey, courseId, sequenceId, unitId, models]);
-export default function CourseBreadcrumbs({ links }) {
return (