Skip to content

Commit

Permalink
feat(frontend): User context
Browse files Browse the repository at this point in the history
  • Loading branch information
fmata97 committed Feb 20, 2024
1 parent e7fc549 commit e347dfc
Show file tree
Hide file tree
Showing 6 changed files with 58 additions and 19 deletions.
9 changes: 5 additions & 4 deletions frontend/src/App.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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"));
Expand All @@ -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
Expand Down Expand Up @@ -56,7 +57,7 @@ function App() {
if (oldUser) {
showErrorMsg("Session expired or no longer authorized");
}
return false;
return null;
});
error.handledByMiddleware = true;
}
Expand All @@ -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");
Expand Down Expand Up @@ -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 />} />
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/Home.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
26 changes: 15 additions & 11 deletions frontend/src/components/LogsTable.jsx
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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 }));
Expand All @@ -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)
Expand All @@ -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
Expand Down
5 changes: 4 additions & 1 deletion frontend/src/components/Sidebar.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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")
Expand Down
28 changes: 28 additions & 0 deletions frontend/src/context/UserContext.jsx
Original file line number Diff line number Diff line change
@@ -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",
};
};
5 changes: 4 additions & 1 deletion frontend/src/main.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down

0 comments on commit e347dfc

Please sign in to comment.