Add timer initial value to localStorage

This changes allow the form to maintain the timer statte even after a
reload or closing and reopening it.

frontend/src/app/tasks/__tests__/components/CreateTask.test.tsx

@@ -67,6 +67,7 @@ describe('TaskForm', () => {
     jest.useFakeTimers()
     jest.spyOn(global, 'setInterval')
     jest.setSystemTime(new Date('January 01, 2023 23:15:00'))
+    window.localStorage.clear()
   })
 
   afterEach(() => {

frontend/src/app/tasks/hooks/useTaskFormTimer.ts

@@ -1,5 +1,5 @@
 import { format } from 'date-fns'
-import { useCallback } from 'react'
+import { useCallback, useEffect } from 'react'
 import { TaskIntent } from '@/domain/Task'
 import { useForm } from '@/hooks/useForm/useForm'
 import { useTimer } from '@/hooks/useTimer/useTimer'
@@ -12,22 +12,30 @@ type UseTaskFormTimerProps = {
 }
 
 export const useTaskFormTimer = ({ handleChange, startTime, endTime }: UseTaskFormTimerProps) => {
-  const { startTimer, stopTimer, seconds, minutes, hours, isTimerRunning } = useTimer()
-
-  const toggleTimer = useCallback(() => {
-    const onStartTimer = () => {
-      handleChange('startTime', format(new Date(), 'HH:mm'))
+  const {
+    startTimer,
+    stopTimer,
+    seconds,
+    minutes,
+    hours,
+    isTimerRunning,
+    startTime: initialTimerValue
+  } = useTimer()
+
+  useEffect(() => {
+    if (isTimerRunning) {
+      handleChange('startTime', format(initialTimerValue, 'HH:mm'))
       handleChange('endTime', '')
-
-      startTimer()
     }
+  }, [handleChange, initialTimerValue, isTimerRunning])
 
+  const toggleTimer = useCallback(() => {
     const onStopTimer = () => {
       handleChange('endTime', format(new Date(), 'HH:mm'))
       stopTimer()
     }
 
-    return isTimerRunning ? onStopTimer() : onStartTimer()
+    return isTimerRunning ? onStopTimer() : startTimer()
   }, [handleChange, isTimerRunning, startTimer, stopTimer])
 
   const loggedTime = useCallback(() => {

frontend/src/hooks/useTimer/__tests__/useTimer.test.ts

@@ -5,6 +5,7 @@ describe('useTimer', () => {
   beforeAll(() => {
     jest.useFakeTimers()
     jest.spyOn(global, 'setInterval')
+    window.localStorage.clear()
   })
 
   it('should start the timer', () => {
@@ -55,4 +56,25 @@ describe('useTimer', () => {
     expect(result.current.seconds).toBe(0)
     expect(result.current.isTimerRunning).toBe(false)
   })
+
+  it('adds the startTime to the local storage', () => {
+    const { result } = renderHook(() => useTimer())
+
+    act(() => {
+      result.current.startTimer()
+    })
+
+    expect(window.localStorage.getItem('timer_start')).toBe(result.current.startTime.toString())
+  })
+
+  it('clears the startTime on the local storage', () => {
+    const { result } = renderHook(() => useTimer())
+
+    act(() => {
+      result.current.startTimer()
+      result.current.stopTimer()
+    })
+
+    expect(window.localStorage.getItem('timer_start')).toBe(null)
+  })
 })

frontend/src/hooks/useTimer/useTimer.ts

@@ -2,12 +2,15 @@ import { useState, useEffect, useCallback, useMemo } from 'react'
 
 export const useTimer = () => {
   const [time, setTime] = useState(0)
-  const [startTime, setStartTime] = useState(0)
+  const [startTime, setStartTime] = useState(Number(localStorage.getItem('timer_start')) || 0)
 
   const startTimer = useCallback(() => {
+    localStorage.setItem('timer_start', Date.now().toString())
     setStartTime(Date.now())
   }, [])
+
   const stopTimer = useCallback(() => {
+    localStorage.removeItem('timer_start')
     setStartTime(0)
     setTime(0)
   }, [])
@@ -26,5 +29,5 @@ export const useTimer = () => {
   const minutes = Math.floor((time / 60) % 60)
   const hours = Math.floor((time / 3600) % 60)
 
-  return { startTimer, stopTimer, seconds, minutes, hours, isTimerRunning }
+  return { startTimer, stopTimer, seconds, minutes, hours, isTimerRunning, startTime }
 }