From b0aa2020c434ab04213e1676bcaf66931a22107c Mon Sep 17 00:00:00 2001
From: chark1es <charles15851@gmail.com>
Date: Sat, 1 Mar 2025 03:47:36 -0800
Subject: [PATCH] fix auto refresh on tab switch

---
 .../Officer_EventRequestManagement.astro         |  7 +++++--
 .../EventRequestManagementTable.tsx              | 16 ++++++++++++++++
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/components/dashboard/Officer_EventRequestManagement.astro b/src/components/dashboard/Officer_EventRequestManagement.astro
index 8f417f0..645221d 100644
--- a/src/components/dashboard/Officer_EventRequestManagement.astro
+++ b/src/components/dashboard/Officer_EventRequestManagement.astro
@@ -152,10 +152,13 @@ try {
 </div>
 
 <script>
-    // Refresh the page when the user navigates back to it
+    // Remove the visibilitychange event listener that causes full page refresh
+    // Instead, we'll use a more efficient approach to refresh data only when needed
     document.addEventListener("visibilitychange", () => {
         if (document.visibilityState === "visible") {
-            window.location.reload();
+            // Instead of reloading the entire page, dispatch a custom event
+            // that components can listen for to refresh their data
+            document.dispatchEvent(new CustomEvent("dashboardTabVisible"));
         }
     });
 
diff --git a/src/components/dashboard/Officer_EventRequestManagement/EventRequestManagementTable.tsx b/src/components/dashboard/Officer_EventRequestManagement/EventRequestManagementTable.tsx
index cb2b977..b73c7a1 100644
--- a/src/components/dashboard/Officer_EventRequestManagement/EventRequestManagementTable.tsx
+++ b/src/components/dashboard/Officer_EventRequestManagement/EventRequestManagementTable.tsx
@@ -303,6 +303,22 @@ const EventRequestManagementTable = ({ eventRequests: initialEventRequests }: Ev
         refreshEventRequests();
     }, []);
 
+    // Listen for tab visibility changes and refresh data when tab becomes visible
+    useEffect(() => {
+        const handleTabVisible = () => {
+            console.log("Tab became visible, refreshing event requests...");
+            refreshEventRequests();
+        };
+
+        // Add event listener for custom dashboardTabVisible event
+        document.addEventListener("dashboardTabVisible", handleTabVisible);
+
+        // Clean up event listener on component unmount
+        return () => {
+            document.removeEventListener("dashboardTabVisible", handleTabVisible);
+        };
+    }, []);
+
     if (filteredRequests.length === 0) {
         return (
             <motion.div