From eabb16dde1629c069e2a556ae836e67558bac09b Mon Sep 17 00:00:00 2001
From: Ren Amamiya <123083837+reyamir@users.noreply.github.com>
Date: Sat, 18 Mar 2023 09:27:36 +0700
Subject: [PATCH] added network status & updated root note component

---
 src/components/columns/account/index.tsx |  2 +-
 src/components/note/connector.tsx        | 29 ++++++++--
 src/components/note/content/metadata.tsx |  5 +-
 src/components/note/root.tsx             | 69 ++++++++++++++++++++++--
 4 files changed, 95 insertions(+), 10 deletions(-)

diff --git a/src/components/columns/account/index.tsx b/src/components/columns/account/index.tsx
index e62fd498..96907120 100644
--- a/src/components/columns/account/index.tsx
+++ b/src/components/columns/account/index.tsx
@@ -48,7 +48,7 @@ export default function AccountColumn() {
         </Link>
       </div>
       <div className="flex flex-col gap-0.5 text-center">
-        <span className="bg-gradient-to-r from-fuchsia-300 via-orange-100 to-amber-300 bg-clip-text text-sm font-black uppercase leading-tight text-transparent">
+        <span className="animate-moveBg from-fuchsia-300 via-orange-100 to-amber-300 text-sm font-black uppercase leading-tight text-zinc-600 hover:bg-gradient-to-r hover:bg-clip-text hover:text-transparent">
           Lume
         </span>
         <span className="text-xs font-medium text-zinc-700">v{version}</span>
diff --git a/src/components/note/connector.tsx b/src/components/note/connector.tsx
index e54effba..618bb9f6 100644
--- a/src/components/note/connector.tsx
+++ b/src/components/note/connector.tsx
@@ -7,7 +7,7 @@ import { dateToUnix, hoursAgo } from '@utils/getDate';
 
 import { useLocalStorage } from '@rehooks/local-storage';
 import { useSetAtom } from 'jotai';
-import { memo, useCallback, useContext, useMemo, useRef } from 'react';
+import { memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 
 export const NoteConnector = memo(function NoteConnector() {
   const { db }: any = useContext(DatabaseContext);
@@ -17,6 +17,7 @@ export const NoteConnector = memo(function NoteConnector() {
   const [relays]: any = useLocalStorage('relays');
 
   const setHasNewerNote = useSetAtom(atomHasNewerNote);
+  const [isOnline, setIsOnline] = useState(navigator.onLine);
   const now = useRef(new Date());
 
   const insertDB = useCallback(
@@ -51,14 +52,34 @@ export const NoteConnector = memo(function NoteConnector() {
     );
   }, [relayPool, follows, relays, insertDB, setHasNewerNote]);
 
+  useEffect(() => {
+    const handleStatusChange = () => {
+      setIsOnline(navigator.onLine);
+    };
+
+    window.addEventListener('online', handleStatusChange);
+    window.addEventListener('offline', handleStatusChange);
+
+    return () => {
+      window.removeEventListener('online', handleStatusChange);
+      window.removeEventListener('offline', handleStatusChange);
+    };
+  }, [isOnline]);
+
   return (
     <>
       <div className="inline-flex items-center gap-1 rounded-md py-1 px-1.5 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 bg-green-400 opacity-75"></span>
-          <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-green-500"></span>
+          <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">Relays</p>
+        <p className="text-xs font-medium text-zinc-500">{isOnline ? 'Online' : 'Offline'}</p>
       </div>
     </>
   );
diff --git a/src/components/note/content/metadata.tsx b/src/components/note/content/metadata.tsx
index f9094e95..ac52b140 100644
--- a/src/components/note/content/metadata.tsx
+++ b/src/components/note/content/metadata.tsx
@@ -37,8 +37,11 @@ export default function NoteMetadata({ eventID, eventPubkey }: { eventID: string
         }
       },
       undefined,
-      (events: any, relayURL: any) => {
+      (events, relayURL) => {
         console.log(events, relayURL);
+      },
+      {
+        unsubscribeOnEose: true,
       }
     );
     // eslint-disable-next-line react-hooks/exhaustive-deps
diff --git a/src/components/note/root.tsx b/src/components/note/root.tsx
index 36e3090a..d8190f17 100644
--- a/src/components/note/root.tsx
+++ b/src/components/note/root.tsx
@@ -1,3 +1,4 @@
+import { DatabaseContext } from '@components/contexts/database';
 import { RelayContext } from '@components/contexts/relay';
 import { Content } from '@components/note/content';
 
@@ -5,11 +6,28 @@ import useLocalStorage from '@rehooks/local-storage';
 import { memo, useCallback, useContext, useEffect, useState } from 'react';
 
 export const RootNote = memo(function RootNote({ id }: { id: string }) {
+  const { db }: any = useContext(DatabaseContext);
   const relayPool: any = useContext(RelayContext);
 
   const [relays]: any = useLocalStorage('relays');
   const [event, setEvent] = useState(null);
 
+  const insertDB = useCallback(
+    async (event: any) => {
+      // insert to local database
+      await db.execute(
+        'INSERT OR IGNORE INTO cache_notes (id, pubkey, created_at, kind, content, tags) VALUES (?, ?, ?, ?, ?, ?);',
+        [event.id, event.pubkey, event.created_at, event.kind, event.content, JSON.stringify(event.tags)]
+      );
+    },
+    [db]
+  );
+
+  const getData = useCallback(async () => {
+    const result = await db.select(`SELECT * FROM cache_notes WHERE id = "${id}"`);
+    return result[0];
+  }, []);
+
   const fetchEvent = useCallback(() => {
     relayPool.subscribe(
       [
@@ -20,14 +38,32 @@ export const RootNote = memo(function RootNote({ id }: { id: string }) {
       ],
       relays,
       (event: any) => {
+        // update state
         setEvent(event);
+        // insert to database
+        insertDB(event);
+      },
+      undefined,
+      (events, relayURL) => {
+        console.log(events, relayURL);
+      },
+      {
+        unsubscribeOnEose: true,
       }
     );
-  }, [id, relayPool, relays]);
+  }, [id, insertDB, relayPool, relays]);
 
   useEffect(() => {
-    fetchEvent();
-  }, [fetchEvent]);
+    getData()
+      .then((res) => {
+        if (res) {
+          setEvent(res);
+        } else {
+          fetchEvent();
+        }
+      })
+      .catch(console.error);
+  }, [fetchEvent, getData]);
 
   if (event) {
     return (
@@ -37,6 +73,31 @@ export const RootNote = memo(function RootNote({ id }: { id: string }) {
       </div>
     );
   } else {
-    return <>Loading...</>;
+    return (
+      <div className="relative z-10 flex h-min animate-pulse select-text flex-col">
+        <div className="flex items-start gap-4">
+          <div className="relative h-11 w-11 shrink overflow-hidden rounded-full bg-zinc-700" />
+          <div className="flex w-full flex-1 items-start justify-between">
+            <div className="flex w-full items-center justify-between">
+              <div className="flex items-center gap-2 text-sm">
+                <div className="h-4 w-16 rounded bg-zinc-700" />
+                <span className="text-zinc-500">·</span>
+                <div className="h-4 w-12 rounded bg-zinc-700" />
+              </div>
+              <div className="h-3 w-3 rounded-full bg-zinc-700" />
+            </div>
+          </div>
+        </div>
+        <div className="-mt-4 pl-[60px]">
+          <div className="flex flex-col gap-6">
+            <div className="h-16 w-full rounded bg-zinc-700" />
+            <div className="flex items-center gap-8">
+              <div className="h-4 w-12 rounded bg-zinc-700" />
+              <div className="h-4 w-12 rounded bg-zinc-700" />
+            </div>
+          </div>
+        </div>
+      </div>
+    );
   }
 });