From e9c3ac9647f91e42d317db369663a063daffe83c Mon Sep 17 00:00:00 2001
From: Amr Ahmed <47694180+AmrAhmedA@users.noreply.github.com>
Date: Tue, 13 Aug 2024 00:51:43 +0300
Subject: [PATCH] fix: undefined navigator (#18)

* fix: undefined navigator

* fix: navigator behavior on ssr
---
 package-lock.json | 10 ++++++++++
 package.json      |  7 ++++---
 src/hooks.tsx     | 50 ++++++++++++++++++-----------------------------
 3 files changed, 33 insertions(+), 34 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 514e5c1..fea3436 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -32,6 +32,7 @@
         "rollup-plugin-visualizer": "^5.9.2",
         "typescript": "^5.5.4",
         "vite": "^4.5.3",
+        "vite-plugin-css-injected-by-js": "^3.5.1",
         "vite-plugin-dts": "^3.9.1",
         "vue-tsc": "^2.0.29"
       },
@@ -5931,6 +5932,15 @@
         }
       }
     },
+    "node_modules/vite-plugin-css-injected-by-js": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/vite-plugin-css-injected-by-js/-/vite-plugin-css-injected-by-js-3.5.1.tgz",
+      "integrity": "sha512-9ioqwDuEBxW55gNoWFEDhfLTrVKXEEZgl5adhWmmqa88EQGKfTmexy4v1Rh0pAS6RhKQs2bUYQArprB32JpUZQ==",
+      "dev": true,
+      "peerDependencies": {
+        "vite": ">2.0.0-0"
+      }
+    },
     "node_modules/vite-plugin-dts": {
       "version": "3.9.1",
       "resolved": "https://registry.npmjs.org/vite-plugin-dts/-/vite-plugin-dts-3.9.1.tgz",
diff --git a/package.json b/package.json
index be56d9c..19a5f58 100644
--- a/package.json
+++ b/package.json
@@ -93,12 +93,13 @@
     "rollup-plugin-visualizer": "^5.9.2",
     "typescript": "^5.5.4",
     "vite": "^4.5.3",
-    "vue-tsc": "^2.0.29",
-    "vite-plugin-dts": "^3.9.1"
+    "vite-plugin-css-injected-by-js": "^3.5.1",
+    "vite-plugin-dts": "^3.9.1",
+    "vue-tsc": "^2.0.29"
   },
   "peerDependencies": {
     "react": ">=16",
     "react-dom": ">=16",
     "react-transition-group": "^4.4.5"
   }
-}
\ No newline at end of file
+}
diff --git a/src/hooks.tsx b/src/hooks.tsx
index 1b94233..c1ce541 100644
--- a/src/hooks.tsx
+++ b/src/hooks.tsx
@@ -1,11 +1,4 @@
-import {
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useReducer,
-  useRef,
-  useState,
-} from 'react'
+import { useCallback, useEffect, useReducer, useRef, useState } from 'react'
 import { DEFAULT_POLLING_URL, timeSince } from './utils'
 
 const isWindowDocumentAvailable = typeof window !== 'undefined'
@@ -13,30 +6,22 @@ const isWindowDocumentAvailable = typeof window !== 'undefined'
 const isNavigatorObjectAvailable = typeof navigator !== 'undefined'
 
 function getConnectionInfo() {
-  return (
-    navigator['connection'] ||
-    navigator['mozConnection'] ||
-    navigator['webkitConnection'] ||
-    null
-  )
+  if (isNavigatorObjectAvailable)
+    return (
+      navigator?.['connection'] ||
+      navigator?.['mozConnection'] ||
+      navigator?.['webkitConnection'] ||
+      null
+    )
+  return false
 }
 
-const useIsomorphicLayoutEffect =
-  typeof window !== 'undefined' || typeof navigator !== 'undefined'
-    ? useLayoutEffect
-    : useEffect
-
 type OnlineStatusProps = {
   pollingUrl?: string
   pollingDuration?: number
 }
 
-const InitialOnlineStatus =
-  isNavigatorObjectAvailable &&
-  isWindowDocumentAvailable &&
-  typeof navigator?.onLine === 'boolean'
-    ? navigator?.onLine
-    : true
+const InitialOnlineStatus = isNavigatorObjectAvailable ? navigator.onLine : true
 
 type ReducerActionTypes = 'offline' | 'online'
 type ReducerActions = {
@@ -175,12 +160,14 @@ function useOnlineStatus({
 
   // Reactive logic for detecting browser side online/offline
   useEffect(() => {
-    window.addEventListener('online', handleOnlineStatus)
-    window.addEventListener('offline', handleOnlineStatus)
+    if (isWindowDocumentAvailable) {
+      window.addEventListener('online', handleOnlineStatus)
+      window.addEventListener('offline', handleOnlineStatus)
 
-    return () => {
-      window.removeEventListener('online', handleOnlineStatus)
-      window.removeEventListener('offline', handleOnlineStatus)
+      return () => {
+        window.removeEventListener('online', handleOnlineStatus)
+        window.removeEventListener('offline', handleOnlineStatus)
+      }
     }
   }, [handleOnlineStatus])
 
@@ -216,6 +203,7 @@ export function useInterval(
     function tick() {
       savedCallback.current()
     }
+
     if (delay !== null) {
       const id = setInterval(tick, delay)
       return () => clearInterval(id)
@@ -234,7 +222,7 @@ function useFirstRender(): { isFirstRender: boolean } {
   const [firstRender, setFirstRender] = useState(true)
 
   const { isOffline } = useOnlineStatus()
-  useIsomorphicLayoutEffect(() => {
+  useEffect(() => {
     if (firstRender && isOffline) setFirstRender(false)
   }, [isOffline])