migrated channel messages to jotai state (same as chat)

src/app/channels/[id]/page.tsx

@@ -4,17 +4,19 @@ import { ChannelMessages } from '@components/channels/messages/index';
 import FormChannelMessage from '@components/form/channelMessage';
 import { RelayContext } from '@components/relaysProvider';
 
-import { channelReplyAtom } from '@stores/channel';
+import { channelMessagesAtom, channelReplyAtom } from '@stores/channel';
 
 import useLocalStorage from '@rehooks/local-storage';
+import { useSetAtom } from 'jotai';
 import { useResetAtom } from 'jotai/utils';
-import { useContext, useEffect, useRef, useState } from 'react';
+import { Suspense, useContext, useEffect, useRef } from 'react';
 
 export default function Page({ params }: { params: { id: string } }) {
   const [pool, relays]: any = useContext(RelayContext);
-
-  const [messages, setMessages] = useState([]);
   const [activeAccount]: any = useLocalStorage('activeAccount', {});
+
+  const setChannelMessages = useSetAtom(channelMessagesAtom);
+  const resetChannelMessages = useResetAtom(channelMessagesAtom);
   const resetChannelReply = useResetAtom(channelReplyAtom);
 
   const muted = useRef(new Set());
@@ -23,6 +25,8 @@ export default function Page({ params }: { params: { id: string } }) {
   useEffect(() => {
     // reset channel reply
     resetChannelReply();
+    // reset channel messages
+    resetChannelMessages();
     // subscribe event
     const unsubscribe = pool.subscribe(
       [
@@ -49,7 +53,7 @@ export default function Page({ params }: { params: { id: string } }) {
           } else if (hided.current.has(event.id)) {
             console.log('hided');
           } else {
-            setMessages((messages) => [event, ...messages]);
+            setChannelMessages((messages) => [event, ...messages]);
           }
         }
       }
@@ -58,11 +62,13 @@ export default function Page({ params }: { params: { id: string } }) {
     return () => {
       unsubscribe();
     };
-  }, [pool, relays, activeAccount.pubkey, params.id, resetChannelReply]);
+  }, [pool, relays, activeAccount.pubkey, params.id, setChannelMessages, resetChannelReply, resetChannelMessages]);
 
   return (
     <div className="flex h-full w-full flex-col justify-between">
-      <ChannelMessages data={messages.sort((a, b) => a.created_at - b.created_at)} />
+      <Suspense fallback={<>Loading...</>}>
+        <ChannelMessages />
+      </Suspense>
       <div className="shrink-0 p-3">
         <FormChannelMessage eventId={params.id} />
       </div>

src/components/channels/messages/index.tsx

@@ -1,11 +1,17 @@
 import ChannelMessageItem from '@components/channels/messages/item';
+import { Placeholder } from '@components/note/placeholder';
 
+import { sortedChannelMessagesAtom } from '@stores/channel';
+
+import { useAtomValue } from 'jotai';
 import { useCallback, useRef } from 'react';
 import { Virtuoso } from 'react-virtuoso';
 
-export const ChannelMessages = ({ data }: { data: any }) => {
+export const ChannelMessages = () => {
   const virtuosoRef = useRef(null);
 
+  const data = useAtomValue(sortedChannelMessagesAtom);
+
   const itemContent: any = useCallback(
     (index: string | number) => {
       return <ChannelMessageItem data={data[index]} />;
@@ -25,6 +31,7 @@ export const ChannelMessages = ({ data }: { data: any }) => {
       <Virtuoso
         ref={virtuosoRef}
         data={data}
+        components={COMPONENTS}
         itemContent={itemContent}
         computeItemKey={computeItemKey}
         initialTopMostItemIndex={data.length - 1}
@@ -37,3 +44,8 @@ export const ChannelMessages = ({ data }: { data: any }) => {
     </div>
   );
 };
+
+const COMPONENTS = {
+  EmptyPlaceholder: () => <Placeholder />,
+  ScrollSeekPlaceholder: () => <Placeholder />,
+};

src/stores/channel.tsx

@@ -1,4 +1,11 @@
+import { atom } from 'jotai';
 import { atomWithReset } from 'jotai/utils';
 
 // channel reply id
 export const channelReplyAtom = atomWithReset({ id: null, pubkey: null, content: null });
+// channel messages
+export const channelMessagesAtom = atomWithReset([]);
+export const sortedChannelMessagesAtom = atom((get) => {
+  const messages = get(channelMessagesAtom);
+  return messages.sort((x: { created_at: number }, y: { created_at: number }) => x.created_at - y.created_at);
+});