From b54cd34500109e5db4ddb4bf87c78a024ac6a324 Mon Sep 17 00:00:00 2001
From: Ren Amamiya <123083837+reyamir@users.noreply.github.com>
Date: Tue, 11 Apr 2023 09:55:36 +0700
Subject: [PATCH] added channel message list and form

---
 src/components/channels/browseChannelItem.tsx | 34 +++++++++
 .../channels/channelMessageItem.tsx           | 22 ++++++
 .../channels/channelMessageList.tsx           | 39 ++++++++++
 src/components/chats/chatList.tsx             |  3 +-
 src/components/form/channelMessage.tsx        | 71 +++++++++++++++++++
 src/pages/channels/[id].tsx                   | 24 +++++--
 src/pages/channels/index.tsx                  | 39 +++-------
 7 files changed, 198 insertions(+), 34 deletions(-)
 create mode 100644 src/components/channels/browseChannelItem.tsx
 create mode 100644 src/components/channels/channelMessageItem.tsx
 create mode 100644 src/components/channels/channelMessageList.tsx
 create mode 100644 src/components/form/channelMessage.tsx

diff --git a/src/components/channels/browseChannelItem.tsx b/src/components/channels/browseChannelItem.tsx
new file mode 100644
index 00000000..7187257c
--- /dev/null
+++ b/src/components/channels/browseChannelItem.tsx
@@ -0,0 +1,34 @@
+import { ImageWithFallback } from '@components/imageWithFallback';
+
+import { DEFAULT_AVATAR } from '@stores/constants';
+
+import { useRouter } from 'next/router';
+
+export const BrowseChannelItem = ({ data }: { data: any }) => {
+  const router = useRouter();
+  const channel = JSON.parse(data.content);
+
+  const openChannel = (id) => {
+    router.push({
+      pathname: '/channels/[id]',
+      query: { id: id },
+    });
+  };
+
+  return (
+    <div onClick={() => openChannel(data.eventId)} className="flex items-center gap-2 px-3 py-2 hover:bg-zinc-950">
+      <div className="relative h-11 w-11 shrink overflow-hidden rounded-md border border-white/10">
+        <ImageWithFallback
+          src={channel.picture || DEFAULT_AVATAR}
+          alt={data.id}
+          fill={true}
+          className="rounded-md object-cover"
+        />
+      </div>
+      <div className="flex w-full flex-1 flex-col items-start text-start">
+        <span className="truncate font-medium leading-tight text-zinc-200">{channel.name}</span>
+        <span className="text-sm leading-tight text-zinc-400">{channel.about}</span>
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/channels/channelMessageItem.tsx b/src/components/channels/channelMessageItem.tsx
new file mode 100644
index 00000000..3884bd7c
--- /dev/null
+++ b/src/components/channels/channelMessageItem.tsx
@@ -0,0 +1,22 @@
+import { MessageUser } from '@components/chats/messageUser';
+
+import { memo } from 'react';
+
+const ChannelMessageItem = ({ data }: { data: any }) => {
+  return (
+    <div className="flex h-min min-h-min w-full select-text flex-col px-5 py-2 hover:bg-black/20">
+      <div className="flex flex-col">
+        <MessageUser pubkey={data.pubkey} time={data.created_at} />
+        <div className="-mt-[17px] pl-[48px]">
+          <div className="flex flex-col gap-2">
+            <div className="prose prose-zinc max-w-none break-words text-sm leading-tight dark:prose-invert prose-p:m-0 prose-p:text-sm prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-img:m-0 prose-video:m-0">
+              {data.content}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default memo(ChannelMessageItem);
diff --git a/src/components/channels/channelMessageList.tsx b/src/components/channels/channelMessageList.tsx
new file mode 100644
index 00000000..4414fd50
--- /dev/null
+++ b/src/components/channels/channelMessageList.tsx
@@ -0,0 +1,39 @@
+import ChannelMessageItem from '@components/channels/channelMessageItem';
+
+import { useCallback, useRef } from 'react';
+import { Virtuoso } from 'react-virtuoso';
+
+export const ChannelMessageList = ({ data }: { data: any }) => {
+  const virtuosoRef = useRef(null);
+
+  const itemContent: any = useCallback(
+    (index: string | number) => {
+      return <ChannelMessageItem data={data[index]} />;
+    },
+    [data]
+  );
+
+  const computeItemKey = useCallback(
+    (index: string | number) => {
+      return data[index].id;
+    },
+    [data]
+  );
+
+  return (
+    <div className="h-full w-full">
+      <Virtuoso
+        ref={virtuosoRef}
+        data={data}
+        itemContent={itemContent}
+        computeItemKey={computeItemKey}
+        initialTopMostItemIndex={data.length - 1}
+        alignToBottom={true}
+        followOutput={true}
+        overscan={50}
+        increaseViewportBy={{ top: 200, bottom: 200 }}
+        className="scrollbar-hide h-full w-full overflow-y-auto"
+      />
+    </div>
+  );
+};
diff --git a/src/components/chats/chatList.tsx b/src/components/chats/chatList.tsx
index 4cad15b9..7857d09d 100644
--- a/src/components/chats/chatList.tsx
+++ b/src/components/chats/chatList.tsx
@@ -11,11 +11,10 @@ import { useEffect, useState } from 'react';
 export default function ChatList() {
   const router = useRouter();
 
+  const [list, setList] = useState([]);
   const [activeAccount]: any = useLocalStorage('activeAccount');
   const accountProfile = JSON.parse(activeAccount.metadata);
 
-  const [list, setList] = useState([]);
-
   const openSelfChat = () => {
     router.push({
       pathname: '/chats/[pubkey]',
diff --git a/src/components/form/channelMessage.tsx b/src/components/form/channelMessage.tsx
new file mode 100644
index 00000000..3cd4abd0
--- /dev/null
+++ b/src/components/form/channelMessage.tsx
@@ -0,0 +1,71 @@
+import ImagePicker from '@components/form/imagePicker';
+import { RelayContext } from '@components/relaysProvider';
+
+import { dateToUnix } from '@utils/getDate';
+
+import useLocalStorage from '@rehooks/local-storage';
+import { getEventHash, signEvent } from 'nostr-tools';
+import { useCallback, useContext, useState } from 'react';
+
+export default function FormChannelMessage({ eventId }: { eventId: string | string[] }) {
+  const [pool, relays]: any = useContext(RelayContext);
+
+  const [value, setValue] = useState('');
+  const [activeAccount]: any = useLocalStorage('activeAccount');
+
+  const submitEvent = useCallback(() => {
+    const event: any = {
+      content: value,
+      created_at: dateToUnix(),
+      kind: 42,
+      pubkey: activeAccount.pubkey,
+      tags: [['e', eventId, '', 'root']],
+    };
+    event.id = getEventHash(event);
+    event.sig = signEvent(event, activeAccount.privkey);
+
+    // publish note
+    pool.publish(event, relays);
+    // reset state
+    setValue('');
+  }, [activeAccount.privkey, activeAccount.pubkey, eventId, value, pool, relays]);
+
+  const handleEnterPress = (e) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      submitEvent();
+    }
+  };
+
+  return (
+    <div className="relative h-24 w-full shrink-0 overflow-hidden before:pointer-events-none before:absolute before:-inset-1 before:rounded-[11px] before:border before:border-fuchsia-500 before:opacity-0 before:ring-2 before:ring-fuchsia-500/20 before:transition after:pointer-events-none after:absolute after:inset-px after:rounded-[7px] after:shadow-highlight after:shadow-white/5 after:transition focus-within:before:opacity-100 focus-within:after:shadow-fuchsia-500/100 dark:focus-within:after:shadow-fuchsia-500/20">
+      <div>
+        <textarea
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          onKeyDown={handleEnterPress}
+          spellCheck={false}
+          placeholder="Message"
+          className="relative h-24 w-full resize-none rounded-lg border border-black/5 px-3.5 py-3 text-sm shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-200 dark:shadow-black/10 dark:placeholder:text-zinc-500"
+        />
+      </div>
+      <div className="absolute bottom-2 w-full px-2">
+        <div className="flex w-full items-center justify-between bg-zinc-800">
+          <div className="flex items-center gap-2 divide-x divide-zinc-700">
+            <ImagePicker />
+            <div className="flex items-center gap-2 pl-2"></div>
+          </div>
+          <div className="flex items-center gap-2">
+            <button
+              onClick={() => submitEvent()}
+              disabled={value.length === 0 ? true : false}
+              className="inline-flex h-8 w-16 items-center justify-center rounded-md bg-fuchsia-500 px-4 text-sm font-medium shadow-button hover:bg-fuchsia-600 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
+            >
+              Send
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/channels/[id].tsx b/src/pages/channels/[id].tsx
index f0b3f6a7..5c059f79 100644
--- a/src/pages/channels/[id].tsx
+++ b/src/pages/channels/[id].tsx
@@ -1,10 +1,20 @@
 import BaseLayout from '@layouts/base';
 import WithSidebarLayout from '@layouts/withSidebar';
 
+import { ChannelMessageList } from '@components/channels/channelMessageList';
+import FormChannelMessage from '@components/form/channelMessage';
 import { RelayContext } from '@components/relaysProvider';
 
 import { useRouter } from 'next/router';
-import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal, useContext, useEffect } from 'react';
+import {
+  JSXElementConstructor,
+  ReactElement,
+  ReactFragment,
+  ReactPortal,
+  useContext,
+  useEffect,
+  useState,
+} from 'react';
 
 export default function Page() {
   const [pool, relays]: any = useContext(RelayContext);
@@ -12,28 +22,34 @@ export default function Page() {
   const router = useRouter();
   const id: string | string[] = router.query.id || null;
 
+  const [messages, setMessages] = useState([]);
+
   useEffect(() => {
     const unsubscribe = pool.subscribe(
       [
         {
+          '#e': [id],
           kinds: [42],
           since: 0,
         },
       ],
       relays,
       (event: any) => {
-        console.log(event);
+        setMessages((messages) => [event, ...messages]);
       }
     );
 
     return () => {
       unsubscribe;
     };
-  }, [pool, relays]);
+  }, [id, pool, relays]);
 
   return (
     <div className="flex h-full w-full flex-col justify-between">
-      <p>{id}</p>
+      <ChannelMessageList data={messages.sort((a, b) => a.created_at - b.created_at)} />
+      <div className="shrink-0 p-3">
+        <FormChannelMessage eventId={id} />
+      </div>
     </div>
   );
 }
diff --git a/src/pages/channels/index.tsx b/src/pages/channels/index.tsx
index 263a918c..b5f8c36d 100644
--- a/src/pages/channels/index.tsx
+++ b/src/pages/channels/index.tsx
@@ -1,45 +1,28 @@
 import BaseLayout from '@layouts/base';
 import WithSidebarLayout from '@layouts/withSidebar';
 
-import { RelayContext } from '@components/relaysProvider';
+import { BrowseChannelItem } from '@components/channels/browseChannelItem';
 
-import {
-  JSXElementConstructor,
-  ReactElement,
-  ReactFragment,
-  ReactPortal,
-  useContext,
-  useEffect,
-  useState,
-} from 'react';
+import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal, useEffect, useState } from 'react';
 
 export default function Page() {
-  const [pool, relays]: any = useContext(RelayContext);
   const [list, setList] = useState([]);
 
   useEffect(() => {
-    const unsubscribe = pool.subscribe(
-      [
-        {
-          kinds: [40],
-          since: 0,
-        },
-      ],
-      relays,
-      (event: any) => {
-        setList((list) => [event, ...list]);
-      }
-    );
-
-    return () => {
-      unsubscribe;
+    const fetchChannels = async () => {
+      const { getChannels } = await import('@utils/bindings');
+      return await getChannels({ limit: 100, offset: 0 });
     };
-  }, [pool, relays]);
+
+    fetchChannels()
+      .then((res) => setList(res))
+      .catch(console.error);
+  }, []);
 
   return (
     <div className="h-full w-full overflow-y-auto">
       {list.map((channel) => (
-        <div key={channel.id}>{channel.content}</div>
+        <BrowseChannelItem key={channel.id} data={channel} />
       ))}
     </div>
   );