97 lines
2.4 KiB
TypeScript
97 lines
2.4 KiB
TypeScript
import { BrowserRouter as Router, Routes, Route, Outlet, useLocation, useNavigate } from 'react-router-dom';
|
|
import {useEffect, useState } from "react";
|
|
|
|
import { ToastContainer } from "react-toastify";
|
|
import {
|
|
argbFromHex,
|
|
themeFromSourceColor,
|
|
applyTheme,
|
|
} from "@material/material-color-utilities";
|
|
|
|
import { 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 Dashboard from "./pages/dashboard/dashboard"
|
|
import Settings from "./pages/settings/settings"
|
|
import useAuth from './auth/auth';
|
|
|
|
|
|
const PrivateRoute = () => {
|
|
const { token, loading } = useAuth();
|
|
const navigate = useNavigate();
|
|
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);
|
|
setIsValid(result);
|
|
setChecked(true);
|
|
};
|
|
if (!loading) {
|
|
checkAuth();
|
|
}
|
|
}, [token, loading]);
|
|
|
|
if (loading || !checked) {
|
|
return <div>Checking server availability...</div>;
|
|
}
|
|
|
|
if (!isValid) {
|
|
navigate(`/login?to=${location.pathname}`);
|
|
}
|
|
else {
|
|
return <Outlet />
|
|
}
|
|
}
|
|
|
|
|
|
function App() {
|
|
const theme = themeFromSourceColor(argbFromHex("ffddaf"));
|
|
const systemDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
|
|
applyTheme(theme, { target: document.body, dark: systemDark });
|
|
return (
|
|
<AuthProvider>
|
|
<>
|
|
<ToastContainer
|
|
position="top-right"
|
|
autoClose={2000}
|
|
hideProgressBar={false}
|
|
newestOnTop={false}
|
|
closeOnClick={false}
|
|
rtl={false}
|
|
theme={systemDark ? "light" : "dark"}
|
|
// transition={Bounce}
|
|
/>
|
|
<Router>
|
|
<Routes>
|
|
<Route path="/login" element={<Login />} />
|
|
<Route path="/register" element={<Register />} />
|
|
|
|
<Route element={<PrivateRoute />}>
|
|
<Route path='/' element={<Home />} />
|
|
<Route path='/dashboard' element={<Dashboard />} />
|
|
<Route path='/settings' element={<Settings />} />
|
|
</Route>
|
|
|
|
<Route path="*" element={<div>404</div>} />
|
|
</Routes>
|
|
</Router>
|
|
</>
|
|
</AuthProvider>
|
|
);
|
|
}
|
|
|
|
export default App;
|