diff --git a/src/course-unit/hooks.jsx b/src/course-unit/hooks.jsx index 889d76b78..b1e6cea33 100644 --- a/src/course-unit/hooks.jsx +++ b/src/course-unit/hooks.jsx @@ -213,6 +213,24 @@ export const useCourseUnit = ({ courseId, blockId }) => { } }, [isMoveModalOpen]); + useEffect(() => { + const handlePageRefreshUsingStorage = (event) => { + // ignoring tests for if block, because it triggers when someone + // edits the component using editor which has a separate store + /* istanbul ignore next */ + if (event.key === 'courseRefreshTriggerOnComponentEditSave') { + dispatch(fetchCourseSectionVerticalData(blockId, sequenceId)); + dispatch(fetchCourseVerticalChildrenData(blockId, isSplitTestType)); + localStorage.removeItem(event.key); + } + }; + + window.addEventListener('storage', handlePageRefreshUsingStorage); + return () => { + window.removeEventListener('storage', handlePageRefreshUsingStorage); + }; + }, [blockId, sequenceId, isSplitTestType]); + return { sequenceId, courseUnit, diff --git a/src/editors/data/redux/thunkActions/app.js b/src/editors/data/redux/thunkActions/app.js index 8da9f24b7..4c5079a5a 100644 --- a/src/editors/data/redux/thunkActions/app.js +++ b/src/editors/data/redux/thunkActions/app.js @@ -125,6 +125,16 @@ export const saveBlock = (content, returnToUnit) => (dispatch) => { content, onSuccess: (response) => { dispatch(actions.app.setSaveResponse(response)); + const parsedData = JSON.parse(response.config.data); + if (parsedData?.has_changes) { + const storageKey = 'courseRefreshTriggerOnComponentEditSave'; + localStorage.setItem(storageKey, Date.now()); + + window.dispatchEvent(new StorageEvent('storage', { + key: storageKey, + newValue: Date.now().toString(), + })); + } returnToUnit(response.data); }, })); diff --git a/src/editors/data/redux/thunkActions/app.test.js b/src/editors/data/redux/thunkActions/app.test.js index 35debc7f3..3f8dc10c9 100644 --- a/src/editors/data/redux/thunkActions/app.test.js +++ b/src/editors/data/redux/thunkActions/app.test.js @@ -352,7 +352,11 @@ describe('app thunkActions', () => { }); it('dispatches actions.app.setSaveResponse with response and then calls returnToUnit', () => { dispatch.mockClear(); - const response = 'testRESPONSE'; + const mockParsedData = { has_changes: true }; + const response = { + config: { data: JSON.stringify(mockParsedData) }, + data: {}, + }; calls[1][0].saveBlock.onSuccess(response); expect(dispatch).toHaveBeenCalledWith(actions.app.setSaveResponse(response)); expect(returnToUnit).toHaveBeenCalled();