auto-commit for df4b0748-985b-4592-8c48-1e56102f3613

frontend/src/App.js

@@ -1,51 +1,62 @@
-import { useEffect } from "react";
-import "@/App.css";
-import { BrowserRouter, Routes, Route } from "react-router-dom";
-import axios from "axios";
-
-const BACKEND_URL = process.env.REACT_APP_BACKEND_URL;
-const API = `${BACKEND_URL}/api`;
-
-const Home = () => {
-  const helloWorldApi = async () => {
-    try {
-      const response = await axios.get(`${API}/`);
-      console.log(response.data.message);
-    } catch (e) {
-      console.error(e, `errored out requesting / api`);
-    }
-  };
-
-  useEffect(() => {
-    helloWorldApi();
-  }, []);
+import { BrowserRouter, Routes, Route, Navigate, useLocation } from "react-router-dom";
+import { Toaster } from "sonner";
+import { AuthProvider, useAuth } from "./lib/auth";
+import ProtectedRoute from "./components/ProtectedRoute";
+import Navbar from "./components/Navbar";
+import GrainOverlay from "./components/GrainOverlay";
+import Login from "./pages/Login";
+import Register from "./pages/Register";
+import Browse from "./pages/Browse";
+import MyList from "./pages/MyList";
+import Search from "./pages/Search";
+import Player from "./pages/Player";
+import Requests from "./pages/Requests";
+import Admin from "./pages/Admin";
+import AdminUpload from "./pages/AdminUpload";
 
+const Shell = ({ children }) => {
+  const { user } = useAuth();
+  const loc = useLocation();
+  const hideChrome = loc.pathname.startsWith("/watch") || loc.pathname === "/login" || loc.pathname === "/register";
   return (
-    <div>
-      <header className="App-header">
-        <a
-          className="App-link"
-          href="https://emergent.sh"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <img src="https://avatars.githubusercontent.com/in/1201222?s=120&u=2686cf91179bbafbc7a71bfbc43004cf9ae1acea&v=4" />
-        </a>
-        <p className="mt-5">Building something incredible ~!</p>
-      </header>
-    </div>
+    <>
+      {!hideChrome && user && <Navbar />}
+      {children}
+      <GrainOverlay />
+    </>
   );
 };
 
+const RootRedirect = () => {
+  const { user, loading } = useAuth();
+  if (loading) return <div className="min-h-screen flex items-center justify-center bg-[#050505] text-[#8A8A8A]">Loading…</div>;
+  return <Navigate to={user ? "/browse" : "/login"} replace />;
+};
+
 function App() {
   return (
-    <div className="App">
+    <div className="App min-h-screen bg-[#050505]">
       <BrowserRouter>
-        <Routes>
-          <Route path="/" element={<Home />}>
-            <Route index element={<Home />} />
-          </Route>
-        </Routes>
+        <AuthProvider>
+          <Shell>
+            <Routes>
+              <Route path="/" element={<RootRedirect />} />
+              <Route path="/login" element={<Login />} />
+              <Route path="/register" element={<Register />} />
+              <Route path="/browse" element={<ProtectedRoute><Browse /></ProtectedRoute>} />
+              <Route path="/my-list" element={<ProtectedRoute><MyList /></ProtectedRoute>} />
+              <Route path="/search" element={<ProtectedRoute><Search /></ProtectedRoute>} />
+              <Route path="/watch/:id" element={<ProtectedRoute><Player /></ProtectedRoute>} />
+              <Route path="/requests" element={<ProtectedRoute><Requests /></ProtectedRoute>} />
+              <Route path="/admin" element={<ProtectedRoute adminOnly><Admin /></ProtectedRoute>} />
+              <Route path="/admin/upload" element={<ProtectedRoute adminOnly><AdminUpload /></ProtectedRoute>} />
+              <Route path="*" element={<Navigate to="/" replace />} />
+            </Routes>
+          </Shell>
+          <Toaster position="bottom-right" theme="dark" toastOptions={{
+            style: { background: "#0F0F0F", border: "1px solid #222", color: "#F2F2F2" },
+          }} />
+        </AuthProvider>
       </BrowserRouter>
     </div>
   );