From 4ad5cdbe3d3bd58259eb2c316aa6eec4d3735180 Mon Sep 17 00:00:00 2001
From: Ren Amamiya <123083837+reyamir@users.noreply.github.com>
Date: Fri, 14 Apr 2023 14:56:01 +0700
Subject: [PATCH] added network status

---
 src/components/eventCollector.tsx         | 24 +++++++----------------
 src/components/networkStatusIndicator.tsx | 21 ++++++++++++++++++++
 src/utils/network.tsx                     | 23 ++++++++++++++++++++++
 3 files changed, 51 insertions(+), 17 deletions(-)
 create mode 100644 src/components/networkStatusIndicator.tsx
 create mode 100644 src/utils/network.tsx

diff --git a/src/components/eventCollector.tsx b/src/components/eventCollector.tsx
index d46ff190..c9c33623 100644
--- a/src/components/eventCollector.tsx
+++ b/src/components/eventCollector.tsx
@@ -1,3 +1,4 @@
+import { NetworkStatusIndicator } from '@components/networkStatusIndicator';
 import { RelayContext } from '@components/relaysProvider';
 
 import { hasNewerNoteAtom } from '@stores/note';
@@ -10,17 +11,16 @@ import useLocalStorage, { writeStorage } from '@rehooks/local-storage';
 import { window } from '@tauri-apps/api';
 import { TauriEvent } from '@tauri-apps/api/event';
 import { useSetAtom } from 'jotai';
-import { useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { useCallback, useContext, useEffect, useRef } from 'react';
 
 export default function EventCollector() {
   const [pool, relays]: any = useContext(RelayContext);
 
-  const [isOnline] = useState(true);
-  const setHasNewerNote = useSetAtom(hasNewerNoteAtom);
-
   const [activeAccount]: any = useLocalStorage('activeAccount', {});
   const [follows] = useLocalStorage('activeAccountFollows', []);
 
+  const setHasNewerNote = useSetAtom(hasNewerNoteAtom);
+
   const now = useRef(new Date());
   const unsubscribe = useRef(null);
   const unlisten = useRef(null);
@@ -132,18 +132,8 @@ export default function EventCollector() {
   }, [setHasNewerNote, subscribe, listenWindowClose]);
 
   return (
-    <div className="inline-flex items-center gap-1 rounded-md px-1.5 py-1 hover:bg-zinc-900">
-      <span className="relative flex h-1.5 w-1.5">
-        <span
-          className={`absolute inline-flex h-full w-full animate-ping rounded-full opacity-75 ${
-            isOnline ? 'bg-green-400' : 'bg-red-400'
-          }`}
-        ></span>
-        <span
-          className={`relative inline-flex h-1.5 w-1.5 rounded-full ${isOnline ? 'bg-green-400' : 'bg-amber-400'}`}
-        ></span>
-      </span>
-      <p className="text-xs font-medium text-zinc-500">{isOnline ? 'Online' : 'Offline'}</p>
-    </div>
+    <>
+      <NetworkStatusIndicator />
+    </>
   );
 }
diff --git a/src/components/networkStatusIndicator.tsx b/src/components/networkStatusIndicator.tsx
new file mode 100644
index 00000000..e17bdbb3
--- /dev/null
+++ b/src/components/networkStatusIndicator.tsx
@@ -0,0 +1,21 @@
+import { useNavigatorOnLine } from '@utils/network';
+
+export const NetworkStatusIndicator = () => {
+  const isOnline = useNavigatorOnLine();
+
+  return (
+    <div className="inline-flex items-center gap-1 rounded-md px-1.5 py-1 hover:bg-zinc-900">
+      <div className="relative flex h-1.5 w-1.5">
+        <span
+          className={`absolute inline-flex h-full w-full animate-ping rounded-full opacity-75 ${
+            isOnline ? 'bg-green-400' : 'bg-red-400'
+          }`}
+        ></span>
+        <span
+          className={`relative inline-flex h-1.5 w-1.5 rounded-full ${isOnline ? 'bg-green-400' : 'bg-amber-400'}`}
+        ></span>
+      </div>
+      <p className="text-xs font-medium text-zinc-500">{isOnline ? 'Online' : 'Offline'}</p>
+    </div>
+  );
+};
diff --git a/src/utils/network.tsx b/src/utils/network.tsx
new file mode 100644
index 00000000..41db85a8
--- /dev/null
+++ b/src/utils/network.tsx
@@ -0,0 +1,23 @@
+import { useEffect, useState } from 'react';
+
+const getOnLineStatus = () =>
+  typeof navigator !== 'undefined' && typeof navigator.onLine === 'boolean' ? navigator.onLine : true;
+
+export const useNavigatorOnLine = () => {
+  const [status, setStatus] = useState(getOnLineStatus());
+
+  const setOnline = () => setStatus(true);
+  const setOffline = () => setStatus(false);
+
+  useEffect(() => {
+    window.addEventListener('online', setOnline);
+    window.addEventListener('offline', setOffline);
+
+    return () => {
+      window.removeEventListener('online', setOnline);
+      window.removeEventListener('offline', setOffline);
+    };
+  }, []);
+
+  return status;
+};