@@ -56,17 +56,16 @@ export default function Outline({
@@ -21,16 +22,15 @@ export default function Chapter({ id, courseUsageKey, models }) {
-
- {children.map((sequenceId) => (
+ {sequenceIds.map((sequenceId) => (
@@ -38,8 +38,7 @@ export default function Chapter({ id, courseUsageKey, models }) {
);
}
-Chapter.propTypes = {
+Section.propTypes = {
id: PropTypes.string.isRequired,
courseUsageKey: PropTypes.string.isRequired,
- models: courseBlocksShape.isRequired,
};
diff --git a/src/course-home/SequenceLink.jsx b/src/course-home/SequenceLink.jsx
new file mode 100644
index 00000000..7ae7ccb2
--- /dev/null
+++ b/src/course-home/SequenceLink.jsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+import { useModel } from '../model-store';
+
+export default function SequenceLink({ id, courseUsageKey }) {
+ const sequence = useModel('sequences', id);
+ return (
+
- {(() => {
- if (ready) {
- return (
-
- );
-}
-
-CourseContainer.propTypes = {
- intl: intlShape.isRequired,
- courseId: PropTypes.string,
- blocks: PropTypes.objectOf(PropTypes.shape({
- id: PropTypes.string,
- })),
- metadata: courseMetadataShape,
- fetchCourseMetadata: PropTypes.func.isRequired,
- fetchCourseBlocks: PropTypes.func.isRequired,
- match: PropTypes.shape({
- params: PropTypes.shape({
- courseUsageKey: PropTypes.string.isRequired,
- sequenceId: PropTypes.string,
- unitId: PropTypes.string,
- }).isRequired,
- }).isRequired,
-};
-
-CourseContainer.defaultProps = {
- blocks: {},
- metadata: undefined,
- courseId: undefined,
-};
-
-const mapStateToProps = state => ({
- courseId: state.courseBlocks.root,
- metadata: state.courseMeta,
- blocks: state.courseBlocks.blocks,
-});
-
-export default connect(mapStateToProps, {
- fetchCourseMetadata,
- fetchCourseBlocks,
-})(injectIntl(CourseContainer));
diff --git a/src/courseware/CoursewareContainer.jsx b/src/courseware/CoursewareContainer.jsx
new file mode 100644
index 00000000..bbe0cb60
--- /dev/null
+++ b/src/courseware/CoursewareContainer.jsx
@@ -0,0 +1,199 @@
+import React, { useEffect, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { useSelector, useDispatch } from 'react-redux';
+import { history, getConfig } from '@edx/frontend-platform';
+
+import { useRouteMatch } from 'react-router';
+import {
+ fetchCourse,
+ fetchSequence,
+} from '../data';
+import {
+ checkBlockCompletion,
+ saveSequencePosition,
+} from './data/thunks';
+import { useModel } from '../model-store';
+
+import Course from './course';
+
+import { sequenceIdsSelector, firstSequenceIdSelector } from './data/selectors';
+
+function useUnitNavigationHandler(courseUsageKey, sequenceId, unitId) {
+ const dispatch = useDispatch();
+ return useCallback((nextUnitId) => {
+ dispatch(checkBlockCompletion(courseUsageKey, sequenceId, unitId));
+ history.replace(`/course/${courseUsageKey}/${sequenceId}/${nextUnitId}`);
+ }, [courseUsageKey, sequenceId]);
+}
+
+function usePreviousSequence(sequenceId) {
+ const sequenceIds = useSelector(sequenceIdsSelector);
+ const sequences = useSelector(state => state.models.sequences);
+ if (!sequenceId || sequenceIds.length === 0) {
+ return null;
+ }
+ const sequenceIndex = sequenceIds.indexOf(sequenceId);
+ const previousSequenceId = sequenceIndex > 0 ? sequenceIds[sequenceIndex - 1] : null;
+ return previousSequenceId !== null ? sequences[previousSequenceId] : null;
+}
+
+function useNextSequence(sequenceId) {
+ const sequenceIds = useSelector(sequenceIdsSelector);
+ const sequences = useSelector(state => state.models.sequences);
+ if (!sequenceId || sequenceIds.length === 0) {
+ return null;
+ }
+ const sequenceIndex = sequenceIds.indexOf(sequenceId);
+ const nextSequenceId = sequenceIndex < sequenceIds.length - 1 ? sequenceIds[sequenceIndex + 1] : null;
+ return nextSequenceId !== null ? sequences[nextSequenceId] : null;
+}
+
+
+function useNextSequenceHandler(courseUsageKey, sequenceId) {
+ const nextSequence = useNextSequence(sequenceId);
+ const courseStatus = useSelector(state => state.courseware.courseStatus);
+ const sequenceStatus = useSelector(state => state.courseware.sequenceStatus);
+ return useCallback(() => {
+ if (nextSequence !== null) {
+ const nextUnitId = nextSequence.unitIds[0];
+ history.replace(`/course/${courseUsageKey}/${nextSequence.id}/${nextUnitId}`);
+ }
+ }, [courseStatus, sequenceStatus, sequenceId]);
+}
+
+function usePreviousSequenceHandler(courseUsageKey, sequenceId) {
+ const previousSequence = usePreviousSequence(sequenceId);
+ const courseStatus = useSelector(state => state.courseware.courseStatus);
+ const sequenceStatus = useSelector(state => state.courseware.sequenceStatus);
+ return useCallback(() => {
+ if (previousSequence !== null) {
+ const previousUnitId = previousSequence.unitIds[previousSequence.unitIds.length - 1];
+ history.replace(`/course/${courseUsageKey}/${previousSequence.id}/${previousUnitId}`);
+ }
+ }, [courseStatus, sequenceStatus, sequenceId]);
+}
+
+function useExamRedirect(sequenceId) {
+ const sequence = useModel('sequences', sequenceId);
+ const sequenceStatus = useSelector(state => state.courseware.sequenceStatus);
+ useEffect(() => {
+ if (sequenceStatus === 'loaded' && sequence.isTimeLimited) {
+ global.location.assign(sequence.lmsWebUrl);
+ }
+ }, [sequenceStatus, sequence]);
+}
+
+function useContentRedirect(courseStatus, sequenceStatus) {
+ const match = useRouteMatch();
+ const { courseUsageKey, sequenceId, unitId } = match.params;
+ const sequence = useModel('sequences', sequenceId);
+ const firstSequenceId = useSelector(firstSequenceIdSelector);
+ useEffect(() => {
+ if (courseStatus === 'loaded' && !sequenceId) {
+ history.replace(`/course/${courseUsageKey}/${firstSequenceId}`);
+ }
+ }, [courseStatus, sequenceId]);
+
+ useEffect(() => {
+ if (sequenceStatus === 'loaded' && sequenceId && !unitId) {
+ // The position may be null, in which case we'll just assume 0.
+ const unitIndex = sequence.position || 0;
+ const nextUnitId = sequence.unitIds[unitIndex];
+ history.replace(`/course/${courseUsageKey}/${sequence.id}/${nextUnitId}`);
+ }
+ }, [sequenceStatus]);
+}
+
+function useSavedSequencePosition(courseUsageKey, sequenceId, unitId) {
+ const dispatch = useDispatch();
+ const sequence = useModel('sequences', sequenceId);
+ const sequenceStatus = useSelector(state => state.courseware.sequenceStatus);
+ useEffect(() => {
+ if (sequenceStatus === 'loaded' && sequence.savePosition) {
+ const activeUnitIndex = sequence.unitIds.indexOf(unitId);
+ dispatch(saveSequencePosition(courseUsageKey, sequenceId, activeUnitIndex));
+ }
+ }, [unitId]);
+}
+
+/**
+ * Redirects the user away from the app if they don't have access to view this course.
+ *
+ * @param {*} courseStatus
+ * @param {*} course
+ */
+function useAccessDeniedRedirect(courseStatus, courseId) {
+ const course = useModel('courses', courseId);
+ useEffect(() => {
+ if (courseStatus === 'loaded' && !course.userHasAccess) {
+ global.location.assign(`${getConfig().LMS_BASE_URL}/courses/${course.id}/course/`);
+ }
+ }, [courseStatus, course]);
+}
+
+export default function CoursewareContainer() {
+ const { params } = useRouteMatch();
+ const {
+ courseUsageKey: routeCourseUsageKey,
+ sequenceId: routeSequenceId,
+ unitId: routeUnitId,
+ } = params;
+ const dispatch = useDispatch();
+
+ useEffect(() => {
+ dispatch(fetchCourse(routeCourseUsageKey));
+ }, [routeCourseUsageKey]);
+
+ useEffect(() => {
+ if (routeSequenceId) {
+ dispatch(fetchSequence(routeSequenceId));
+ }
+ }, [routeSequenceId]);
+
+ // The courseUsageKey and sequenceId in the store are the entities we currently have loaded.
+ // We get these two IDs from the store because until fetchCourse and fetchSequence below have
+ // finished their work, the IDs in the URL are not representative of what we should actually show.
+ // This is important particularly when switching sequences. Until a new sequence is fully loaded,
+ // there's information that we don't have yet - if we use the URL's sequence ID to tell the app
+ // which sequence is loaded, we'll instantly try to pull it out of the store and use it, before
+ // the sequenceStatus flag has even switched back to "loading", which will put our app into an
+ // invalid state.
+ const {
+ courseUsageKey,
+ sequenceId,
+ courseStatus,
+ sequenceStatus,
+ } = useSelector(state => state.courseware);
+
+ const nextSequenceHandler = useNextSequenceHandler(courseUsageKey, sequenceId);
+ const previousSequenceHandler = usePreviousSequenceHandler(courseUsageKey, sequenceId);
+ const unitNavigationHandler = useUnitNavigationHandler(courseUsageKey, sequenceId, routeUnitId);
+
+ useAccessDeniedRedirect(courseStatus, courseUsageKey);
+ useContentRedirect(courseStatus, sequenceStatus);
+ useExamRedirect(sequenceId);
+ useSavedSequencePosition(courseUsageKey, sequenceId, routeUnitId);
+
+ return (
+
+
+ );
+}
+
+CoursewareContainer.propTypes = {
+ match: PropTypes.shape({
+ params: PropTypes.shape({
+ courseUsageKey: PropTypes.string.isRequired,
+ sequenceId: PropTypes.string,
+ unitId: PropTypes.string,
+ }).isRequired,
+ }).isRequired,
+};
diff --git a/src/courseware/course/Course.jsx b/src/courseware/course/Course.jsx
index 294caa75..55aceb17 100644
--- a/src/courseware/course/Course.jsx
+++ b/src/courseware/course/Course.jsx
@@ -1,146 +1,122 @@
-import React, { useCallback } from 'react';
+import React from 'react';
import PropTypes from 'prop-types';
-import { history } from '@edx/frontend-platform';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+
+import { useSelector } from 'react-redux';
+import AlertList from '../../user-messages/AlertList';
+import { useLogistrationAlert } from '../../logistration-alert';
+import { useEnrollmentAlert } from '../../enrollment-alert';
+import PageLoading from '../../PageLoading';
+
+import InstructorToolbar from './InstructorToolbar';
+import Sequence from './sequence';
import CourseBreadcrumbs from './CourseBreadcrumbs';
-import SequenceContainer from './SequenceContainer';
-import { createSequenceIdList } from '../utils';
-import AlertList from '../../user-messages/AlertList';
-import CourseHeader from './CourseHeader';
+import { Header, CourseTabsNavigation } from '../../course-header';
import CourseSock from './course-sock';
-import CourseTabsNavigation from './CourseTabsNavigation';
-import InstructorToolbar from '../InstructorToolbar';
-import { useLogistrationAlert, useEnrollmentAlert } from '../../hooks';
+import messages from './messages';
+import { useModel } from '../../model-store';
const EnrollmentAlert = React.lazy(() => import('../../enrollment-alert'));
const LogistrationAlert = React.lazy(() => import('../../logistration-alert'));
-
-export default function Course({
+function Course({
courseId,
- courseNumber,
- courseName,
- courseOrg,
- courseUsageKey,
- isEnrolled,
- isStaff,
- models,
sequenceId,
- tabs,
unitId,
- verifiedMode,
+ nextSequenceHandler,
+ previousSequenceHandler,
+ unitNavigationHandler,
+ intl,
}) {
- const nextSequenceHandler = useCallback(() => {
- const sequenceIds = createSequenceIdList(models, courseId);
- const currentIndex = sequenceIds.indexOf(sequenceId);
- if (currentIndex < sequenceIds.length - 1) {
- const nextSequenceId = sequenceIds[currentIndex + 1];
- const nextSequence = models[nextSequenceId];
- const nextUnitId = nextSequence.children[0];
- history.push(`/course/${courseUsageKey}/${nextSequenceId}/${nextUnitId}`);
- }
- });
-
- const previousSequenceHandler = useCallback(() => {
- const sequenceIds = createSequenceIdList(models, courseId);
- const currentIndex = sequenceIds.indexOf(sequenceId);
- if (currentIndex > 0) {
- const previousSequenceId = sequenceIds[currentIndex - 1];
- const previousSequence = models[previousSequenceId];
- const previousUnitId = previousSequence.children[previousSequence.children.length - 1];
- history.push(`/course/${courseUsageKey}/${previousSequenceId}/${previousUnitId}`);
- }
- });
+ const course = useModel('courses', courseId);
+ const sequence = useModel('sequences', sequenceId);
+ const section = useModel('sections', sequence ? sequence.sectionId : null);
+ const unit = useModel('units', unitId);
useLogistrationAlert();
- useEnrollmentAlert(isEnrolled);
+ useEnrollmentAlert(courseId);
- return (
- <>
- state.courseware.courseStatus);
+
+ if (courseStatus === 'loading') {
+ return (
+
-
{courseName}
+{title}
- {course.children.map((chapterId) => (
- (
+
))}
@@ -88,28 +87,6 @@ export default function Outline({
);
}
-Outline.propTypes = {
- courseOrg: PropTypes.string.isRequired,
- courseNumber: PropTypes.string.isRequired,
- courseName: PropTypes.string.isRequired,
+CourseHome.propTypes = {
courseUsageKey: PropTypes.string.isRequired,
- courseId: PropTypes.string.isRequired,
- start: PropTypes.string.isRequired,
- end: PropTypes.string.isRequired,
- enrollmentStart: PropTypes.string.isRequired,
- enrollmentEnd: PropTypes.string.isRequired,
- enrollmentMode: PropTypes.string.isRequired,
- isEnrolled: PropTypes.bool,
- models: courseBlocksShape.isRequired,
- tabs: PropTypes.arrayOf(PropTypes.shape({
- slug: PropTypes.string.isRequired,
- priority: PropTypes.number.isRequired,
- title: PropTypes.string.isRequired,
- type: PropTypes.string.isRequired,
- url: PropTypes.string.isRequired,
- })).isRequired,
-};
-
-Outline.defaultProps = {
- isEnrolled: false,
};
diff --git a/src/course-home/CourseHomeContainer.jsx b/src/course-home/CourseHomeContainer.jsx
new file mode 100644
index 00000000..c2a0b344
--- /dev/null
+++ b/src/course-home/CourseHomeContainer.jsx
@@ -0,0 +1,54 @@
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { useDispatch, useSelector } from 'react-redux';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+
+import messages from './messages';
+import PageLoading from '../PageLoading';
+import CourseHome from './CourseHome';
+import { fetchCourse } from '../data';
+
+function CourseHomeContainer(props) {
+ const {
+ intl,
+ match,
+ } = props;
+
+ const dispatch = useDispatch();
+ useEffect(() => {
+ // The courseUsageKey from the URL is the course we WANT to load.
+ dispatch(fetchCourse(match.params.courseUsageKey));
+ }, [match.params.courseUsageKey]);
+
+ // The courseUsageKey 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.
+ const {
+ courseUsageKey,
+ courseStatus,
+ } = useSelector(state => state.courseware);
+
+ return (
+ <>
+ {courseStatus === 'loaded' ? (
+ {displayName}
+ {title}
+ {sequence.title}
+
+ );
+}
+
+SequenceLink.propTypes = {
+ id: PropTypes.string.isRequired,
+ courseUsageKey: PropTypes.string.isRequired,
+};
diff --git a/src/course-home/index.js b/src/course-home/index.js
new file mode 100644
index 00000000..5a034d17
--- /dev/null
+++ b/src/course-home/index.js
@@ -0,0 +1 @@
+export { default } from './CourseHomeContainer';
diff --git a/src/course-home/messages.js b/src/course-home/messages.js
new file mode 100644
index 00000000..a5d2a02b
--- /dev/null
+++ b/src/course-home/messages.js
@@ -0,0 +1,11 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+ 'learn.loading.outline': {
+ id: 'learn.loading.learning.sequence',
+ defaultMessage: 'Loading learning sequence...',
+ description: 'Message when learning sequence is being loaded',
+ },
+});
+
+export default messages;
diff --git a/src/courseware/CourseContainer.jsx b/src/courseware/CourseContainer.jsx
deleted file mode 100644
index 051c54ac..00000000
--- a/src/courseware/CourseContainer.jsx
+++ /dev/null
@@ -1,125 +0,0 @@
-import React, { useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { history, getConfig } from '@edx/frontend-platform';
-import { fetchCourseMetadata, courseMetadataShape } from '../data/course-meta';
-import { fetchCourseBlocks } from '../data/course-blocks';
-
-import messages from './messages';
-import PageLoading from '../PageLoading';
-import Course from './course/Course';
-
-function CourseContainer(props) {
- const {
- intl,
- match,
- courseId,
- blocks: models,
- metadata,
- } = props;
- const {
- courseUsageKey,
- sequenceId,
- unitId,
- } = match.params;
-
- useEffect(() => {
- props.fetchCourseMetadata(courseUsageKey);
- props.fetchCourseBlocks(courseUsageKey);
- }, [courseUsageKey]);
-
- useEffect(() => {
- if (courseId && !sequenceId) {
- // TODO: This is temporary until we get an actual activeSequenceId into the course model data.
- const course = models[courseId];
- const chapter = models[course.children[0]];
- const activeSequenceId = chapter.children[0];
- history.push(`/course/${courseUsageKey}/${activeSequenceId}`);
- }
- }, [courseUsageKey, courseId, sequenceId]);
-
- const metadataLoaded = metadata.fetchState === 'loaded';
- useEffect(() => {
- if (metadataLoaded && !metadata.userHasAccess) {
- global.location.assign(`${getConfig().LMS_BASE_URL}/courses/${courseUsageKey}/course/`);
- }
- }, [metadataLoaded]);
-
- // Whether or not the container is ready to render the Course.
- const ready = metadataLoaded && courseId && sequenceId;
-
- return (
- - {intl.formatMessage(messages['learn.course.load.failure'])} -
- ); - } - - return ( -
-
-
-
-
+ )}
+
+
+
+
+
+ );
+ }
+
+ // courseStatus 'failed' and any other unexpected course status.
+ return (
+ + {intl.formatMessage(messages['learn.course.load.failure'])} +
); } Course.propTypes = { - courseOrg: PropTypes.string.isRequired, - courseNumber: PropTypes.string.isRequired, - courseName: PropTypes.string.isRequired, - courseUsageKey: PropTypes.string.isRequired, - courseId: PropTypes.string.isRequired, - sequenceId: PropTypes.string.isRequired, + courseId: PropTypes.string, + sequenceId: PropTypes.string, unitId: PropTypes.string, - isEnrolled: PropTypes.bool, - isStaff: PropTypes.bool, - models: PropTypes.objectOf(PropTypes.shape({ - id: PropTypes.string.isRequired, - displayName: PropTypes.string.isRequired, - children: PropTypes.arrayOf(PropTypes.string), - parentId: PropTypes.string, - })).isRequired, - tabs: PropTypes.arrayOf(PropTypes.shape({ - slug: PropTypes.string.isRequired, - priority: PropTypes.number.isRequired, - title: PropTypes.string.isRequired, - type: PropTypes.string.isRequired, - url: PropTypes.string.isRequired, - })).isRequired, - verifiedMode: PropTypes.shape({ - price: PropTypes.number.isRequired, - currency: PropTypes.string.isRequired, - currencySymbol: PropTypes.string, - sku: PropTypes.string.isRequired, - upgradeUrl: PropTypes.string.isRequired, - }), + nextSequenceHandler: PropTypes.func.isRequired, + previousSequenceHandler: PropTypes.func.isRequired, + unitNavigationHandler: PropTypes.func.isRequired, + intl: intlShape.isRequired, }; Course.defaultProps = { - unitId: undefined, - isEnrolled: false, - isStaff: false, - verifiedMode: null, + courseId: null, + sequenceId: null, + unitId: null, }; + +export default injectIntl(Course); diff --git a/src/courseware/course/CourseBreadcrumbs.jsx b/src/courseware/course/CourseBreadcrumbs.jsx index 2db5ab50..2750b1cb 100644 --- a/src/courseware/course/CourseBreadcrumbs.jsx +++ b/src/courseware/course/CourseBreadcrumbs.jsx @@ -4,6 +4,8 @@ import { getConfig } from '@edx/frontend-platform'; import { FormattedMessage } from '@edx/frontend-platform/i18n'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faHome } from '@fortawesome/free-solid-svg-icons'; +import { useSelector } from 'react-redux'; +import { useModel } from '../../model-store'; function CourseBreadcrumb({ url, children, withSeparator, ...attrs @@ -30,27 +32,33 @@ CourseBreadcrumb.defaultProps = { withSeparator: false, }; - export default function CourseBreadcrumbs({ - courseUsageKey, courseId, sequenceId, models, + courseId, + sectionId, + sequenceId, }) { + const course = useModel('courses', courseId); + const sequence = useModel('sequences', sequenceId); + const section = useModel('sections', sectionId); + const courseStatus = useSelector(state => state.courseware.courseStatus); + const sequenceStatus = useSelector(state => state.courseware.sequenceStatus); + const links = useMemo(() => { - const sectionId = models[sequenceId].parentId; - return [sectionId, sequenceId].map((nodeId) => { - const node = models[nodeId]; - return { + if (courseStatus === 'loaded' && sequenceStatus === 'loaded') { + return [section, sequence].map((node) => ({ id: node.id, - label: node.displayName, - url: `${getConfig().LMS_BASE_URL}/courses/${courseUsageKey}/course/#${node.id}`, - }; - }); - }, [courseUsageKey, courseId, sequenceId, models]); + label: node.title, + url: `${getConfig().LMS_BASE_URL}/courses/${course.id}/course/#${node.id}`, + })); + } + return []; + }, [courseStatus, sequenceStatus]); return (