feat(frontend): User context

frontend/src/App.jsx

@@ -3,6 +3,7 @@ import { React, useEffect, useState, lazy, Suspense } from "react";
 import "./App.css";
 import axios_instance from "./Axios";
 import { showErrorMsg } from "./Alerts";
+import { useUser } from "./context/UserContext";
 const Home = lazy(() => import("./components/Home"));
 const LoginPage = lazy(() => import("./pages/Login"));
 const DashboardPage = lazy(() => import("./pages/Dashboard"));
@@ -13,7 +14,7 @@ const SettingsPage = lazy(() => import("./pages/Settings"));
 import CircularProgress from "@mui/material/CircularProgress";
 
 function App() {
-  const [user, setUser] = useState();
+  const { user, setUser } = useUser();
 
   useEffect(() => {
     // Add a timeout to requests
@@ -56,7 +57,7 @@ function App() {
             if (oldUser) {
               showErrorMsg("Session expired or no longer authorized");
             }
-            return false;
+            return null;
           });
           error.handledByMiddleware = true;
         }
@@ -74,7 +75,7 @@ function App() {
       })
       .then(data => setUser(data))
       .catch(err => {
-        setUser(false);
+        setUser(null);
 
         if (err.reqTimedOut) {
           showErrorMsg("Authentication failed! Request timed out");
@@ -114,7 +115,7 @@ function App() {
           <Routes>
             {!user && <Route path="/login" element={<LoginPage />} />}
             {user && (
-              <Route path="/home" element={<Home user={user} />}>
+              <Route path="/home" element={<Home />}>
                 <Route index element={<Navigate to="dashboard" />} />
                 <Route path="dashboard" element={<DashboardPage />} />
                 <Route path="transactions" element={<TransactionsPage />} />

frontend/src/components/Home.jsx

@@ -3,10 +3,10 @@ import { Outlet } from "react-router-dom";
 import Sidebar from "./Sidebar";
 import CircularProgress from "@mui/material/CircularProgress";
 
-function Home({ user }) {
+function Home() {
   return (
     <>
-      <Sidebar user={user} />
+      <Sidebar />
       <Suspense
         fallback={
           <div

frontend/src/components/LogsTable.jsx

@@ -1,16 +1,19 @@
 import React, { useEffect, useRef, useState } from "react";
 import axios_instance from "../Axios";
-import { showErrorMsg, showWarningMsg } from "../Alerts";
+import { showErrorMsg } from "../Alerts";
+import { useUser } from "../context/UserContext";
 import { Virtuoso } from "react-virtuoso";
 import Tabs from "@mui/material/Tabs";
 import Tab from "@mui/material/Tab";
 import CircularProgress from "@mui/material/CircularProgress";
 
 function LogsTable() {
+  const { isDemoUser } = useUser();
+
   const [tab, setTab] = useState("error");
   const [logs, setLogs] = useState({
-    error: undefined,
-    combined: undefined,
+    error: isDemoUser ? [] : undefined,
+    combined: isDemoUser ? [] : undefined,
   });
   const [loading, setLoading] = useState({
     error: false,
@@ -28,6 +31,9 @@ function LogsTable() {
   useEffect(() => {
     scrollToBottom();
 
+    // Logs are disabled for demo account
+    if (isDemoUser) return;
+
     if (logs[tab] !== undefined || loading[tab]) return;
 
     setLoading(prevLoading => ({ ...prevLoading, [tab]: true }));
@@ -38,16 +44,10 @@ function LogsTable() {
         if (res.status == 200) return res.data;
         throw new Error("Couldn't fetch logs");
       })
-      .then(data => {
-        if (data.length === 0) showWarningMsg(`No ${tab} logs found`);
-
-        setLogs(prevLogs => ({ ...prevLogs, [tab]: data }));
-      })
+      .then(data => setLogs(prevLogs => ({ ...prevLogs, [tab]: data })))
       .catch(err => {
         if (err.handledByMiddleware) return;
 
-        if (err.isDemoUser) return showWarningMsg("Logs are disabled for demo account");
-
         let msg = `Couldn't fetch ${tab} logs`;
         if (err.reqTimedOut) msg += ". Request timed out";
         else if (err.response)
@@ -69,7 +69,11 @@ function LogsTable() {
         {loading[tab] ? (
           <CircularProgress className="loading-circle medium" sx={{ m: 5 }} />
         ) : logs[tab] === undefined || logs[tab].length === 0 ? (
-          `No ${tab} logs found`
+          isDemoUser ? (
+            "Logs are disabled for demo account"
+          ) : (
+            `No ${tab} logs found`
+          )
         ) : (
           <div className={`logs-list ${tab}`}>
             <Virtuoso

frontend/src/components/Sidebar.jsx

@@ -3,6 +3,7 @@ import { NavLink } from "react-router-dom";
 import ImageRenderer from "./ImageRenderer";
 import axios_instance from "../Axios";
 import { showErrorMsg } from "../Alerts";
+import { useUser } from "../context/UserContext";
 import hslogo from "../assets/hs-logo.png";
 import DashboardIcon from "@mui/icons-material/Dashboard";
 import AttachMoneyIcon from "@mui/icons-material/AttachMoney";
@@ -12,7 +13,9 @@ import PowerSettingsNewIcon from "@mui/icons-material/PowerSettingsNew";
 import SettingsIcon from "@mui/icons-material/Settings";
 import AccountCircleIcon from "@mui/icons-material/AccountCircle";
 
-function Sidebar({ user }) {
+function Sidebar() {
+  const { user } = useUser();
+
   function logout() {
     axios_instance
       .post("auth/logout")

frontend/src/context/UserContext.jsx

@@ -0,0 +1,28 @@
+import { useState, useContext, createContext } from "react";
+
+const initialContext = {
+  user: undefined,
+  setUser: () => {},
+};
+
+const useUserContext = () => {
+  const [user, setUser] = useState(initialContext.user);
+
+  return { user, setUser };
+};
+
+const UserContext = createContext(initialContext);
+
+export const UserProvider = ({ children }) => {
+  return <UserContext.Provider value={useUserContext()}>{children}</UserContext.Provider>;
+};
+
+export const useUser = () => {
+  const { user, setUser } = useContext(UserContext);
+  return {
+    user,
+    setUser,
+    isLoggedIn: user?.username !== undefined,
+    isDemoUser: user?.username === "demo",
+  };
+};

frontend/src/main.jsx

@@ -2,14 +2,17 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import { BrowserRouter } from "react-router-dom";
 import { SnackbarProvider } from "notistack";
+import { UserProvider } from "./context/UserContext.jsx";
 import App from "./App.jsx";
 import "./index.css";
 
 ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>
     <BrowserRouter>
       <SnackbarProvider anchorOrigin={{ horizontal: "right", vertical: "bottom" }} maxSnack={5}>
-        <App />
+        <UserProvider>
+          <App />
+        </UserProvider>
       </SnackbarProvider>
     </BrowserRouter>
   </React.StrictMode>