diff --git a/src/index.jsx b/src/index.jsx
index 862943e6..acf3755e 100755
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -25,7 +25,8 @@ subscribe(APP_READY, () => {
path="/"
render={() => Visit Demo Course}
/>
-
+
+
,
diff --git a/src/learning-sequence/Breadcrumbs.jsx b/src/learning-sequence/Breadcrumbs.jsx
new file mode 100644
index 00000000..1828bab6
--- /dev/null
+++ b/src/learning-sequence/Breadcrumbs.jsx
@@ -0,0 +1,59 @@
+/* eslint-disable react/no-array-index-key */
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faChevronRight } from '@fortawesome/free-solid-svg-icons';
+
+const Breadcrumbs = ({
+ links, activeLabel, spacer, clickHandler,
+}) => {
+ const linkCount = links.length;
+
+ return (
+
+ );
+};
+
+Breadcrumbs.propTypes = {
+ /** an array of objects with the properties `label` and `url` as strings. */
+ links: PropTypes.arrayOf(PropTypes.shape({
+ label: PropTypes.string,
+ url: PropTypes.string,
+ })).isRequired,
+ /** allows to add a label that is not a link to the end of the breadcrumb.
+ * Defaults to `undefined`.
+ */
+ activeLabel: PropTypes.string,
+ /** allows to add a custom element between the breadcrumb items.
+ * Defaults to `>` rendered using the `Icon` component. */
+ spacer: PropTypes.element,
+ /** allows to add a custom function to be called `onClick` of a breadcrumb link.
+ * The use case for this is for adding custom analytics to the component. */
+ clickHandler: PropTypes.func,
+};
+
+Breadcrumbs.defaultProps = {
+ activeLabel: undefined,
+ spacer: undefined,
+ clickHandler: undefined,
+};
+
+export default Breadcrumbs;
diff --git a/src/learning-sequence/LearningSequencePage.jsx b/src/learning-sequence/LearningSequencePage.jsx
index 8bf9ac0f..68808912 100644
--- a/src/learning-sequence/LearningSequencePage.jsx
+++ b/src/learning-sequence/LearningSequencePage.jsx
@@ -4,12 +4,12 @@ import PropTypes from 'prop-types';
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import { getConfig, history } from '@edx/frontend-platform';
import { AppContext } from '@edx/frontend-platform/react';
-import { Breadcrumb } from '@edx/paragon';
import PageLoading from './PageLoading';
import messages from './messages';
import SubSectionNavigation from './SubSectionNavigation';
import { loadCourseSequence, findBlockAncestry, loadSubSectionMetadata } from './api';
+import Breadcrumbs from './Breadcrumbs';
class LearningSequencePage extends Component {
constructor(props, context) {
@@ -30,7 +30,7 @@ class LearningSequencePage extends Component {
}
componentDidMount() {
- loadCourseSequence(this.props.match.params.courseId, null, this.context.authenticatedUser.username)
+ loadCourseSequence(this.props.match.params.courseId, this.props.match.params.subSectionId, this.props.match.params.unitId, this.context.authenticatedUser.username)
.then(({
blocks, courseBlockId, subSectionIds, subSectionMetadata, units, unitId,
}) => {
@@ -47,6 +47,16 @@ class LearningSequencePage extends Component {
});
}
+ componentDidUpdate(prevProps, prevState) {
+ if (
+ this.props.match.params.courseId !== prevProps.match.params.courseId ||
+ this.state.subSectionId !== prevState.subSectionId ||
+ this.state.unitId !== prevState.unitId
+ ) {
+ history.push(`/course/${this.props.match.params.courseId}/${this.state.subSectionId}/${this.state.unitId}`);
+ }
+ }
+
handlePreviousClick = () => {
const index = this.state.subSectionMetadata.unitIds.indexOf(this.state.unitId);
if (index > 0) {
@@ -58,7 +68,7 @@ class LearningSequencePage extends Component {
if (subSectionIndex > 0) {
const previousSubSectionId = this.state.subSectionIds[subSectionIndex - 1];
- loadSubSectionMetadata(this.props.match.params.courseId, previousSubSectionId).then(({ subSectionMetadata, units, unitId }) => {
+ loadSubSectionMetadata(this.props.match.params.courseId, previousSubSectionId, { last: true }).then(({ subSectionMetadata, units, unitId }) => {
this.setState({
subSectionId: subSectionMetadata.itemId,
subSectionMetadata,
@@ -86,14 +96,15 @@ class LearningSequencePage extends Component {
if (subSectionIndex < this.state.subSectionIds.length - 1) {
const nextSubSectionId = this.state.subSectionIds[subSectionIndex + 1];
- loadSubSectionMetadata(this.props.match.params.courseId, nextSubSectionId).then(({ subSectionMetadata, units, unitId }) => {
- this.setState({
- subSectionId: subSectionMetadata.itemId,
- subSectionMetadata,
- units,
- unitId,
+ loadSubSectionMetadata(this.props.match.params.courseId, nextSubSectionId, { first: true })
+ .then(({ subSectionMetadata, units, unitId }) => {
+ this.setState({
+ subSectionId: subSectionMetadata.itemId,
+ subSectionMetadata,
+ units,
+ unitId,
+ });
});
- });
} else {
console.log('we are at the end!');
}
@@ -125,14 +136,13 @@ class LearningSequencePage extends Component {
{course.displayName}
- >}
/>
item.id);
- const unitId = subSectionMetadata.position ?
- subSectionMetadata.items[subSectionMetadata.position - 1].id :
- subSectionMetadata.items[0].id;
+ let position = subSectionMetadata.position - 1; // metadata's position is 1's indexed
+ position = first ? 0 : position;
+ position = last ? subSectionMetadata.unitIds.length - 1 : position;
+ position = urlUnitId ? subSectionMetadata.unitIds.indexOf(urlUnitId) : position;
+ const unitId = subSectionMetadata.items[position].id;
const units = createUnitsMap(subSectionMetadata.items);
return {