diff --git a/src/storyMap/components/StoryMapForm/TopBar.js b/src/storyMap/components/StoryMapForm/TopBar.js index 021350d7a..460f10381 100644 --- a/src/storyMap/components/StoryMapForm/TopBar.js +++ b/src/storyMap/components/StoryMapForm/TopBar.js @@ -81,7 +81,7 @@ const SaveStatus = props => { const ActionsMenu = () => { const { t } = useTranslation(); - const { storyMap, setPreview, slug } = useStoryMapConfigContext(); + const { storyMap, setPreview } = useStoryMapConfigContext(); const [anchorEl, setAnchorEl] = useState(null); const [openShareDialog, setOpenShareDialog] = useState(false); @@ -130,7 +130,7 @@ const ActionsMenu = () => { {t('storyMap.form_view_published_button')} diff --git a/src/storyMap/components/StoryMapForm/index.js b/src/storyMap/components/StoryMapForm/index.js index 7431e093d..5fbeba7bc 100644 --- a/src/storyMap/components/StoryMapForm/index.js +++ b/src/storyMap/components/StoryMapForm/index.js @@ -39,7 +39,7 @@ import TopBarPreview from './TopBarPreview'; import theme from 'theme'; -const AUTO_SAVE_DEBOUNCE = 1000; +const AUTO_SAVE_DEBOUNCE = 3000; const BASE_CHAPTER = { alignment: 'left', diff --git a/src/storyMap/components/StoryMapForm/storyMapConfigContext.js b/src/storyMap/components/StoryMapForm/storyMapConfigContext.js index 893e6520d..cf33b33cf 100644 --- a/src/storyMap/components/StoryMapForm/storyMapConfigContext.js +++ b/src/storyMap/components/StoryMapForm/storyMapConfigContext.js @@ -34,7 +34,6 @@ export const StoryMapConfigContextProvider = props => { const [preview, setPreview] = useState(false); const [mediaFiles, setMediaFiles] = useState({}); const [isDirty, setIsDirty] = useState(false); - const [slug, setSlug] = useState(storyMap.slug); const init = useRef(false); const addMediaFile = useCallback((content, file) => { @@ -43,12 +42,16 @@ export const StoryMapConfigContextProvider = props => { return id; }, []); + const clearMediaFiles = useCallback(() => { + setMediaFiles({}); + }, []); + const getMediaFile = useCallback(id => mediaFiles[id]?.content, [mediaFiles]); const saved = useCallback(() => setIsDirty(false), []); const setConfigWrapper = useCallback( - newConfigSetter => { + (newConfigSetter, dirty = true) => { setConfig(currentConfig => { const newConfig = typeof newConfigSetter === 'function' @@ -67,7 +70,7 @@ export const StoryMapConfigContextProvider = props => { dataLayers: _.pick(usedDataLayersIds, newConfig.dataLayers), }; }); - setIsDirty(true); + setIsDirty(dirty); }, [setConfig] ); @@ -82,11 +85,10 @@ export const StoryMapConfigContextProvider = props => { mediaFiles, addMediaFile, getMediaFile, + clearMediaFiles, init, saved, isDirty, - slug, - setSlug, }), [ storyMap, @@ -95,11 +97,11 @@ export const StoryMapConfigContextProvider = props => { mediaFiles, addMediaFile, getMediaFile, + clearMediaFiles, init, setConfigWrapper, isDirty, saved, - slug, ] ); diff --git a/src/storyMap/components/StoryMapUpdate.js b/src/storyMap/components/StoryMapUpdate.js index 85262d453..124297047 100644 --- a/src/storyMap/components/StoryMapUpdate.js +++ b/src/storyMap/components/StoryMapUpdate.js @@ -50,7 +50,7 @@ const StoryMapUpdate = props => { const { t } = useTranslation(); const { trackEvent } = useAnalytics(); const [saved, setSaved] = useState(); - const { storyMap, setSlug } = useStoryMapConfigContext(); + const { storyMap, setConfig, clearMediaFiles } = useStoryMapConfigContext(); useDocumentTitle( t('storyMap.edit_document_title', { @@ -86,8 +86,6 @@ const StoryMapUpdate = props => { } if (title !== storyMap?.title) { - // window.location.replace(generateStoryMapEditUrl({ slug, storyMapId })); - // navigate(generateStoryMapEditUrl({ slug, storyMapId })); window.history.pushState( null, t('storyMap.edit_document_title', { @@ -95,11 +93,8 @@ const StoryMapUpdate = props => { }), generateStoryMapEditUrl({ slug, storyMapId }) ); - setSlug(slug); - // TODO data is not pudated after save - // dispatch(fetchStoryMapForm({ slug, storyMapId })); } - }, [storyMap, navigate, trackEvent, saved, t, dispatch, setSlug]); + }, [storyMap, navigate, trackEvent, saved, t, dispatch]); const save = useCallback( (config, mediaFiles, publish) => @@ -119,6 +114,7 @@ const StoryMapUpdate = props => { const storyMapId = _.get('payload.story_map_id', data); const title = _.get('payload.title', data); const id = _.get('payload.id', data); + const config = _.get('payload.configuration', data); setSaved({ id, @@ -127,11 +123,13 @@ const StoryMapUpdate = props => { storyMapId, published: publish, }); + clearMediaFiles(); + setConfig(config, false); return; } return Promise.reject(data); }), - [storyMap?.id, dispatch] + [storyMap?.id, dispatch, clearMediaFiles, setConfig] ); const onPublish = useCallback( (config, mediaFiles) => save(config, mediaFiles, true),