added channel message list and form

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

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