From 209774faaa2e2a3696649486148bc877573a15ec Mon Sep 17 00:00:00 2001
From: Jose Buitron <jose.buitron@gmail.com>
Date: Wed, 27 Sep 2023 14:41:20 -0500
Subject: [PATCH] feat: Added event to track story maps chapter move

---
 src/storyMap/components/StoryMapForm/index.js | 44 ++++++++++++-------
 1 file changed, 29 insertions(+), 15 deletions(-)

diff --git a/src/storyMap/components/StoryMapForm/index.js b/src/storyMap/components/StoryMapForm/index.js
index af32711d3..fbb50d086 100644
--- a/src/storyMap/components/StoryMapForm/index.js
+++ b/src/storyMap/components/StoryMapForm/index.js
@@ -22,6 +22,7 @@ import { v4 as uuidv4 } from 'uuid';
 import { Grid, useMediaQuery } from '@mui/material';
 
 import PageLoader from 'layout/PageLoader';
+import { useAnalytics } from 'monitoring/analytics';
 import NavigationBlockedDialog from 'navigation/components/NavigationBlockedDialog';
 import { useNavigationBlocker } from 'navigation/navigationContext';
 import { isChapterEmpty } from 'storyMap/storyMapUtils';
@@ -85,6 +86,7 @@ const Preview = props => {
 
 const StoryMapForm = props => {
   const { t } = useTranslation();
+  const { trackEvent } = useAnalytics();
   const isSmall = useMediaQuery(theme.breakpoints.down('md'));
   const { onPublish, onSaveDraft } = props;
   const { saving } = useSelector(_.get('storyMap.form'));
@@ -176,22 +178,34 @@ const StoryMapForm = props => {
 
   const onMoveChapter = useCallback(
     (id, index) => {
-      setConfig(config => ({
-        ...config,
-        chapters: (() => {
-          const withoutChapter = config.chapters.filter(
-            chapter => chapter.id !== id
-          );
-          const newChapters = [
-            ..._.slice(0, index, withoutChapter),
-            config.chapters.find(chapter => chapter.id === id),
-            ..._.slice(index, withoutChapter.length, withoutChapter),
-          ];
-          return newChapters;
-        })(),
-      }));
+      setConfig(config => {
+        const fromIndex = config.chapters.findIndex(
+          chapter => chapter.id === id
+        );
+        if (fromIndex === index) {
+          return config;
+        }
+        const withoutChapter = config.chapters.filter(
+          chapter => chapter.id !== id
+        );
+        const newChapters = [
+          ..._.slice(0, index, withoutChapter),
+          config.chapters.find(chapter => chapter.id === id),
+          ..._.slice(index, withoutChapter.length, withoutChapter),
+        ];
+        const toIndex = newChapters.findIndex(chapter => chapter.id === id);
+        trackEvent('storymap.chapter.move', {
+          props: {
+            distance: toIndex - fromIndex,
+          },
+        });
+        return {
+          ...config,
+          chapters: newChapters,
+        };
+      });
     },
-    [setConfig]
+    [setConfig, trackEvent]
   );
 
   const onPublishWrapper = useCallback(() => {