diff --git a/src/courseware/CoursewareContainer.jsx b/src/courseware/CoursewareContainer.jsx index bb7d5a9b..94d03bed 100644 --- a/src/courseware/CoursewareContainer.jsx +++ b/src/courseware/CoursewareContainer.jsx @@ -17,6 +17,7 @@ import { import { TabPage } from '../tab-page'; import Course from './course'; +import { handleNextSectionCelebration } from './course/celebration'; const checkExamRedirect = memoize((sequenceStatus, sequence) => { if (sequenceStatus === 'loaded') { @@ -125,15 +126,28 @@ class CoursewareContainer extends Component { } handleNextSequenceClick = () => { - const { nextSequence, courseId } = this.props; + const { + course, + courseId, + nextSequence, + sequence, + sequenceId, + } = this.props; + if (nextSequence !== null) { + let nextUnitId = null; if (nextSequence.unitIds.length > 0) { - const nextUnitId = nextSequence.unitIds[0]; + [nextUnitId] = nextSequence.unitIds; 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}`); } + + const celebrateFirstSection = course && course.celebrations && course.celebrations.firstSection; + if (celebrateFirstSection && sequence.sectionId !== nextSequence.sectionId) { + handleNextSectionCelebration(sequenceId, nextSequence.id, nextUnitId); + } } } diff --git a/src/courseware/course/Course.jsx b/src/courseware/course/Course.jsx index c6dc221f..217cdc72 100644 --- a/src/courseware/course/Course.jsx +++ b/src/courseware/course/Course.jsx @@ -1,6 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { Helmet } from 'react-helmet'; +import { useDispatch } from 'react-redux'; import { getConfig } from '@edx/frontend-platform'; import { AlertList } from '../../generic/user-messages'; @@ -52,8 +53,9 @@ function Course({ verifiedMode, } = course; + const dispatch = useDispatch(); const celebrateFirstSection = celebrations && celebrations.firstSection; - const celebrationOpen = shouldCelebrateOnSectionLoad(courseId, sequenceId, unitId, celebrateFirstSection); + const celebrationOpen = shouldCelebrateOnSectionLoad(courseId, sequenceId, unitId, celebrateFirstSection, dispatch); return ( <> diff --git a/src/courseware/course/celebration/utils.jsx b/src/courseware/course/celebration/utils.jsx index e8bf911b..9fdebf34 100644 --- a/src/courseware/course/celebration/utils.jsx +++ b/src/courseware/course/celebration/utils.jsx @@ -3,6 +3,7 @@ import { getAuthenticatedUser } from '@edx/frontend-platform/auth'; import { postFirstSectionCelebrationComplete } from './data/api'; import { clearLocalStorage, getLocalStorage, setLocalStorage } from '../../../data/localStorage'; +import { updateModel } from '../../../generic/model-store'; const CELEBRATION_LOCAL_STORAGE_KEY = 'CelebrationModal.showOnSectionLoad'; @@ -29,7 +30,7 @@ function recordFirstSectionCelebration(courseId) { // Looks at local storage to see whether we just came from the end of a section. // Note! This does have side effects (will clear some local storage and may start an api call). -function shouldCelebrateOnSectionLoad(courseId, sequenceId, unitId, celebrateFirstSection) { +function shouldCelebrateOnSectionLoad(courseId, sequenceId, unitId, celebrateFirstSection, dispatch) { const celebrationIds = getLocalStorage(CELEBRATION_LOCAL_STORAGE_KEY); if (!celebrationIds) { return false; @@ -46,6 +47,17 @@ function shouldCelebrateOnSectionLoad(courseId, sequenceId, unitId, celebrateFir if (sequenceId !== prevSequenceId && !onTargetUnit) { // Don't clear until we move off of current/prev sequence clearLocalStorage(CELEBRATION_LOCAL_STORAGE_KEY); + + // Update our local copy of course data from LMS + dispatch(updateModel({ + modelType: 'courses', + model: { + id: courseId, + celebrations: { + firstSection: false, + }, + }, + })); } return shouldCelebrate;