added improved error handeling

frontend/src/App.tsx

@@ -6,7 +6,11 @@ import Form2 from "./components/Form2";
 import Form4 from "./components/Form4";
 import LoginForm from "./components/LoginForm";
 import Cookies from "js-cookie";
-import { fetchAllData, ALL_ITEMS_UPDATED_EVENT } from "./utils/fetchData";
+import {
+  fetchAllData,
+  ALL_ITEMS_UPDATED_EVENT,
+  AUTH_LOGOUT_EVENT,
+} from "./utils/fetchData";
 import { myToast } from "./utils/toastify";
 
 function App() {
@@ -18,10 +22,17 @@ function App() {
       setIsLoggedIn(true);
       fetchAllData(token);
     }
-
     localStorage.setItem("borrowableItems", JSON.stringify([]));
   }, []);
 
+  useEffect(() => {
+    const onAuthLogout = () => {
+      setIsLoggedIn(false);
+    };
+    window.addEventListener(AUTH_LOGOUT_EVENT, onAuthLogout);
+    return () => window.removeEventListener(AUTH_LOGOUT_EVENT, onAuthLogout);
+  }, []);
+
   const handleLogout = () => {
     Cookies.remove("token");
     localStorage.removeItem("allItems");

frontend/src/utils/fetchData.ts

@@ -4,6 +4,22 @@ 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 BORROWABLE_ITEMS_UPDATED_EVENT = "borrowableItemsUpdated";
+export const AUTH_LOGOUT_EVENT = "authLogout";
+
+let sendError = false;
+
+function logout() {
+  Cookies.remove("token");
+  Cookies.remove("startDate");
+  Cookies.remove("endDate");
+  localStorage.removeItem("allItems");
+  localStorage.removeItem("allLoans");
+  localStorage.removeItem("userLoans");
+  localStorage.removeItem("borrowableItems");
+  window.dispatchEvent(new Event(ALL_ITEMS_UPDATED_EVENT));
+  window.dispatchEvent(new Event(BORROWABLE_ITEMS_UPDATED_EVENT));
+  window.dispatchEvent(new Event(AUTH_LOGOUT_EVENT));
+}
 
 export const fetchAllData = async (token: string | undefined) => {
   if (!token) return;
@@ -16,6 +32,16 @@ export const fetchAllData = async (token: string | undefined) => {
       },
     });
 
+    if (response.status === 401) {
+      if (!sendError) {
+        sendError = true;
+        myToast("Session expired. Please log in again.", "error");
+        logout();
+        return;
+      }
+      return;
+    }
+
     if (!response.ok) {
       myToast("Failed to fetch items", "error");
       return;
@@ -38,6 +64,16 @@ export const fetchAllData = async (token: string | undefined) => {
       },
     });
 
+    if (response.status === 401) {
+      if (!sendError) {
+        sendError = true;
+        myToast("Session expired. Please log in again.", "error");
+        logout();
+        return;
+      }
+      return;
+    }
+
     if (!response.ok) {
       myToast("Failed to fetch loans!", "error");
       return;
@@ -60,6 +96,16 @@ export const fetchAllData = async (token: string | undefined) => {
       },
     });
 
+    if (response.status === 401) {
+      if (!sendError) {
+        sendError = true;
+        myToast("Session expired. Please log in again.", "error");
+        logout();
+        return;
+      }
+      return;
+    }
+
     if (!response.ok) {
       myToast("Failed to fetch user loans!", "error");
       return;
@@ -122,6 +168,16 @@ export const getBorrowableItems = async () => {
       body: JSON.stringify({ startDate, endDate }),
     });
 
+    if (response.status === 401) {
+      if (!sendError) {
+        sendError = true;
+        myToast("Session expired. Please log in again.", "error");
+        logout();
+        return;
+      }
+      return;
+    }
+
     if (!response.ok) {
       myToast("Failed to fetch borrowable items", "error");
       return;