diff --git a/src/course-unit/add-component/AddComponent.jsx b/src/course-unit/add-component/AddComponent.jsx index 26c96ee8e..e0770515e 100644 --- a/src/course-unit/add-component/AddComponent.jsx +++ b/src/course-unit/add-component/AddComponent.jsx @@ -1,13 +1,13 @@ import { useCallback, useState } from 'react'; import PropTypes from 'prop-types'; -import { useSelector } from 'react-redux'; +import { useDispatch, useSelector } from 'react-redux'; import { getConfig } from '@edx/frontend-platform'; import { useIntl, FormattedMessage } from '@edx/frontend-platform/i18n'; import { ActionRow, Button, StandardModal, useToggle, } from '@openedx/paragon'; -import { getCourseSectionVertical } from '../data/selectors'; +import { getCourseSectionVertical, getCourseUnitData } from '../data/selectors'; import { useWaffleFlags } from '../../data/apiHooks'; import { COMPONENT_TYPES } from '../../generic/block-type-utils/constants'; import ComponentModalView from './add-component-modals/ComponentModalView'; @@ -20,6 +20,7 @@ import { useIframe } from '../../generic/hooks/context/hooks'; import { useEventListener } from '../../generic/hooks'; import VideoSelectorPage from '../../editors/VideoSelectorPage'; import EditorPage from '../../editors/EditorPage'; +import { fetchCourseSectionVerticalData } from '../data/thunk'; const AddComponent = ({ parentLocator, @@ -29,6 +30,8 @@ const AddComponent = ({ handleCreateNewCourseXBlock, }) => { const intl = useIntl(); + const dispatch = useDispatch(); + const [isOpenAdvanced, openAdvanced, closeAdvanced] = useToggle(false); const [isOpenHtml, openHtml, closeHtml] = useToggle(false); const [isOpenOpenAssessment, openOpenAssessment, closeOpenAssessment] = useToggle(false); @@ -47,6 +50,9 @@ const AddComponent = ({ const { sendMessageToIframe } = useIframe(); const { useVideoGalleryFlow } = useWaffleFlags(courseId ?? undefined); + const courseUnit = useSelector(getCourseUnitData); + const sequenceId = courseUnit?.ancestorInfo?.ancestors?.[0]?.id; + const receiveMessage = useCallback(({ data: { type, payload } }) => { if (type === messageTypes.showMultipleComponentPicker) { showSelectLibraryContentModal(); @@ -68,8 +74,16 @@ const AddComponent = ({ closeXBlockEditorModal(); closeVideoSelectorModal(); sendMessageToIframe(messageTypes.refreshXBlock, null); + dispatch(fetchCourseSectionVerticalData(blockId, sequenceId)); }, [closeXBlockEditorModal, closeVideoSelectorModal, sendMessageToIframe]); + const onXBlockCancel = useCallback(/* istanbul ignore next */ () => { + // ignoring tests because it triggers when someone closes the editor which has a separate store + closeXBlockEditorModal(); + closeVideoSelectorModal(); + dispatch(fetchCourseSectionVerticalData(blockId, sequenceId)); + }, [closeXBlockEditorModal, closeVideoSelectorModal, sendMessageToIframe, blockId, sequenceId]); + const handleLibraryV2Selection = useCallback((selection) => { handleCreateNewCourseXBlock({ type: COMPONENT_TYPES.libraryV2, @@ -262,7 +276,7 @@ const AddComponent = ({ blockId={newBlockId} studioEndpointUrl={getConfig().STUDIO_BASE_URL} lmsEndpointUrl={getConfig().LMS_BASE_URL} - onClose={closeXBlockEditorModal} + onClose={onXBlockCancel} returnFunction={/* istanbul ignore next */ () => onXBlockSave} />