feat(platofrm): Added online/offline status detection in the platform (…

…#585)
keyshade-xyz · Dec 14, 2024 · 89aa84f · 89aa84f
1 parent a92925f
commit 89aa84f
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 1 deletion.
diff --git a/apps/platform/src/app/layout.tsx b/apps/platform/src/app/layout.tsx
@@ -1,6 +1,7 @@
 import { Toaster } from '@/components/ui/sonner'
 import './global.css'
 import JotaiProvider from '@/components/jotaiProvider'
+import OnlineStatusHandler from '@/components/common/online-status-handler'
 
 export const metadata = {
   title: 'Keyshade',
@@ -15,7 +16,10 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body>
-        <JotaiProvider>{children}</JotaiProvider>
+        <JotaiProvider>
+          <OnlineStatusHandler />
+          {children}
+        </JotaiProvider>
       </body>
       <Toaster richColors />
     </html>

diff --git a/apps/platform/src/components/common/online-status-handler.tsx b/apps/platform/src/components/common/online-status-handler.tsx
@@ -0,0 +1,10 @@
+'use client'
+
+import { useOnlineStatus } from "@/hooks/use-online-status";
+
+function OnlineStatusHandler() {
+    useOnlineStatus();
+    return null;
+}
+
+export default OnlineStatusHandler;
diff --git a/apps/platform/src/hooks/use-online-status.ts b/apps/platform/src/hooks/use-online-status.ts
@@ -0,0 +1,33 @@
+import { useEffect, useRef } from "react"
+import { toast } from "sonner";
+
+export const useOnlineStatus = () => {
+    const statusTimeout = useRef<NodeJS.Timeout | null>(null);
+
+    const statusHandler = () => {
+        if (statusTimeout.current) {
+            clearTimeout(statusTimeout.current);
+        }
+
+        statusTimeout.current = setTimeout(() => {
+            if (navigator.onLine) {
+                toast.success("You are back online! Refreshing...");
+                setTimeout(() => {
+                    window.location.reload();
+                }, 1000);
+            } else {
+                toast.error("You are offline");
+            }
+        }, 1000);
+    };
+
+    useEffect(() => {
+        window.addEventListener("online", statusHandler);
+        window.addEventListener("offline", statusHandler);
+
+        return () => {
+            window.removeEventListener("online", statusHandler);
+            window.removeEventListener("offline", statusHandler);
+        }
+    }, []);
+}