import { createContext , ReactNode , useContext , useEffect , useState , } from 'react' ; import { ChallengeContext } from './ChallengeContext' ; interface CountdownContextData { minutes : number ; seconds : number ; hasFinished : boolean ; isActive : boolean ; startCountdown : ( ) => void ; resetCountdown : ( ) => void ; } interface CountdownProviderProps { children : ReactNode ; } export const CountdownContext = createContext ( { } as CountdownContextData ) ; export function CountdownProvider ( { children } ) { const { startNewChallenge } = useContext ( ChallengeContext ) ; const [ time , setTime ] = useState ( 25 * 60 ) ; const [ isActive , setIsActive ] = useState ( false ) ; const [ hasFinished , setHasFinished ] = useState ( false ) ; const minutes = Math . floor ( time / 60 ) ; const seconds = time % 60 ; let countdownTimeout ; function startCountdown ( ) { setIsActive ( true ) ; } function resetCountdown ( ) { clearTimeout ( countdownTimeout ) ; setIsActive ( false ) ; setTime ( 25 * 60 ) ; setHasFinished ( false ) ; } useEffect ( ( ) => { if ( isActive && time > 0 ) { countdownTimeout = setTimeout ( ( ) => { setTime ( time - 1 ) ; } , 1000 ) ; } else if ( isActive && time == 0 ) { setHasFinished ( true ) ; setIsActive ( false ) ; startNewChallenge ( ) ; } } , [ isActive , time ] ) ; return ( < > < CountdownContext . Provider value = { { minutes , seconds , hasFinished , isActive , startCountdown , resetCountdown , } } > { children } < /CountdownContext.Provider> < />); }