generated from muhtadeetaron/nextjs-template
71 lines
1.7 KiB
TypeScript
71 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import React, { createContext, useContext, useState, useEffect } from "react";
|
|
|
|
// Define the context type
|
|
interface TimerContextType {
|
|
timeRemaining: number;
|
|
resetTimer: (duration: number) => void;
|
|
stopTimer: () => void;
|
|
setInitialTime: (duration: number) => void; // New function to set the initial time
|
|
}
|
|
|
|
// Create the context with a default value of `undefined`
|
|
const TimerContext = createContext<TimerContextType | undefined>(undefined);
|
|
|
|
// Provider Component
|
|
export const TimerProvider: React.FC<{ children: React.ReactNode }> = ({
|
|
children,
|
|
}) => {
|
|
const [timeRemaining, setTimeRemaining] = useState<number>(0); // Default is 0
|
|
let timer: NodeJS.Timeout;
|
|
|
|
useEffect(() => {
|
|
if (timeRemaining > 0) {
|
|
timer = setInterval(() => {
|
|
setTimeRemaining((prev) => {
|
|
if (prev <= 1) {
|
|
clearInterval(timer);
|
|
return 0;
|
|
}
|
|
return prev - 1;
|
|
});
|
|
}, 1000);
|
|
}
|
|
|
|
return () => {
|
|
clearInterval(timer); // Cleanup timer on unmount
|
|
};
|
|
}, [timeRemaining]);
|
|
|
|
const resetTimer = (duration: number) => {
|
|
clearInterval(timer);
|
|
setTimeRemaining(duration);
|
|
};
|
|
|
|
const stopTimer = () => {
|
|
clearInterval(timer);
|
|
};
|
|
|
|
const setInitialTime = (duration: number) => {
|
|
setTimeRemaining(duration);
|
|
};
|
|
|
|
return (
|
|
<TimerContext.Provider
|
|
value={{ timeRemaining, resetTimer, stopTimer, setInitialTime }}
|
|
>
|
|
{children}
|
|
</TimerContext.Provider>
|
|
);
|
|
};
|
|
|
|
// Hook to use the TimerContext
|
|
export const useTimer = (): TimerContextType => {
|
|
const context = useContext(TimerContext);
|
|
if (!context) {
|
|
throw new Error("useTimer must be used within a TimerProvider");
|
|
}
|
|
return context;
|
|
};
|