Merge pull request #66 from tonymtz/next

Tomatoro: Next updates

components/organisms/timer/timer.component.tsx

@@ -5,7 +5,6 @@ import { Flex, Text } from 'theme-ui'
 import { useTimerContext } from '~/contexts/timer'
 import { useTimerStore } from '~/stores/time'
 import { formatTime } from '~/utils/timer.utils'
-import { track } from '~/utils/tracking.utils'
 
 import { Button, Controls, Donut } from './timer.styles'
 
@@ -17,19 +16,15 @@ export const Timer: FC = () => {
   const onToggleClick = () => {
     if (!isStarted) {
       onStartTimer()
-      track('$start')
     } else if (isRunning) {
       onStopTimer()
-      track('$pause')
     } else {
       onStartTimer()
-      track('$start')
     }
   }
 
   const onStopClick = () => {
     onResetTimer()
-    track('$done', { time: formatTime(time) })
   }
 
   return (

contexts/timer/timer-context.provider.tsx

@@ -4,6 +4,7 @@ import { useNotificationsContext } from '~/contexts/notifications'
 import { useSettingsStore } from '~/stores/settings'
 import { useTimerStore } from '~/stores/time'
 import { NOTIFICATION } from '~/utils/config'
+import { track } from '~/utils/tracking.utils'
 
 export const TimerContext = React.createContext<{
   onStartTimer(): void;
@@ -43,38 +44,41 @@ export const TimerProvider: React.FC<{ children: ReactNode }> = ({ children }) =
     }
     start()
     workerRef.current?.postMessage('start')
-  }, [reset, start, time])
+    track('$timer_start', { segment: currentSegment, time })
+  }, [currentSegment, reset, start, time])
 
   const onStopTimer = useCallback(() => {
     stop()
     workerRef.current?.postMessage('stop')
-  }, [stop])
+    track('$timer_stop', { segment: currentSegment, time })
+  }, [currentSegment, stop, time])
 
   const onResetTimer = useCallback(() => {
     reset()
     workerRef.current?.postMessage('stop')
-  }, [reset])
+    track('$timer_reset', { segment: currentSegment, time })
+  }, [currentSegment, reset, time])
 
   useEffect(() => {
     if (time < 1) {
       onStopTimer()
       notify(NOTIFICATION)
+      track('$timer_end', { segment: currentSegment, time })
     }
-  }, [notify, onStopTimer, time])
+  }, [currentSegment, notify, onStopTimer, time])
 
   const onSegmentChange = useCallback((totalTime: number) => {
     setTotalTime(totalTime)
     onResetTimer()
-  }, [onResetTimer, setTotalTime])
+    track('$segment_change', { segment: currentSegment, time })
+  }, [currentSegment, onResetTimer, setTotalTime, time])
 
   useEffect(() => {
     if (currentSegment === 'WORK') {
       onSegmentChange(workLength)
-    }
-    if (currentSegment === 'SHORT') {
+    } else if (currentSegment === 'SHORT') {
       onSegmentChange(shortLength)
-    }
-    if (currentSegment === 'LONG') {
+    } else if (currentSegment === 'LONG') {
       onSegmentChange(longLength)
     }
   }, [currentSegment, longLength, onSegmentChange, shortLength, workLength])

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tomatoro",
-  "version": "3.0.152",
+  "version": "3.0.154",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -21,9 +21,9 @@
     "axios": "1.4.0",
     "date-fns": "2.30.0",
     "eslint": "8.44.0",
-    "eslint-config-next": "13.4.7",
+    "eslint-config-next": "13.4.8",
     "framer-motion": "10.12.18",
-    "next": "13.4.7",
+    "next": "13.4.8",
     "next-translate": "~2.4.4",
     "next-translate-plugin": "~2.4.4",
     "posthog-js": "1.68.5",

utils/tracking.utils.ts

@@ -23,9 +23,11 @@ type TrackingEvent =
   | 'legacy_worker_uninstalled'
   | '$pageview'
   | '$language_changed'
-  | '$start'
-  | '$pause'
-  | '$done'
+  | '$timer_start'
+  | '$timer_stop'
+  | '$timer_reset'
+  | '$timer_end'
+  | '$segment_change'
   | '$settings_opened'
   | '$settings_closed'
   | '$settings_changed'