tomatoros counter

components/molecules/tomato-counter/index.ts

@@ -0,0 +1 @@
+export * from './tomato-counter.component'

components/molecules/tomato-counter/tomato-counter.component.tsx

@@ -0,0 +1,18 @@
+import { FC } from 'react'
+import { Flex } from 'theme-ui'
+
+import { Interval, useIntervalsStore } from '~/stores/intervals'
+
+export const TomatoCounter: FC = () => {
+  const { intervals } = useIntervalsStore()
+
+  function isWorkInterval (interval: Interval) {
+    return interval.type === 'WORK'
+  }
+
+  return (
+    <Flex sx={ { gap: '1em', justifyContent: 'center' } }>
+      <h3>Tomatoros: { intervals.filter(isWorkInterval).length }</h3>
+    </Flex>
+  )
+}

contexts/timer/timer-context.provider.tsx

@@ -1,6 +1,7 @@
 import React, { ReactNode, useCallback, useEffect, useRef } from 'react'
 
 import { useNotificationsContext } from '~/contexts/notifications'
+import { useIntervalsStore } from '~/stores/intervals'
 import { useSettingsStore } from '~/stores/settings'
 import { useTimerStore } from '~/stores/time'
 import { NOTIFICATION } from '~/utils/config'
@@ -25,6 +26,7 @@ export const useTimerContext = () => {
 
 export const TimerProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
   const { notify } = useNotificationsContext()
+  const { addInterval } = useIntervalsStore()
   const { reset, setTotalTime, start, stop, tick, time } = useTimerStore()
   const [currentSegment, workLength, shortLength, longLength] = useSettingsStore(state => [
     state.currentSegment,
@@ -58,9 +60,12 @@ export const TimerProvider: React.FC<{ children: ReactNode }> = ({ children }) =
   useEffect(() => {
     if (time < 1) {
       onStopTimer()
+      addInterval({
+        type: currentSegment,
+      })
       notify(NOTIFICATION)
     }
-  }, [notify, onStopTimer, time])
+  }, [addInterval, currentSegment, notify, onStopTimer, time])
 
   const onSegmentChange = useCallback((totalTime: number) => {
     setTotalTime(totalTime)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tomatoro",
-  "version": "3.0.184",
+  "version": "3.0.185",
   "private": true,
   "scripts": {
     "dev": "next dev",

pages/index.tsx

@@ -4,6 +4,7 @@ import React from 'react'
 import { Box, Divider } from 'theme-ui'
 
 import { Screen } from '~/components/atoms/screen'
+import { TomatoCounter } from '~/components/molecules/tomato-counter'
 import { NotificationsWarn } from '~/components/organisms/notifications-warn'
 import { GetInTouch } from '~/components/templates/get-in-touch'
 import { HowItWorks } from '~/components/templates/how-it-works'
@@ -34,6 +35,7 @@ export default function Home ({ banners }: { banners: Banner[] }) {
       <Box pt={ 4 } pb={ 5 }>
         <NotificationsWarn/>
         <TimerWithSelector/>
+        <TomatoCounter/>
       </Box>
 
       <Divider/>

stores/intervals/index.ts

@@ -0,0 +1,2 @@
+export * from './intervals.store'
+export * from './intervals-store.types'

stores/intervals/intervals-store.types.ts

@@ -0,0 +1,15 @@
+import { SegmentType } from '~/utils/config'
+
+export interface Interval {
+  type: SegmentType
+}
+
+export interface IntervalsState {
+  intervals: Interval[]
+}
+
+export interface IntervalsStore extends IntervalsState {
+  addInterval(interval: Interval): void
+
+  resetIntervals(): void
+}

stores/intervals/intervals.store.ts

@@ -0,0 +1,54 @@
+import { create, useStore } from 'zustand'
+import { devtools, persist } from 'zustand/middleware'
+
+import { Interval, IntervalsState, IntervalsStore } from './intervals-store.types'
+
+const initialState: IntervalsState = {
+  intervals: [],
+}
+
+const intervalsStore = create<
+  IntervalsStore,
+  [
+    ['zustand/devtools', never],
+    ['zustand/persist', IntervalsState],
+  ]
+>(
+  devtools(
+    persist(
+      (set) => ({
+        ...initialState,
+
+        addInterval: (payload: Interval) => set(
+          (state) => {
+            return { intervals: [...state.intervals, payload] }
+          },
+          false,
+          { type: 'intervals/addInterval', payload },
+        ),
+
+        resetIntervals: () => set(
+          () => ({ ...initialState }),
+          false,
+          { type: 'intervals/resetSetting' },
+        ),
+      }),
+      {
+        name: 'intervals',
+      },
+    ),
+  ),
+)
+
+// bounded stored
+export function useIntervalsStore (): IntervalsStore
+export function useIntervalsStore<T> (
+  selector: (state: IntervalsStore) => T,
+  equals?: (a: T, b: T) => boolean,
+): T
+export function useIntervalsStore<T> (
+  selector?: (state: IntervalsStore) => T,
+  equals?: (a: T, b: T) => boolean,
+) {
+  return useStore(intervalsStore, selector!, equals)
+}