Base project structure

src/App.tsx

@@ -0,0 +1,106 @@
+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;