Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 | 4x 1515x 1515x 1515x 1515x 1515x 1515x 3x 3x 3x 3x 3x 1515x 1515x 1504x 1502x 11x 1x 1x 1x 1515x | import {
createContext,
ReactNode,
useContext,
useEffect,
useState,
} from "react";
import { ChallengeContext } from "./ChallengeContext";
type CountdownContextData = {
minutes: number;
seconds: number;
hasFinished: boolean;
isActive: boolean;
startCountdown: () => void;
stopCountdown: () => void;
};
export const CountdownContext = createContext({} as CountdownContextData);
type CountdownProviderProps = {
children: ReactNode;
};
let countdownTimeout: NodeJS.Timeout;
export function CountdownProvider({ children }: CountdownProviderProps) {
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;
function startCountdown() {
setIsActive(true);
}
function stopCountdown() {
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,
stopCountdown,
}}
>
{children}
</CountdownContext.Provider>
);
}
|