From a80720fe5f06949031133db5235cd92a740b4dc0 Mon Sep 17 00:00:00 2001 From: Phil Leon Kersting Date: Thu, 24 Jul 2025 17:30:05 +0200 Subject: [PATCH] update bugs --- frontend_admin/src/App.tsx | 18 ++- frontend_admin/src/components/Header.tsx | 8 +- frontend_admin/src/components/LoginCard.tsx | 17 ++- frontend_admin/src/components/UserTable.tsx | 41 ++++-- frontend_admin/src/layout/Layout.tsx | 39 +++-- frontend_admin/src/utils/context.tsx | 3 + frontend_admin/src/utils/useUsers.ts | 151 ++++++++++++++++++-- frontend_admin/src/utils/userHandler.ts | 10 -- package-lock.json | 6 + 9 files changed, 232 insertions(+), 61 deletions(-) create mode 100644 frontend_admin/src/utils/context.tsx create mode 100644 package-lock.json diff --git a/frontend_admin/src/App.tsx b/frontend_admin/src/App.tsx index 55b3024..338f983 100644 --- a/frontend_admin/src/App.tsx +++ b/frontend_admin/src/App.tsx @@ -1,21 +1,29 @@ import "./App.css"; import Layout from "./layout/Layout"; -import { useUsers } from "./utils/useUsers"; import UserTable from "./components/UserTable"; -import { useEffect } from "react"; +import { useContext, useEffect } from "react"; import { loadTheme } from "./utils/frontendService"; import "react-toastify/dist/ReactToastify.css"; +import { AuthContext } from "./utils/context"; function App() { - const users = useUsers(); - useEffect(() => { loadTheme(); }, []); + const auth = useContext(AuthContext); + return ( - + {auth ? ( + + ) : ( +
+

+ Please log in to view the user table. +

+
+ )}
); } diff --git a/frontend_admin/src/components/Header.tsx b/frontend_admin/src/components/Header.tsx index 1ac2921..130bca8 100644 --- a/frontend_admin/src/components/Header.tsx +++ b/frontend_admin/src/components/Header.tsx @@ -4,7 +4,11 @@ import LoginCard from "./LoginCard"; import { greeting } from "../utils/frontendService"; import { changeTheme } from "../utils/frontendService"; -const Header: React.FC = () => { +export interface HeaderProps { + changeAuth?: (isLoggedIn: boolean) => void; +} + +const Header: React.FC = ({ changeAuth }) => { const [loginCardVisible, setLoginCardVisible] = useState(false); const closeLoginCard = () => { @@ -40,7 +44,7 @@ const Header: React.FC = () => { -
{loginCardVisible && }
+
{loginCardVisible && }
); }; diff --git a/frontend_admin/src/components/LoginCard.tsx b/frontend_admin/src/components/LoginCard.tsx index 8bf3634..9414b27 100644 --- a/frontend_admin/src/components/LoginCard.tsx +++ b/frontend_admin/src/components/LoginCard.tsx @@ -3,9 +3,10 @@ import Cookies from "js-cookie"; import { logout, loginUser } from "../utils/userHandler"; type LoginCardProps = { onClose: () => void; + changeAuth?: (isLoggedIn: boolean) => void; }; -const LoginCard: React.FC = ({ onClose }) => { +const LoginCard: React.FC = ({ onClose, changeAuth }) => { return (
@@ -26,6 +27,10 @@ const LoginCard: React.FC = ({ onClose }) => { const username = formData.get("username"); const password = formData.get("password"); loginUser(username as string, password as string); + if (changeAuth) { + changeAuth(true); + onClose(); + } }} className="space-y-4 text-black dark:text-white" > @@ -69,10 +74,16 @@ const LoginCard: React.FC = ({ onClose }) => { /> )} - {Cookies.get("name") ? ( + {Cookies.get("token") ? ( diff --git a/frontend_admin/src/components/UserTable.tsx b/frontend_admin/src/components/UserTable.tsx index 1a2809a..39df61f 100644 --- a/frontend_admin/src/components/UserTable.tsx +++ b/frontend_admin/src/components/UserTable.tsx @@ -1,6 +1,7 @@ import { MoreVertical } from "lucide-react"; -import React, { useEffect, useState } from "react"; -import { deleteUser, updateUserFunc } from "../utils/userHandler.ts"; +import { useContext, useEffect, useState } from "react"; +import { useUsers } from "../utils/useUsers.ts"; +import { AuthContext } from "../utils/context.tsx"; interface User { id: number; @@ -13,27 +14,39 @@ interface User { role: string; } -interface UserTableProps { - users: User[]; -} - -const UserTable: React.FC = ({ users }) => { +const UserTable = () => { const [openMenu, setOpenMenu] = useState(null); - const [userList, setUserList] = useState(users); + + const { + users, + refresh: refreshUsers, + setUsers, + deleteUser, + updateUser: updateUserFunc, + } = useUsers(); + + const refresh = () => { + refreshUsers(); + }; + + const auth = useContext(AuthContext); useEffect(() => { - setUserList(users); - }, [users]); + refresh(); + }, [auth]); const handleMenuClick = (userId: number) => { setOpenMenu(openMenu === userId ? null : userId); }; + const handleMenuClose = () => setOpenMenu(null); const handleInputChange = (id: number, field: keyof User, value: string) => { - setUserList((prev) => - prev.map((user) => (user.id === id ? { ...user, [field]: value } : user)) + setUsers((prevUsers) => + prevUsers.map((user) => + user.id === id ? { ...user, [field]: value } : user + ) ); }; @@ -71,9 +84,9 @@ const UserTable: React.FC = ({ users }) => { - {userList.map((user, idx) => { + {(users ?? []).map((user, idx) => { // If this is one of the last 2 rows, open menu upwards - const openUp = idx >= userList.length - 2; + const openUp = idx >= users.length - 2; return ( = ({ children }) => { - const isLoggedIn = !!Cookies.get("name"); + const [loggedIn, setLoggedIn] = React.useState(false); + + useEffect(() => { + const token = Cookies.get("token"); + if (token) { + setLoggedIn(true); + } else { + setLoggedIn(false); + } + }, [loggedIn]); return (
-
+
setLoggedIn(isLoggedIn) + } />
- {isLoggedIn && ( - <> - {/* Sidebar */} - - {/* Main content */} -
- {children} -
- - )} + + {/* Main content */} + {loggedIn && ( + <> + +
+ {children} +
+ + )} +