generated from muhtadeetaron/nextjs-template
84 lines
1.9 KiB
TypeScript
84 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import React, {
|
|
createContext,
|
|
useContext,
|
|
useState,
|
|
useEffect,
|
|
useRef,
|
|
} from "react";
|
|
|
|
interface TimerContextType {
|
|
timeRemaining: number;
|
|
resetTimer: (duration: number) => void;
|
|
stopTimer: () => void;
|
|
setInitialTime: (duration: number) => void;
|
|
}
|
|
|
|
const TimerContext = createContext<TimerContextType | undefined>(undefined);
|
|
|
|
export const TimerProvider: React.FC<{ children: React.ReactNode }> = ({
|
|
children,
|
|
}) => {
|
|
const [timeRemaining, setTimeRemaining] = useState<number>(0);
|
|
const timerRef = useRef<NodeJS.Timeout | null>(null);
|
|
|
|
// countdown effect
|
|
useEffect(() => {
|
|
if (timeRemaining > 0 && !timerRef.current) {
|
|
timerRef.current = setInterval(() => {
|
|
setTimeRemaining((prev) => {
|
|
if (prev <= 1) {
|
|
clearInterval(timerRef.current!);
|
|
timerRef.current = null;
|
|
return 0;
|
|
}
|
|
return prev - 1;
|
|
});
|
|
}, 1000);
|
|
}
|
|
|
|
return () => {
|
|
if (timerRef.current) {
|
|
clearInterval(timerRef.current);
|
|
timerRef.current = null;
|
|
}
|
|
};
|
|
}, [timeRemaining]);
|
|
|
|
const resetTimer = (duration: number) => {
|
|
if (timerRef.current) clearInterval(timerRef.current);
|
|
timerRef.current = null;
|
|
setTimeRemaining(duration);
|
|
};
|
|
|
|
const stopTimer = () => {
|
|
if (timerRef.current) {
|
|
clearInterval(timerRef.current);
|
|
timerRef.current = null;
|
|
}
|
|
};
|
|
|
|
const setInitialTime = (duration: number) => {
|
|
if (timerRef.current) clearInterval(timerRef.current);
|
|
timerRef.current = null;
|
|
setTimeRemaining(duration);
|
|
};
|
|
|
|
return (
|
|
<TimerContext.Provider
|
|
value={{ timeRemaining, resetTimer, stopTimer, setInitialTime }}
|
|
>
|
|
{children}
|
|
</TimerContext.Provider>
|
|
);
|
|
};
|
|
|
|
export const useTimer = (): TimerContextType => {
|
|
const context = useContext(TimerContext);
|
|
if (!context) {
|
|
throw new Error("useTimer must be used within a TimerProvider");
|
|
}
|
|
return context;
|
|
};
|