Dev/v1.0 (#1)

Co-authored-by: ISMAIL MASSERAN <topaz@Mac.dlinkrouter.local>
Co-authored-by: ISMAIL MASSERAN <topaz@ISMAILs-Macbook.local>
Reviewed-on: #1

fe/web/teller-app/src/App.jsx

@@ -1,20 +1,73 @@
-import React from 'react';
-import { Route, Routes } from 'react-router-dom';
+import React, { useEffect, useState } from 'react';
+import { Route, Routes, useLocation } from 'react-router-dom';
 import StationIntroPage from './pages/StationIntroPage/StationIntroPage.jsx';
 import ShowQueuesForTellerPage from './pages/ShowQueuesForTellerPage/ShowQueuesForTellerPage';
 import Header from './components/Header/Header.jsx';
 import CurrentTicketPage from './pages/CurrentTicketPage/CurrentTicketPage.jsx';
+import BranchDisplayPage from './pages/BranchDisplayPage/BranchDisplayPage.jsx';
+import LoginPage from './pages/LoginPage/LoginPage.jsx';
+import AuthGuard from './components/AuthGuard/AuthGuard.jsx';
+import { UserContext } from './context/UserContext.jsx';
+import { clearSession, getToken, getUserData } from './utils/session.js';
+import { SERVER_URL } from './constants.js';
+import { fetchData } from './fetching/Fetch.js';
 
 export default function App() {
+    const [user, setUser] = useState(() => getUserData());
+    const location = useLocation();
+    const isDisplayRoute = location.pathname.startsWith('/display');
+
+    useEffect(() => {
+        document.body.classList.toggle('display-mode', isDisplayRoute);
+        return () => document.body.classList.remove('display-mode');
+    }, [isDisplayRoute]);
+
+    useEffect(() => {
+        const token = getToken();
+        if (!token) {
+            return;
+        }
+
+        fetchData(`${SERVER_URL}/api/v1/auth`, 'GET').then(({ success }) => {
+            if (success) {
+                setUser(getUserData());
+            } else {
+                clearSession();
+                setUser(null);
+            }
+        });
+    }, []);
 
     return (
-        <>
-            <Header />
+        <UserContext.Provider value={{ user, setUser }}>
+            {isDisplayRoute ? null : <Header />}
             <Routes>
-                <Route exact path='/' element={<StationIntroPage />} />
-                <Route exact path="/teller-queue/:stationId" element={<ShowQueuesForTellerPage />} />
-                <Route path="/display/:stationId" element={<CurrentTicketPage/>} />
+                <Route exact path="/login" element={<LoginPage />} />
+                <Route
+                    exact
+                    path="/"
+                    element={
+                        <AuthGuard>
+                            <StationIntroPage />
+                        </AuthGuard>
+                    }
+                />
+                <Route
+                    exact
+                    path="/teller-queue/:stationId"
+                    element={
+                        <AuthGuard>
+                            <ShowQueuesForTellerPage />
+                        </AuthGuard>
+                    }
+                />
+                {/* Public display boards for waiting area screens */}
+                <Route
+                    path="/display/branch/:tenantCode/:branchId"
+                    element={<BranchDisplayPage />}
+                />
+                <Route path="/display/:stationId" element={<CurrentTicketPage />} />
             </Routes>
-        </>
+        </UserContext.Provider>
     );
 }