107 lines
2.9 KiB
TypeScript
107 lines
2.9 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 useAuth from "./auth/auth";
|
|
|
|
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 Users from "./pages/users/users";
|
|
import Groups from "./pages/groups/groups";
|
|
import Feeds from "./pages/feeds/feeds";
|
|
import Pictures from "./pages/pictures/pictures";
|
|
|
|
import Account from "./pages/acccount/account";
|
|
import Settings from "./pages/settings/settings"
|
|
|
|
|
|
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"}
|
|
/>
|
|
<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="/users" element={<Users />} />
|
|
<Route path="/groups" element={<Groups />} />
|
|
<Route path="/feeds" element={<Feeds />} />
|
|
<Route path="/pictures" element={<Pictures />} />
|
|
|
|
<Route path="/account" element={<Account />} />
|
|
<Route path="/settings" element={<Settings />} />
|
|
</Route>
|
|
|
|
<Route path="*" element={<h1 className="not-found">404 [#]<br/>Not Found</h1>} />
|
|
</Routes>
|
|
</Router>
|
|
</>
|
|
</AuthProvider>
|
|
);
|
|
}
|
|
|
|
export default App;
|