added network status & updated root note component

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>
+    );
   }
 });