added event collector

src/components/chats/chatList.tsx

@@ -1,23 +1,21 @@
 import { ChatListItem } from '@components/chats/chatListItem';
 import { ChatModal } from '@components/chats/chatModal';
 import { ImageWithFallback } from '@components/imageWithFallback';
-import { RelayContext } from '@components/relaysProvider';
 
 import { activeAccountAtom } from '@stores/account';
 import { DEFAULT_AVATAR } from '@stores/constants';
 
 import { useAtomValue } from 'jotai';
 import { useRouter } from 'next/router';
-import { useContext, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 export default function ChatList() {
-  const [pool, relays]: any = useContext(RelayContext);
   const router = useRouter();
 
   const activeAccount: any = useAtomValue(activeAccountAtom);
   const accountProfile = JSON.parse(activeAccount.metadata);
 
-  const [list, setList] = useState(new Set());
+  const [list, setList] = useState([]);
 
   const openSelfChat = () => {
     router.push({
@@ -27,26 +25,15 @@ export default function ChatList() {
   };
 
   useEffect(() => {
-    const unsubscribe = pool.subscribe(
-      [
-        {
-          kinds: [4],
-          '#p': [activeAccount.pubkey],
-          since: 0,
-        },
-      ],
-      relays,
-      (event: any) => {
-        if (event.pubkey !== activeAccount.pubkey) {
-          setList((list) => new Set(list).add(event.pubkey));
-        }
-      }
-    );
-
-    return () => {
-      unsubscribe;
+    const fetchChats = async () => {
+      const { getChats } = await import('@utils/bindings');
+      return await getChats({ account_id: activeAccount.id });
     };
-  }, [pool, relays, activeAccount.pubkey]);
+
+    fetchChats()
+      .then((res) => setList(res))
+      .catch(console.error);
+  }, [activeAccount.id]);
 
   return (
     <div className="flex flex-col gap-px">
@@ -68,8 +55,8 @@ export default function ChatList() {
           </h5>
         </div>
       </div>
-      {[...list].map((item: string, index) => (
-        <ChatListItem key={index} pubkey={item} />
+      {list.map((item) => (
+        <ChatListItem key={item.id} pubkey={item.pubkey} />
       ))}
       <ChatModal />
     </div>