From d5a0995c152bb52fe175c09ba5aaa40d965666e7 Mon Sep 17 00:00:00 2001 From: Allan Joston Fernandes Date: Tue, 10 Dec 2024 00:04:26 +0530 Subject: [PATCH 1/2] feat: handle online/offline status detection in the platform --- apps/platform/src/app/layout.tsx | 6 ++++- .../common/online-status-handler.tsx | 10 ++++++++ apps/platform/src/hooks/use-online-status.ts | 25 +++++++++++++++++++ 3 files changed, 40 insertions(+), 1 deletion(-) create mode 100644 apps/platform/src/components/common/online-status-handler.tsx create mode 100644 apps/platform/src/hooks/use-online-status.ts diff --git a/apps/platform/src/app/layout.tsx b/apps/platform/src/app/layout.tsx index d9e2a617..011b6b19 100644 --- 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 ( - {children} + + + {children} + diff --git a/apps/platform/src/components/common/online-status-handler.tsx b/apps/platform/src/components/common/online-status-handler.tsx new file mode 100644 index 00000000..f5685750 --- /dev/null +++ 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 new file mode 100644 index 00000000..da087e3c --- /dev/null +++ b/apps/platform/src/hooks/use-online-status.ts @@ -0,0 +1,25 @@ +import { useEffect } from "react" +import { toast } from "sonner"; + +const statusHandler = () => { + if (navigator.onLine) { + toast.success("You are back online! Refreshing..."); + setTimeout(() => { + window.location.reload(); + }, 1000); + } else { + toast.error("You are offline"); + } +}; + +export const useOnlineStatus = () => { + useEffect(() => { + window.addEventListener("online", statusHandler); + window.addEventListener("offline", statusHandler); + + return () => { + window.removeEventListener("online", statusHandler); + window.removeEventListener("offline", statusHandler); + } + }, []); +} \ No newline at end of file From 865bb2135706d64ea88707c97d378d4ff5a4c3d9 Mon Sep 17 00:00:00 2001 From: Allan Joston Fernandes Date: Tue, 10 Dec 2024 22:47:40 +0530 Subject: [PATCH 2/2] fix: use timer ref to hold setTimeout id --- apps/platform/src/hooks/use-online-status.ts | 30 +++++++++++++------- 1 file changed, 19 insertions(+), 11 deletions(-) diff --git a/apps/platform/src/hooks/use-online-status.ts b/apps/platform/src/hooks/use-online-status.ts index da087e3c..e6758e1f 100644 --- a/apps/platform/src/hooks/use-online-status.ts +++ b/apps/platform/src/hooks/use-online-status.ts @@ -1,18 +1,26 @@ -import { useEffect } from "react" +import { useEffect, useRef } from "react" import { toast } from "sonner"; -const statusHandler = () => { - if (navigator.onLine) { - toast.success("You are back online! Refreshing..."); - setTimeout(() => { - window.location.reload(); +export const useOnlineStatus = () => { + const statusTimeout = useRef(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); - } else { - toast.error("You are offline"); - } -}; + }; -export const useOnlineStatus = () => { useEffect(() => { window.addEventListener("online", statusHandler); window.addEventListener("offline", statusHandler);