feat/posthog: Fixed month scroll issue

memser-spaceport · Mar 13, 2024 · e497ed1 · e497ed1
1 parent 8d9fa3f
commit e497ed1
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 7 deletions.
diff --git a/analytics/events.analytics.ts b/analytics/events.analytics.ts
@@ -5,8 +5,9 @@ export default function useEventsAnalytics() {
   const events = {
     EVENT_CARD_CLICKED: "EVENT_CARD_CLICKED",
     EVENT_CARD_LINK_CLICKED: "EVENT_CARD_LINK_CLICKED",
-    EVENT_CALENDAR_MONTH_MENU_CLICKED: "EVENT_CALENDAR_MONTH_MENU_CLICKED",
-    EVENT_CALENDAR_MONTH_MENUITEM_CLICKED: "EVENT_CALENDAR_MONTH_MENUITEM_CLICKED"
+    EVENT_TIMELINE_MONTH_MENU_CLICKED: "EVENT_TIMELINE_MONTH_MENU_CLICKED",
+    EVENT_TIMELINE_MONTH_MENUITEM_CLICKED: "EVENT_TIMELINE_MONTH_MENUITEM_CLICKED",
+    EVENT_CALENDAR_MONTH_NAV: "EVENT_CALENDAR_MONTH_NAV"
   };
 
   const captureEvent = (eventName: string, eventParams = {}) => {
@@ -29,14 +30,20 @@ export default function useEventsAnalytics() {
   }
 
   function onMonthSelected(type, value) {
-    captureEvent(events.EVENT_CALENDAR_MONTH_MENUITEM_CLICKED, {
+    captureEvent(events.EVENT_TIMELINE_MONTH_MENUITEM_CLICKED, {
         menuType: type,
         menuValue: value
     })
   }
 
   function onMonthMenuClicked() {
-    captureEvent(events.EVENT_CALENDAR_MONTH_MENU_CLICKED)
+    captureEvent(events.EVENT_TIMELINE_MONTH_MENU_CLICKED)
+  }
+
+  function onCalendarMonthNav(direction) {
+    captureEvent(events.EVENT_CALENDAR_MONTH_NAV, {
+      direction
+    })
   }
 
   function onCalendarCardClicked(eventInfo) {
@@ -50,6 +57,7 @@ export default function useEventsAnalytics() {
     onCardLinkClicked,
     onMonthSelected,
     onMonthMenuClicked,
-    onCalendarCardClicked
+    onCalendarCardClicked,
+    onCalendarMonthNav
   };
 }
diff --git a/components/page/home/hp-calendar.tsx b/components/page/home/hp-calendar.tsx
@@ -18,7 +18,7 @@ function HpCalendar(props) {
     const { state } = useContext(HpContext)
     const {filters} = state;
     const currentYear = filters.year;
-    const {onCalendarCardClicked} = useEventsAnalytics()
+    const {onCalendarCardClicked, onCalendarMonthNav} = useEventsAnalytics()
 
     const onMonthNavigate = (type) => {
         const calendarElement: any = calenderRef?.current
@@ -27,11 +27,13 @@ function HpCalendar(props) {
             if (monthIndex - 1 > -1) {
                 ca.prev()
                 setMonthIndex(v => v - 1)
+                onCalendarMonthNav("previous")
             }
         } else {
             if (monthIndex + 1 < monthNames.length) {
                 ca.next()
                 setMonthIndex(v => v + 1)
+                onCalendarMonthNav("next")
             }
         }
     }

diff --git a/components/page/home/hp-month-box.tsx b/components/page/home/hp-month-box.tsx
@@ -23,6 +23,7 @@ function HpMonthBox(props) {
     }
 
     const onNavigate = (type, index, e) => {
+        const selectedMonthInfo = monthsAvailable.find(v => v.index === index);
         e.stopPropagation()
         if(index === -1) {
             return;
@@ -69,7 +70,7 @@ function HpMonthBox(props) {
         } else if (type === 'direct') {
             const scrollItem = document.getElementById(`m-${index}`);
             if (scrollItem) {
-                onMonthSelected("dynamic", monthsAvailable[index - 1].name)
+                onMonthSelected("dynamic", selectedMonthInfo.name)
                 scrollItem.scrollIntoView({ behavior: "smooth", block: "start" })
             }
         }