diff --git a/src/courseware/CoursewareContainer.jsx b/src/courseware/CoursewareContainer.jsx index 09afb13f..86e560a3 100644 --- a/src/courseware/CoursewareContainer.jsx +++ b/src/courseware/CoursewareContainer.jsx @@ -55,8 +55,13 @@ function useNextSequenceHandler(courseId, sequenceId) { const sequenceStatus = useSelector(state => state.courseware.sequenceStatus); return useCallback(() => { if (nextSequence !== null) { - const nextUnitId = nextSequence.unitIds[0]; - history.push(`/course/${courseId}/${nextSequence.id}/${nextUnitId}`); + if (nextSequence.unitIds.length > 0) { + const nextUnitId = nextSequence.unitIds[0]; + history.push(`/course/${courseId}/${nextSequence.id}/${nextUnitId}`); + } else { + // Some sequences have no units. This will show a blank page with prev/next buttons. + history.push(`/course/${courseId}/${nextSequence.id}`); + } } }, [courseStatus, sequenceStatus, sequenceId]); } @@ -67,8 +72,13 @@ function usePreviousSequenceHandler(courseId, sequenceId) { const sequenceStatus = useSelector(state => state.courseware.sequenceStatus); return useCallback(() => { if (previousSequence !== null) { - const previousUnitId = previousSequence.unitIds[previousSequence.unitIds.length - 1]; - history.push(`/course/${courseId}/${previousSequence.id}/${previousUnitId}`); + if (previousSequence.unitIds.length > 0) { + const previousUnitId = previousSequence.unitIds[previousSequence.unitIds.length - 1]; + history.push(`/course/${courseId}/${previousSequence.id}/${previousUnitId}`); + } else { + // Some sequences have no units. This will show a blank page with prev/next buttons. + history.push(`/course/${courseId}/${previousSequence.id}`); + } } }, [courseStatus, sequenceStatus, sequenceId]); } diff --git a/src/courseware/course/InstructorToolbar.jsx b/src/courseware/course/InstructorToolbar.jsx index 7b3ddb84..ac10c698 100644 --- a/src/courseware/course/InstructorToolbar.jsx +++ b/src/courseware/course/InstructorToolbar.jsx @@ -4,7 +4,6 @@ import { connect } from 'react-redux'; import { Collapsible } from '@edx/paragon'; function InstructorToolbar(props) { - // TODO: Only render this toolbar if the user is course staff if (!props.activeUnitLmsWebUrl) { return null; } diff --git a/src/courseware/course/sequence/Sequence.jsx b/src/courseware/course/sequence/Sequence.jsx index 5809d3eb..8ee537db 100644 --- a/src/courseware/course/sequence/Sequence.jsx +++ b/src/courseware/course/sequence/Sequence.jsx @@ -1,20 +1,19 @@ /* eslint-disable no-use-before-define */ import React, { - useEffect, useContext, Suspense, useState, + useEffect, useContext, useState, } from 'react'; import PropTypes from 'prop-types'; import { sendTrackEvent } from '@edx/frontend-platform/analytics'; import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; - import { useSelector } from 'react-redux'; -import Unit from './Unit'; -import { SequenceNavigation, UnitNavigation } from './sequence-navigation'; + import PageLoading from '../../../PageLoading'; -import messages from './messages'; import { UserMessagesContext, ALERT_TYPES } from '../../../user-messages'; import { useModel } from '../../../model-store'; -const ContentLock = React.lazy(() => import('./content-lock')); +import messages from './messages'; +import { SequenceNavigation, UnitNavigation } from './sequence-navigation'; +import SequenceContent from './SequenceContent'; function Sequence({ unitId, @@ -132,30 +131,13 @@ function Sequence({ }} />