From 53fd29ddb82c1eaf8ab340e8eb3ed76bd46d9c18 Mon Sep 17 00:00:00 2001
From: Ren Amamiya <123083837+reyamir@users.noreply.github.com>
Date: Tue, 25 Apr 2023 09:33:17 +0700
Subject: [PATCH] update layout

---
 src/components/channels/channelListItem.tsx | 10 +----
 src/components/channels/channelProfile.tsx  | 23 ++++++++++
 src/components/layouts/newsfeed.tsx         |  4 +-
 src/pages/channel/index.page.tsx            | 29 ++++++++++---
 src/pages/chat/index.page.tsx               |  2 +-
 src/pages/newsfeed/circle/index.page.tsx    |  8 +++-
 src/pages/newsfeed/following/index.page.tsx |  2 +-
 src/utils/hooks/useChannelMetadata.tsx      | 48 +++++++++++++++------
 src/utils/storage.tsx                       |  7 +++
 9 files changed, 99 insertions(+), 34 deletions(-)
 create mode 100644 src/components/channels/channelProfile.tsx

diff --git a/src/components/channels/channelListItem.tsx b/src/components/channels/channelListItem.tsx
index 73c99d7d..86219c29 100644
--- a/src/components/channels/channelListItem.tsx
+++ b/src/components/channels/channelListItem.tsx
@@ -6,15 +6,7 @@ import { usePageContext } from '@utils/hooks/usePageContext';
 import { twMerge } from 'tailwind-merge';
 
 export const ChannelListItem = ({ data }: { data: any }) => {
-  let fallback: any;
-
-  if (typeof data.metadata === 'object') {
-    fallback = data.metadata;
-  } else {
-    fallback = JSON.parse(data.metadata);
-  }
-
-  const channel: any = useChannelMetadata(data.event_id, fallback);
+  const channel: any = useChannelMetadata(data.event_id);
   const pageContext = usePageContext();
 
   const searchParams: any = pageContext.urlParsed.search;
diff --git a/src/components/channels/channelProfile.tsx b/src/components/channels/channelProfile.tsx
new file mode 100644
index 00000000..e8f43166
--- /dev/null
+++ b/src/components/channels/channelProfile.tsx
@@ -0,0 +1,23 @@
+import { useChannelMetadata } from '@utils/hooks/useChannelMetadata';
+
+import { nip19 } from 'nostr-tools';
+import Skeleton from 'react-loading-skeleton';
+
+export const ChannelProfile = ({ id }: { id: string }) => {
+  const metadata = useChannelMetadata(id);
+  const noteID = nip19.noteEncode(id);
+
+  return (
+    <div className="inline-flex items-center gap-2">
+      <div className="relative shrink-0 rounded-md">
+        <img src={metadata?.picture || <Skeleton />} alt={id} className="h-8 w-8 rounded bg-zinc-900 object-cover" />
+      </div>
+      <div className="flex flex-col gap-1">
+        <h5 className="truncate font-medium leading-none text-zinc-100">{metadata?.name || <Skeleton />}</h5>
+        <p className="text-xs leading-none text-zinc-400">
+          {metadata?.about || noteID.substring(0, 24) + '...' || <Skeleton />}
+        </p>
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/layouts/newsfeed.tsx b/src/components/layouts/newsfeed.tsx
index 357cb335..cc864ee4 100644
--- a/src/components/layouts/newsfeed.tsx
+++ b/src/components/layouts/newsfeed.tsx
@@ -20,9 +20,7 @@ export default function NewsfeedLayout({ children }: { children: React.ReactNode
             <div className="scrollbar-hide col-span-1 overflow-y-auto overflow-x-hidden border-r border-zinc-900">
               <Navigation />
             </div>
-            <div className="col-span-3 m-3 overflow-hidden rounded-lg border border-zinc-800 bg-zinc-900 shadow-input shadow-black/20 xl:col-span-4 xl:mr-1.5">
-              <div className="h-full w-full rounded-lg">{children}</div>
-            </div>
+            <div className="col-span-3 m-3 overflow-hidden xl:col-span-4">{children}</div>
           </div>
         </div>
       </div>
diff --git a/src/pages/channel/index.page.tsx b/src/pages/channel/index.page.tsx
index 59d47ebf..9454859b 100644
--- a/src/pages/channel/index.page.tsx
+++ b/src/pages/channel/index.page.tsx
@@ -1,4 +1,5 @@
 import { AccountContext } from '@components/accountProvider';
+import { ChannelProfile } from '@components/channels/channelProfile';
 import { FormChannel } from '@components/form/channel';
 import NewsfeedLayout from '@components/layouts/newsfeed';
 import { RelayContext } from '@components/relaysProvider';
@@ -9,6 +10,7 @@ import { MESSAGE_RELAYS } from '@stores/constants';
 import { dateToUnix, hoursAgo } from '@utils/getDate';
 import { usePageContext } from '@utils/hooks/usePageContext';
 
+import { EyeClose, MicMute } from 'iconoir-react';
 import { useSetAtom } from 'jotai';
 import { useResetAtom } from 'jotai/utils';
 import { Suspense, lazy, useContext, useRef } from 'react';
@@ -77,12 +79,27 @@ export function Page() {
 
   return (
     <NewsfeedLayout>
-      <div className="flex h-full w-full flex-col justify-between">
-        <Suspense fallback={<p>Loading...</p>}>
-          <ChannelMessages />
-        </Suspense>
-        <div className="shrink-0 p-3">
-          <FormChannel eventId={id} />
+      <div className="flex h-full flex-col justify-between gap-2">
+        <div className="flex h-11 w-full shrink-0 items-center justify-between">
+          <div>
+            <ChannelProfile id={id} />
+          </div>
+          <div className="flex items-center gap-2">
+            <div className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-zinc-900">
+              <EyeClose width={16} height={16} className="text-zinc-400" />
+            </div>
+            <div className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-zinc-900">
+              <MicMute width={16} height={16} className="text-zinc-400" />
+            </div>
+          </div>
+        </div>
+        <div className="relative flex w-full flex-1 flex-col justify-between rounded-lg border border-zinc-800 bg-zinc-900 shadow-input shadow-black/20">
+          <Suspense fallback={<p>Loading...</p>}>
+            <ChannelMessages />
+          </Suspense>
+          <div className="shrink-0 p-3">
+            <FormChannel eventId={id} />
+          </div>
         </div>
       </div>
     </NewsfeedLayout>
diff --git a/src/pages/chat/index.page.tsx b/src/pages/chat/index.page.tsx
index 63b87d53..a87a4759 100644
--- a/src/pages/chat/index.page.tsx
+++ b/src/pages/chat/index.page.tsx
@@ -57,7 +57,7 @@ export function Page() {
 
   return (
     <NewsfeedLayout>
-      <div className="flex h-full w-full flex-col justify-between">
+      <div className="relative flex h-full w-full flex-col justify-between rounded-lg border border-zinc-800 bg-zinc-900 shadow-input shadow-black/20">
         <Suspense fallback={<p>Loading...</p>}>
           <MessageList />
         </Suspense>
diff --git a/src/pages/newsfeed/circle/index.page.tsx b/src/pages/newsfeed/circle/index.page.tsx
index 2155c72e..d391822d 100644
--- a/src/pages/newsfeed/circle/index.page.tsx
+++ b/src/pages/newsfeed/circle/index.page.tsx
@@ -3,8 +3,12 @@ import NewsfeedLayout from '@components/layouts/newsfeed';
 export function Page() {
   return (
     <NewsfeedLayout>
-      <div className="flex h-full w-full items-center justify-center">
-        <p className="text-sm text-zinc-400">Sorry, this feature under development, it will come in the next version</p>
+      <div className="relative h-full w-full rounded-lg border border-zinc-800 bg-zinc-900 shadow-input shadow-black/20">
+        <div className="flex h-full w-full items-center justify-center">
+          <p className="text-sm text-zinc-400">
+            Sorry, this feature under development, it will come in the next version
+          </p>
+        </div>
       </div>
     </NewsfeedLayout>
   );
diff --git a/src/pages/newsfeed/following/index.page.tsx b/src/pages/newsfeed/following/index.page.tsx
index ef48d400..f4992c46 100644
--- a/src/pages/newsfeed/following/index.page.tsx
+++ b/src/pages/newsfeed/following/index.page.tsx
@@ -82,7 +82,7 @@ export function Page() {
 
   return (
     <NewsfeedLayout>
-      <div className="relative h-full w-full">
+      <div className="relative h-full w-full rounded-lg border border-zinc-800 bg-zinc-900 shadow-input shadow-black/20">
         {hasNewerNote && (
           <div className="absolute left-1/2 top-2 z-50 -translate-x-1/2 transform">
             <button
diff --git a/src/utils/hooks/useChannelMetadata.tsx b/src/utils/hooks/useChannelMetadata.tsx
index aa3554d6..36cd7835 100644
--- a/src/utils/hooks/useChannelMetadata.tsx
+++ b/src/utils/hooks/useChannelMetadata.tsx
@@ -3,28 +3,42 @@ import { RelayContext } from '@components/relaysProvider';
 import { DEFAULT_RELAYS } from '@stores/constants';
 
 import { updateChannelMetadata } from '@utils/storage';
+import { getChannel } from '@utils/storage';
 
 import { useCallback, useContext, useEffect, useState } from 'react';
 
-export const useChannelMetadata = (id: string, fallback: any) => {
+export const useChannelMetadata = (id: string) => {
   const pool: any = useContext(RelayContext);
-  const [metadata, setMetadata] = useState(fallback);
+  const [metadata, setMetadata] = useState(null);
 
-  const fetchMetadata = useCallback(() => {
+  const fetchFromRelay = useCallback(() => {
     const unsubscribe = pool.subscribe(
       [
         {
           kinds: [41],
           '#e': [id],
         },
+        {
+          ids: [id],
+          kinds: [40],
+        },
       ],
       DEFAULT_RELAYS,
-      (event: { content: string }) => {
-        const json = JSON.parse(event.content);
-        // update state
-        setMetadata(json);
-        // update metadata in database
-        updateChannelMetadata(id, event.content);
+      (event: { kind: number; content: string }) => {
+        switch (event.kind) {
+          case 41:
+            const json = JSON.parse(event.content);
+            // update state
+            setMetadata(json);
+            // update metadata in database
+            updateChannelMetadata(id, event.content);
+            break;
+          case 40:
+            // update state
+            setMetadata(JSON.parse(event.content));
+          default:
+            break;
+        }
       },
       undefined,
       undefined,
@@ -39,18 +53,28 @@ export const useChannelMetadata = (id: string, fallback: any) => {
     };
   }, [id, pool]);
 
+  const getChannelFromDB = useCallback(async () => {
+    return await getChannel(id);
+  }, [id]);
+
   useEffect(() => {
     let ignore = false;
 
     if (!ignore) {
-      // fetch kind 41
-      fetchMetadata();
+      getChannelFromDB().then((res) => {
+        console.log(res);
+        if (res) {
+          setMetadata(JSON.parse(res.metadata));
+        } else {
+          fetchFromRelay();
+        }
+      });
     }
 
     return () => {
       ignore = true;
     };
-  }, [fetchMetadata, fallback]);
+  }, [fetchFromRelay, getChannelFromDB]);
 
   return metadata;
 };
diff --git a/src/utils/storage.tsx b/src/utils/storage.tsx
index cbeaa0a7..87a3ad5a 100644
--- a/src/utils/storage.tsx
+++ b/src/utils/storage.tsx
@@ -120,6 +120,13 @@ export async function getChannels(limit: number, offset: number) {
   return await db.select(`SELECT * FROM channels ORDER BY created_at DESC LIMIT "${limit}" OFFSET "${offset}";`);
 }
 
+// get channel by id
+export async function getChannel(id: string) {
+  const db = await connect();
+  const result = await db.select(`SELECT * FROM channels WHERE event_id = "${id}";`);
+  return result[0];
+}
+
 // create channel
 export async function createChannel(event_id: string, metadata: string, created_at: number) {
   const db = await connect();