From 8fbcd069b56f0cd82e9800220ae213874a4a96d2 Mon Sep 17 00:00:00 2001
From: "theis.gaedigk" <theis.gaedigk@icloud.com>
Date: Tue, 19 Aug 2025 14:21:30 +0200
Subject: [PATCH] Added improved login and logout route for the frontend. The
 frontend page now doesn't have to reload.

---
 frontend/src/App.tsx                  | 35 ++++++++++++---------------
 frontend/src/components/Header.tsx    | 15 ++++++------
 frontend/src/components/LoginForm.tsx |  1 -
 frontend/src/components/Sidebar.tsx   | 19 ++++++++++++---
 frontend/src/layout/Layout.tsx        | 20 +++------------
 frontend/src/main.tsx                 | 29 ++++++++++++++++------
 frontend/src/utils/fetchData.ts       |  5 ++++
 7 files changed, 68 insertions(+), 56 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index fdd45e2..bb84940 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -6,14 +6,17 @@ import Form2 from "./components/Form2";
 import Form3 from "./components/Form3";
 import LoginForm from "./components/LoginForm";
 import Cookies from "js-cookie";
-import { ToastContainer } from "react-toastify";
+import { fetchAllData, ALL_ITEMS_UPDATED_EVENT } from "./utils/fetchData";
+import { myToast } from "./utils/toastify";
 
 function App() {
   const [isLoggedIn, setIsLoggedIn] = useState(false);
 
   useEffect(() => {
-    if (Cookies.get("token")) {
+    const token = Cookies.get("token");
+    if (token) {
       setIsLoggedIn(true);
+      fetchAllData(token);
     }
 
     localStorage.setItem("borrowableItems", JSON.stringify([]));
@@ -21,8 +24,17 @@ function App() {
   }, []);
 
   // Mock flow without real logic: show the three sections stacked for design preview
+  const handleLogout = () => {
+    Cookies.remove("token");
+    localStorage.removeItem("allItems");
+    // Let listeners refresh from empty state
+    window.dispatchEvent(new Event(ALL_ITEMS_UPDATED_EVENT));
+    myToast("Logged out successfully!", "success");
+    setIsLoggedIn(false);
+  };
+
   return isLoggedIn ? (
-    <Layout>
+    <Layout onLogout={handleLogout}>
       <div className="space-y-10">
         <Form1 />
         <div className="h-px bg-blue-100" />
@@ -32,22 +44,7 @@ function App() {
       </div>
     </Layout>
   ) : (
-    <>
-      <LoginForm onLogin={() => setIsLoggedIn(true)} />
-      <ToastContainer
-        position="top-right"
-        autoClose={3000}
-        hideProgressBar={false}
-        newestOnTop
-        closeOnClick
-        rtl={false}
-        pauseOnFocusLoss={false}
-        draggable
-        pauseOnHover
-        theme="light"
-        className="!z-50"
-      />
-    </>
+    <LoginForm onLogin={() => setIsLoggedIn(true)} />
   );
 }
 
diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
index fcd95d2..e891823 100644
--- a/frontend/src/components/Header.tsx
+++ b/frontend/src/components/Header.tsx
@@ -1,7 +1,10 @@
 import React from "react";
-import Cookies from "js-cookie";
 
-const Header: React.FC = () => {
+type HeaderProps = {
+  onLogout: () => void;
+};
+
+const Header: React.FC<HeaderProps> = ({ onLogout }) => {
   return (
     <header className="mb-6 md:mb-10">
       <h1 className="text-3xl md:text-4xl font-extrabold text-blue-800 tracking-tight drop-shadow-sm">
@@ -11,12 +14,8 @@ const Header: React.FC = () => {
         Schnell und unkompliziert Equipment reservieren
       </p>
       <button
-        onClick={() => {
-          Cookies.remove("token");
-          localStorage.removeItem("allItems");
-
-          window.location.reload();
-        }}
+        type="button"
+        onClick={onLogout}
         className="text-blue-500 hover:underline"
       >
         Logout
diff --git a/frontend/src/components/LoginForm.tsx b/frontend/src/components/LoginForm.tsx
index 37748e5..78121c9 100644
--- a/frontend/src/components/LoginForm.tsx
+++ b/frontend/src/components/LoginForm.tsx
@@ -15,7 +15,6 @@ const LoginForm: React.FC<LoginFormProps> = ({ onLogin }) => {
     e.preventDefault();
     const result = await loginUser(username, password);
     if (result.success) {
-      myToast("Login successful!", "success");
       onLogin();
     } else {
       myToast("Login failed. Please check your credentials.", "error");
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index 4f5cf19..59e59ae 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -1,11 +1,22 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import Object from "./Object";
-import { useEffect } from "react";
+import { ALL_ITEMS_UPDATED_EVENT } from "../utils/fetchData";
 
 const Sidebar: React.FC = () => {
-  useEffect(() => {});
+  const [items, setItems] = useState<any[]>(
+    JSON.parse(localStorage.getItem("allItems") || "[]")
+  );
 
-  const items = JSON.parse(localStorage.getItem("allItems") || "[]");
+  useEffect(() => {
+    const handler = () => {
+      const next = JSON.parse(localStorage.getItem("allItems") || "[]");
+      setItems(next);
+    };
+    // Update immediately in case data changed before this mounted
+    handler();
+    window.addEventListener(ALL_ITEMS_UPDATED_EVENT, handler);
+    return () => window.removeEventListener(ALL_ITEMS_UPDATED_EVENT, handler);
+  }, []);
 
   return (
     <aside className="w-full md:w-80 md:min-h-screen bg-white/90 backdrop-blur md:border-r border-blue-100 shadow-xl flex flex-col p-6">
diff --git a/frontend/src/layout/Layout.tsx b/frontend/src/layout/Layout.tsx
index b889271..b0d19ab 100644
--- a/frontend/src/layout/Layout.tsx
+++ b/frontend/src/layout/Layout.tsx
@@ -1,14 +1,14 @@
 import React from "react";
 import "../App.css";
-import { ToastContainer } from "react-toastify";
 import Header from "../components/Header";
 import Sidebar from "../components/Sidebar";
 
 type LayoutProps = {
   children: React.ReactNode;
+  onLogout: () => void;
 };
 
-const Layout: React.FC<LayoutProps> = ({ children }) => {
+const Layout: React.FC<LayoutProps> = ({ children, onLogout }) => {
   return (
     <div className="min-h-screen flex bg-gradient-to-r from-blue-50 via-white to-blue-100">
       {/* Sidebar */}
@@ -19,7 +19,7 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
       {/* Main */}
       <main className="flex-1 flex flex-col items-center py-10 px-4 md:py-14">
         <div className="w-full max-w-3xl">
-          <Header />
+          <Header onLogout={onLogout} />
         </div>
         <div className="w-full max-w-3xl bg-white/90 shadow-2xl rounded-3xl p-6 md:p-10 ring-1 ring-blue-100">
           {children}
@@ -32,20 +32,6 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
           <Sidebar />
         </div>
       </div>
-
-      <ToastContainer
-        position="top-right"
-        autoClose={3000}
-        hideProgressBar={false}
-        newestOnTop
-        closeOnClick
-        rtl={false}
-        pauseOnFocusLoss={false}
-        draggable
-        pauseOnHover
-        theme="light"
-        className="!z-50"
-      />
     </div>
   );
 };
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index bef5202..e583583 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -1,10 +1,25 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.css'
-import App from './App.tsx'
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import App from "./App.tsx";
+import { ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
 
-createRoot(document.getElementById('root')!).render(
+createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <App />
-  </StrictMode>,
-)
+    <ToastContainer
+      position="top-right"
+      autoClose={3000}
+      hideProgressBar={false}
+      newestOnTop
+      closeOnClick
+      rtl={false}
+      pauseOnFocusLoss={false}
+      draggable
+      pauseOnHover
+      theme="light"
+      style={{ zIndex: 9999 }}
+    />
+  </StrictMode>
+);
diff --git a/frontend/src/utils/fetchData.ts b/frontend/src/utils/fetchData.ts
index 5eec60f..eb09261 100644
--- a/frontend/src/utils/fetchData.ts
+++ b/frontend/src/utils/fetchData.ts
@@ -1,6 +1,9 @@
 import Cookies from "js-cookie";
 import { myToast } from "./toastify";
 
+// Event name used to notify the app when the list of items has been updated
+export const ALL_ITEMS_UPDATED_EVENT = "allItemsUpdated";
+
 export const fetchAllData = async (token: string | undefined) => {
   if (!token) return;
   try {
@@ -19,6 +22,8 @@ export const fetchAllData = async (token: string | undefined) => {
 
     const data = await response.json();
     localStorage.setItem("allItems", JSON.stringify(data));
+    // Notify listeners (e.g., Sidebar) that items have been updated
+    window.dispatchEvent(new Event(ALL_ITEMS_UPDATED_EVENT));
   } catch (error) {
     myToast("An error occurred", "error");
   }