From db1ebcb19d7caf6ac12e998a1d531a4eb87aee50 Mon Sep 17 00:00:00 2001
From: NotII <46204250+NotII@users.noreply.github.com>
Date: Fri, 1 Aug 2025 15:27:52 +0100
Subject: [PATCH] Refactor KeepOnline logic and add useKeepOnline hook

Moved dashboard path check from KeepOnline to a new KeepOnlineWrapper component for cleaner separation of concerns. Introduced a reusable useKeepOnline hook to encapsulate the online status update logic. Updated layout to use KeepOnlineWrapper and simplified KeepOnline. Minor cleanup in broadcast-dialog.tsx.
---
 app/layout.tsx                          |  4 +-
 components/KeepOnline.ts                | 20 +++------
 components/layout/KeepOnlineWrapper.tsx | 17 ++++++++
 components/modals/broadcast-dialog.tsx  |  1 -
 hooks/useKeepOnline.ts                  | 57 +++++++++++++++++++++++++
 5 files changed, 83 insertions(+), 16 deletions(-)
 create mode 100644 components/layout/KeepOnlineWrapper.tsx
 create mode 100644 hooks/useKeepOnline.ts

diff --git a/app/layout.tsx b/app/layout.tsx
index 241abd8..09d6882 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -3,9 +3,9 @@ import "./globals.css"
 import { ThemeProvider } from "@/components/layout/theme-provider"
 import { Toaster } from "sonner"
 import type React from "react"
-import KeepOnline from "@/components/KeepOnline"
 import { NotificationProvider } from "@/lib/notification-context"
 import { Metadata, Viewport } from "next"
+import KeepOnlineWrapper from "@/components/layout/KeepOnlineWrapper"
 
 const inter = Inter({ subsets: ["latin"] })
   
@@ -77,7 +77,7 @@ export default function RootLayout({
               richColors 
               position="top-right" 
             />
-            <KeepOnline />
+            <KeepOnlineWrapper />
             {children}
           </NotificationProvider>
         </ThemeProvider>
diff --git a/components/KeepOnline.ts b/components/KeepOnline.ts
index d4939ba..7e84417 100644
--- a/components/KeepOnline.ts
+++ b/components/KeepOnline.ts
@@ -1,21 +1,15 @@
 "use client";
 
-import { useEffect } from "react";
-import { clientFetch } from "@/lib/api";
+import { useKeepOnline } from "@/hooks/useKeepOnline";
 
 const KeepOnline = () => { 
-  useEffect(() => {
-    if(window.location.pathname.includes("/dashboard")){
-        const updateOnlineStatus = () => {
-            console.log("Updating online status...");
-            clientFetch('/auth/me');
-        }
-    
-        const interval = setInterval(updateOnlineStatus, 1000*60*1);
-        
-        return () => clearInterval(interval);
+  useKeepOnline({
+    interval: 1000 * 60 * 1, // 1 minute
+    enabled: true,
+    onError: (error) => {
+      console.error("Keep online error:", error);
     }
-  }, []);
+  });
   
   return null;
 }
diff --git a/components/layout/KeepOnlineWrapper.tsx b/components/layout/KeepOnlineWrapper.tsx
new file mode 100644
index 0000000..de53516
--- /dev/null
+++ b/components/layout/KeepOnlineWrapper.tsx
@@ -0,0 +1,17 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import KeepOnline from "@/components/KeepOnline";
+
+const KeepOnlineWrapper = () => {
+  const pathname = usePathname();
+  
+  // Only render KeepOnline on dashboard pages
+  if (!pathname?.includes("/dashboard")) {
+    return null;
+  }
+  
+  return <KeepOnline />;
+};
+
+export default KeepOnlineWrapper; 
\ No newline at end of file
diff --git a/components/modals/broadcast-dialog.tsx b/components/modals/broadcast-dialog.tsx
index dec26b9..bbc9d0f 100644
--- a/components/modals/broadcast-dialog.tsx
+++ b/components/modals/broadcast-dialog.tsx
@@ -29,7 +29,6 @@ export default function BroadcastDialog({ open, setOpen }: BroadcastDialogProps)
   const handleImageSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
     const file = event.target.files?.[0];
     if (file) {
-      // Magic 10 MB Limit 
       if (file.size > 10 * 1024 * 1024) {
         toast.error("Image size must be less than 10MB");
         return;
diff --git a/hooks/useKeepOnline.ts b/hooks/useKeepOnline.ts
new file mode 100644
index 0000000..0e5b406
--- /dev/null
+++ b/hooks/useKeepOnline.ts
@@ -0,0 +1,57 @@
+import { useEffect, useRef } from "react";
+import { clientFetch } from "@/lib/api";
+
+interface UseKeepOnlineOptions {
+  interval?: number; // in milliseconds
+  enabled?: boolean;
+  onError?: (error: any) => void;
+}
+
+export const useKeepOnline = (options: UseKeepOnlineOptions = {}) => {
+  const { 
+    interval = 1000 * 60 * 1, // 1 minute default
+    enabled = true,
+    onError 
+  } = options;
+  
+  const intervalRef = useRef<NodeJS.Timeout | null>(null);
+
+  useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+
+    const updateOnlineStatus = async () => {
+      try {
+        console.log("Updating online status...");
+        await clientFetch('/auth/me');
+      } catch (error) {
+        console.error("Failed to update online status:", error);
+        onError?.(error);
+      }
+    };
+
+    // Initial call
+    updateOnlineStatus();
+
+    // Set up interval
+    intervalRef.current = setInterval(updateOnlineStatus, interval);
+
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+    };
+  }, [enabled, interval, onError]);
+
+  return {
+    isActive: enabled && intervalRef.current !== null,
+    stop: () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+    }
+  };
+}; 
\ No newline at end of file