fix: Use router state to track page source

techmatters · Sep 28, 2023 · 983d562 · 983d562
1 parent 490db3e
commit 983d562
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 9 deletions.
diff --git a/src/common/components/CardActionRouterLink.js b/src/common/components/CardActionRouterLink.js
@@ -18,7 +18,7 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import { Button, CardActions } from '@mui/material';
 
-const CardActionRouterLink = ({ label, to }) => {
+const CardActionRouterLink = ({ label, to, state }) => {
   return (
     <CardActions
       sx={{
@@ -29,6 +29,7 @@ const CardActionRouterLink = ({ label, to }) => {
       <Button
         component={Link}
         to={to}
+        state={state}
         sx={{
           fontWeight: 200,
           width: '100%',

diff --git a/src/home/components/HomeCard.js b/src/home/components/HomeCard.js
@@ -118,14 +118,19 @@ const HomeCard = ({
             size="medium"
             sx={{ color: 'white' }}
             to={action.to}
+            state={action.pathState}
           >
             {action.label}
           </RouterButton>
         </CardActions>
       ) : (
         <>
           <Divider aria-hidden="false" />
-          <CardActionRouterLink label={action.label} to={action.to} />
+          <CardActionRouterLink
+            label={action.label}
+            to={action.to}
+            state={action.pathState}
+          />
         </>
       ))}
   </Card>

diff --git a/src/storyMap/components/StoryMapNew.js b/src/storyMap/components/StoryMapNew.js
@@ -18,7 +18,7 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import _ from 'lodash/fp';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
-import { useNavigate, useSearchParams } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { Paper, useMediaQuery } from '@mui/material';
 
 import { useDocumentTitle } from 'common/document';
@@ -93,21 +93,21 @@ const StoryMapNew = () => {
   const dispatch = useDispatch();
   const { t } = useTranslation();
   const navigate = useNavigate();
+  const { state: locationState } = useLocation();
   const { trackEvent } = useAnalytics();
-  const [searchParams] = useSearchParams();
   const [saved, setSaved] = useState();
 
   useDocumentTitle(t('storyMap.new_document_title'));
 
   useEffect(() => {
-    const source = searchParams.get('source') || 'direct';
+    const source = locationState?.source || 'direct';
     trackEvent('storymap.start', {
       props: {
         [ILM_OUTPUT_PROP]: LANDSCAPE_NARRATIVES,
         source,
       },
     });
-  }, [trackEvent, searchParams]);
+  }, [trackEvent, locationState]);
 
   useEffect(() => {
     if (!saved) {

diff --git a/src/storyMap/components/StoryMapsCard.js b/src/storyMap/components/StoryMapsCard.js
@@ -240,7 +240,8 @@ const StoryMapsCard = ({ title, storyMaps, showCreate = true }) => {
     () =>
       showCreate && {
         label: t('storyMap.home_create'),
-        to: 'tools/story-maps/new?source=home_page',
+        to: 'tools/story-maps/new',
+        pathState: { source: 'home_page' },
       },
     [t, showCreate]
   );

diff --git a/src/storyMap/components/StoryMapsHomeCardDefault.js b/src/storyMap/components/StoryMapsHomeCardDefault.js
@@ -31,7 +31,8 @@ const StoryMapsHomeCardDefault = () => {
       titleId="story-maps-default-title"
       action={{
         label: t('storyMap.home_create'),
-        to: 'tools/story-maps/new?source=home_page',
+        to: 'tools/story-maps/new',
+        pathState: { source: 'home_page' },
       }}
       image={{
         src: storyMapImage,

diff --git a/src/storyMap/components/StoryMapsToolHome.js b/src/storyMap/components/StoryMapsToolHome.js
@@ -105,7 +105,8 @@ const StoryMapsToolsHome = () => {
               <Button
                 variant="contained"
                 component={Link}
-                to="/tools/story-maps/new?source=story_maps_page"
+                to="/tools/story-maps/new"
+                state={{ source: 'story_maps_page' }}
                 sx={{ mt: 2, mb: 3 }}
               >
                 {t('storyMap.tool_home_create_button')}