generated from muhtadeetaron/nextjs-template
initial commit
This commit is contained in:
109
context/AuthContext.tsx
Normal file
109
context/AuthContext.tsx
Normal file
@ -0,0 +1,109 @@
|
||||
"use client";
|
||||
|
||||
import React, { createContext, useContext, useState, useEffect } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
interface AuthContextType {
|
||||
token: string | null;
|
||||
setToken: (token: string | null) => void;
|
||||
logout: () => void;
|
||||
isLoading: boolean;
|
||||
}
|
||||
|
||||
const AuthContext = createContext<AuthContextType | undefined>(undefined);
|
||||
|
||||
// Cookie utility functions
|
||||
const getCookie = (name: string): string | null => {
|
||||
if (typeof document === "undefined") return null;
|
||||
|
||||
const value = `; ${document.cookie}`;
|
||||
const parts = value.split(`; ${name}=`);
|
||||
if (parts.length === 2) {
|
||||
return parts.pop()?.split(";").shift() || null;
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
const setCookie = (
|
||||
name: string,
|
||||
value: string | null,
|
||||
days: number = 7
|
||||
): void => {
|
||||
if (typeof document === "undefined") return;
|
||||
|
||||
if (value === null) {
|
||||
// Delete cookie by setting expiration to past date
|
||||
document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/; SameSite=Strict; Secure`;
|
||||
} else {
|
||||
const expires = new Date();
|
||||
expires.setTime(expires.getTime() + days * 24 * 60 * 60 * 1000);
|
||||
document.cookie = `${name}=${value}; expires=${expires.toUTCString()}; path=/; SameSite=Strict; Secure`;
|
||||
}
|
||||
};
|
||||
|
||||
export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({
|
||||
children,
|
||||
}) => {
|
||||
const [token, setTokenState] = useState<string | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const router = useRouter();
|
||||
|
||||
// Custom setToken function that also updates cookies
|
||||
const setToken = (newToken: string | null) => {
|
||||
setTokenState(newToken);
|
||||
setCookie("authToken", newToken);
|
||||
};
|
||||
|
||||
// On app load, check if there's a token in cookies
|
||||
useEffect(() => {
|
||||
const initializeAuth = () => {
|
||||
const storedToken = getCookie("authToken");
|
||||
|
||||
if (storedToken) {
|
||||
setTokenState(storedToken);
|
||||
// Only redirect if we're on login/register pages
|
||||
if (
|
||||
router.pathname === "/" ||
|
||||
router.pathname === "/login" ||
|
||||
router.pathname === "/register"
|
||||
) {
|
||||
router.replace("/home");
|
||||
}
|
||||
} else {
|
||||
// Only redirect to login if we're on a protected page
|
||||
const publicPages = ["/", "/login", "/register"];
|
||||
if (!publicPages.includes(router.pathname)) {
|
||||
router.replace("/");
|
||||
}
|
||||
}
|
||||
|
||||
setIsLoading(false);
|
||||
};
|
||||
|
||||
// Small delay to ensure router is ready
|
||||
const timer = setTimeout(initializeAuth, 100);
|
||||
return () => clearTimeout(timer);
|
||||
}, [router.pathname]);
|
||||
|
||||
// Function to log out
|
||||
const logout = () => {
|
||||
setTokenState(null);
|
||||
setCookie("authToken", null); // Remove token from cookies
|
||||
router.replace("/login"); // Redirect to login screen
|
||||
};
|
||||
|
||||
return (
|
||||
<AuthContext.Provider value={{ token, setToken, logout, isLoading }}>
|
||||
{children}
|
||||
</AuthContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
// Hook to use the AuthContext
|
||||
export const useAuth = () => {
|
||||
const context = useContext(AuthContext);
|
||||
if (!context) {
|
||||
throw new Error("useAuth must be used within an AuthProvider");
|
||||
}
|
||||
return context;
|
||||
};
|
||||
70
context/TimerContext.tsx
Normal file
70
context/TimerContext.tsx
Normal file
@ -0,0 +1,70 @@
|
||||
"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;
|
||||
};
|
||||
Reference in New Issue
Block a user