fix: Use new slug for publish view

techmatters · Nov 13, 2024 · 9c140fb · 9c140fb
1 parent 7d38e24
commit 9c140fb
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 6 deletions.
diff --git 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 } = useStoryMapConfigContext();
+  const { storyMap, setPreview, slug } = useStoryMapConfigContext();
   const [anchorEl, setAnchorEl] = useState(null);
   const [openShareDialog, setOpenShareDialog] = useState(false);
 
@@ -130,7 +130,7 @@ const ActionsMenu = () => {
         <MenuItem
           dense
           component={Link}
-          href={generateStoryMapUrl(storyMap)}
+          href={generateStoryMapUrl({ ...storyMap, slug })}
           target="_blank"
         >
           {t('storyMap.form_view_published_button')}

diff --git a/src/storyMap/components/StoryMapForm/storyMapConfigContext.js b/src/storyMap/components/StoryMapForm/storyMapConfigContext.js
@@ -34,6 +34,7 @@ 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) => {
@@ -84,6 +85,8 @@ export const StoryMapConfigContextProvider = props => {
       init,
       saved,
       isDirty,
+      slug,
+      setSlug,
     }),
     [
       storyMap,
@@ -96,6 +99,7 @@ export const StoryMapConfigContextProvider = props => {
       setConfigWrapper,
       isDirty,
       saved,
+      slug,
     ]
   );
 

diff --git a/src/storyMap/components/StoryMapUpdate.js b/src/storyMap/components/StoryMapUpdate.js
@@ -39,15 +39,18 @@ import {
 } from 'storyMap/storyMapUtils';
 
 import StoryMapForm from './StoryMapForm';
-import { StoryMapConfigContextProvider } from './StoryMapForm/storyMapConfigContext';
+import {
+  StoryMapConfigContextProvider,
+  useStoryMapConfigContext,
+} from './StoryMapForm/storyMapConfigContext';
 
 const StoryMapUpdate = props => {
   const navigate = useNavigate();
   const dispatch = useDispatch();
   const { t } = useTranslation();
   const { trackEvent } = useAnalytics();
-  const { storyMap } = props;
   const [saved, setSaved] = useState();
+  const { storyMap, setSlug } = useStoryMapConfigContext();
 
   useDocumentTitle(
     t('storyMap.edit_document_title', {
@@ -92,10 +95,11 @@ 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]);
+  }, [storyMap, navigate, trackEvent, saved, t, dispatch, setSlug]);
 
   const save = useCallback(
     (config, mediaFiles, publish) =>
@@ -174,7 +178,7 @@ const ContextWrapper = props => {
       baseConfig={storyMap.config}
       storyMap={storyMap}
     >
-      <StoryMapUpdate {...props} storyMap={storyMap} />
+      <StoryMapUpdate {...props} />
     </StoryMapConfigContextProvider>
   );
 };