useStopwatch.ts

useStopwatch.ts

import * as React from 'react'

type UseStopwatch = {
  seconds: number,
  startStopwatch: () => void,
  stopStopwatch: () => void,
  resetStopwatch: () => void
}

const useStopwatch = (): UseStopwatch => {
  const [seconds, setSeconds] = React.useState(20)
  const [stopwatchRunning, setStopwatchRunning] = React.useState(false)

  const startStopwatch = (): void => {
    setStopwatchRunning(true)
  }

  const stopStopwatch = (): void => {
    setStopwatchRunning(false)
  }

  const resetStopwatch = (): void => {
    stopStopwatch()
    setSeconds(20)
  }

  React.useEffect(() => {
    const interval = setInterval((): void => {
      if (stopwatchRunning && seconds > 0) {
        setSeconds(seconds - 1)
      }

      if (stopwatchRunning && seconds === 0) {
        clearInterval(interval)
      }
    }, 1000)

    return () => clearInterval(interval)
  }, [seconds, stopwatchRunning])

  return {
    seconds,
    startStopwatch,
    stopStopwatch,
    resetStopwatch
  }
}

export default useStopwatch