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

@@ -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>

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');
+  useKeepOnline({
+    interval: 1000 * 60 * 1, // 1 minute
+    enabled: true,
+    onError: (error) => {
+      console.error("Keep online error:", error);
     }
-    
-        const interval = setInterval(updateOnlineStatus, 1000*60*1);
-        
-        return () => clearInterval(interval);
-    }
-  }, []);
+  });
   
   return null;
 }

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; 

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;

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;
+      }
+    }
+  };
+};