detect offline client (#129)

0xFableOrg · Apr 2, 2024 · a037159 · a037159
2 parents 5080439 + 4680398
commit a037159
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 0 deletions.
diff --git a/packages/webapp/src/hooks/useOfflineCheck.ts b/packages/webapp/src/hooks/useOfflineCheck.ts
@@ -0,0 +1,33 @@
+import { useEffect, useState } from "react"
+
+import { toast } from "sonner"
+
+function useOfflineCheck() {
+    const [isOnline, setIsOnline] = useState(true)
+
+    useEffect(() => {
+        const handleOnline = () => setIsOnline(true)
+        const handleOffline = () => setIsOnline(false)
+
+        window.addEventListener("online", handleOnline)
+        window.addEventListener("offline", handleOffline)
+
+        return () => {
+            window.removeEventListener("online", handleOnline)
+            window.removeEventListener("offline", handleOffline)
+        }
+    }, [])
+
+    useEffect(() => {
+        if (!isOnline) {
+            toast.error("App is offline. Please check your internet connection.", {
+                dismissible: false,
+                duration: Infinity,
+            })
+        } else {
+            toast.dismiss()
+        }
+    }, [isOnline])
+}
+
+export default useOfflineCheck
diff --git a/packages/webapp/src/pages/_app.tsx b/packages/webapp/src/pages/_app.tsx
@@ -15,6 +15,7 @@ import jotaiDebug from "src/components/lib/jotaiDebug"
 import { GlobalErrorModal } from "src/components/modals/globalErrorModal"
 import { Toaster } from "src/components/ui/sonner"
 import { useIsHydrated } from "src/hooks/useIsHydrated"
+import useOfflineCheck from "src/hooks/useOfflineCheck"
 import { useErrorConfig } from "src/store/hooks"
 
 import "src/styles/globals.css"
@@ -33,6 +34,7 @@ export type FablePage = NextPage<{ isHydrated: boolean }>
 // =================================================================================================
 
 const MyApp: AppType = ({ Component, pageProps }) => {
+    useOfflineCheck()
     return (
         <>
             <Head>