diff --git a/src/App.tsx b/src/App.tsx index 2380355..cc3821b 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,9 +1,16 @@ import { BrowserRouter as Router, Routes, Route, Navigate, Outlet, useLocation } from 'react-router-dom'; -import {useContext } from "react"; +import {useContext, useEffect, useState } from "react"; + +import AuthContext, { AuthProvider } from "./auth/auth-provider" +import ping from "./auth/ping"; + import Login from "./pages/login/login" import Register from "./pages/register/register" + import Home from "./pages/home/home" -import AuthContext, { AuthProvider } from "./auth/auth-provider" +import Dashboard from "./pages/dashboard/dashboard" +import Settings from "./pages/settings/settings" +import useAuth from './auth/auth'; function App() { @@ -16,7 +23,11 @@ function App() { }> } /> + } /> + } /> + + 404} /> @@ -25,14 +36,34 @@ function App() { const PrivateRoute = () => { - const { isAuthenticated } = useContext(AuthContext); + const { token } = useAuth(); const location = useLocation(); + const [checked, setChecked] = useState(false); + const [isValid, setIsValid] = useState(false); + + useEffect(() => { + const checkAuth = async () => { + if (!token) { + setIsValid(false); + setChecked(true); + return; + } + const result = await ping(token); + console.log(result) + setIsValid(result); + setChecked(true); + }; + checkAuth(); + }, [token]); + + if (!checked) { + return
Checking server availability...
; + } return ( - isAuthenticated === true ? - - : - + isValid + ? + : ); } diff --git a/src/auth/auth-provider.tsx b/src/auth/auth-provider.tsx index 93aeac1..cf99ebf 100644 --- a/src/auth/auth-provider.tsx +++ b/src/auth/auth-provider.tsx @@ -9,7 +9,7 @@ type AuthContextType = { const AuthContext = createContext({ token: null, - setToken: () => { }, + setToken: () => {}, }); @@ -20,15 +20,19 @@ export const AuthProvider = ({ children }: { children: JSX.Element }) => { const savedToken = localStorage.getItem("token"); if (savedToken) { setTokenState(savedToken); + console.log("meow") } + console.log(savedToken) }, []); const setToken = (newToken: string | null) => { setTokenState(newToken); if (newToken) { localStorage.setItem("token", newToken); + console.log("saved") } else { localStorage.removeItem("token"); + console.log("removed") } }; diff --git a/src/auth/auth.tsx b/src/auth/auth.tsx index a514003..3a34f25 100644 --- a/src/auth/auth.tsx +++ b/src/auth/auth.tsx @@ -3,9 +3,7 @@ import AuthContext from "./auth-provider" function useAuth() { - return ( - useContext(AuthContext) - ); + return useContext(AuthContext); } export default useAuth; diff --git a/src/auth/logout.tsx b/src/auth/logout.tsx index 51d8511..75c1d9d 100644 --- a/src/auth/logout.tsx +++ b/src/auth/logout.tsx @@ -1,12 +1,15 @@ +import { useNavigate } from "react-router-dom"; import useAuth from "./auth"; -const logout = () => { - // eslint-disable-next-line react-hooks/rules-of-hooks - const { setToken: setAuth } = useAuth(); + +const useLogout = () => { + const { setToken } = useAuth(); + const navigate = useNavigate(); return () => { - setAuth(false); + setToken(null); + navigate("/login"); }; } -export default logout; +export default useLogout; diff --git a/src/auth/ping.tsx b/src/auth/ping.tsx index 93427be..753508c 100644 --- a/src/auth/ping.tsx +++ b/src/auth/ping.tsx @@ -1,16 +1,10 @@ -const ping = () => { +const ping = async (token: string | null): Promise => { // TODO: request to API - return () => { - return true; - }; -} - -// const ping = async (token: string): Promise => { -// return new Promise((resolve) => { -// setTimeout(() => { -// resolve(!!token); -// }, 300); -// }); -// }; + return new Promise((resolve) => { + setTimeout(() => { + resolve(!!token); + }, 300); + }); +}; export default ping; diff --git a/src/pages/dashboard/dashboard.tsx b/src/pages/dashboard/dashboard.tsx index e69de29..9d72125 100644 --- a/src/pages/dashboard/dashboard.tsx +++ b/src/pages/dashboard/dashboard.tsx @@ -0,0 +1,9 @@ +const Dashboard = () => { + return ( +
+

Dashboard

+
+ ) +} + +export default Dashboard; diff --git a/src/pages/home/home.tsx b/src/pages/home/home.tsx index 225a0cb..305dd86 100644 --- a/src/pages/home/home.tsx +++ b/src/pages/home/home.tsx @@ -1,11 +1,23 @@ +import { useNavigate } from "react-router-dom"; +import useAuth from "../../auth/auth"; + import { Link } from 'react-router-dom'; -import logout from "../../auth/logout" +import useLogout from "../../auth/logout" + const Home = () => { + const { setToken } = useAuth(); + const navigate = useNavigate(); + + const handleLogout = () => { + setToken(null); + navigate("/login"); + }; + return (

Home

-