From be340fd2dcbcc5124d208d12f7ad4f6730178e4f Mon Sep 17 00:00:00 2001
From: Ren Amamiya <123083837+reyamir@users.noreply.github.com>
Date: Mon, 24 Apr 2023 09:37:54 +0700
Subject: [PATCH] update useChannelMetadata hook

---
 src/components/channels/channelListItem.tsx | 13 ++++++++++---
 src/components/chats/chatList.tsx           |  2 --
 src/components/chats/chatListItem.tsx       |  8 +-------
 src/utils/hooks/useChannelMetadata.tsx      | 21 +++++++--------------
 4 files changed, 18 insertions(+), 26 deletions(-)

diff --git a/src/components/channels/channelListItem.tsx b/src/components/channels/channelListItem.tsx
index 4def5b79..4b24d242 100644
--- a/src/components/channels/channelListItem.tsx
+++ b/src/components/channels/channelListItem.tsx
@@ -6,7 +6,16 @@ import { usePageContext } from '@utils/hooks/usePageContext';
 import { twMerge } from 'tailwind-merge';
 
 export const ChannelListItem = ({ data }: { data: any }) => {
-  const channel = useChannelMetadata(data.event_id, data.metadata);
+  let metadata: any;
+
+  if (typeof data.metadata === 'object') {
+    metadata = data.metadata;
+  } else {
+    const json = JSON.parse(data.metadata);
+    metadata = json;
+  }
+
+  const channel: any = useChannelMetadata(data.event_id, metadata);
   const pageContext = usePageContext();
 
   const searchParams: any = pageContext.urlParsed.search;
@@ -25,8 +34,6 @@ export const ChannelListItem = ({ data }: { data: any }) => {
           src={channel?.picture || DEFAULT_AVATAR}
           alt={data.event_id}
           className="h-5 w-5 rounded bg-zinc-900 object-cover"
-          loading="lazy"
-          fetchpriority="high"
         />
       </div>
       <div>
diff --git a/src/components/chats/chatList.tsx b/src/components/chats/chatList.tsx
index 7c64c906..532af110 100644
--- a/src/components/chats/chatList.tsx
+++ b/src/components/chats/chatList.tsx
@@ -30,8 +30,6 @@ export default function ChatList() {
             src={profile?.picture || DEFAULT_AVATAR}
             alt={activeAccount.pubkey}
             className="h-5 w-5 rounded object-cover"
-            loading="lazy"
-            fetchpriority="high"
           />
         </div>
         <div>
diff --git a/src/components/chats/chatListItem.tsx b/src/components/chats/chatListItem.tsx
index 2b8c55ee..893dcca9 100644
--- a/src/components/chats/chatListItem.tsx
+++ b/src/components/chats/chatListItem.tsx
@@ -22,13 +22,7 @@ export const ChatListItem = ({ pubkey }: { pubkey: string }) => {
       )}
     >
       <div className="relative h-5 w-5 shrink rounded">
-        <img
-          src={profile?.picture || DEFAULT_AVATAR}
-          alt={pubkey}
-          className="h-5 w-5 rounded object-cover"
-          loading="lazy"
-          fetchpriority="high"
-        />
+        <img src={profile?.picture || DEFAULT_AVATAR} alt={pubkey} className="h-5 w-5 rounded object-cover" />
       </div>
       <div>
         <h5 className="text-sm font-medium text-zinc-400">
diff --git a/src/utils/hooks/useChannelMetadata.tsx b/src/utils/hooks/useChannelMetadata.tsx
index 91214c0d..2f9208b9 100644
--- a/src/utils/hooks/useChannelMetadata.tsx
+++ b/src/utils/hooks/useChannelMetadata.tsx
@@ -4,15 +4,14 @@ import { DEFAULT_RELAYS } from '@stores/constants';
 
 import { updateChannelMetadata } from '@utils/storage';
 
-import { useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { useCallback, useContext, useEffect, useState } from 'react';
 
 export const useChannelMetadata = (id: string, fallback: string) => {
   const pool: any = useContext(RelayContext);
-  const [metadata, setMetadata] = useState(null);
-  const unsubscribe = useRef(null);
+  const [metadata, setMetadata] = useState(fallback);
 
   const fetchMetadata = useCallback(() => {
-    unsubscribe.current = pool.subscribe(
+    const unsubscribe = pool.subscribe(
       [
         {
           kinds: [41],
@@ -34,28 +33,22 @@ export const useChannelMetadata = (id: string, fallback: string) => {
         logAllEvents: false,
       }
     );
+
+    return () => {
+      unsubscribe();
+    };
   }, [id, pool]);
 
   useEffect(() => {
     let ignore = false;
 
     if (!ignore) {
-      if (typeof fallback === 'object') {
-        setMetadata(fallback);
-      } else {
-        const json = JSON.parse(fallback);
-        setMetadata(json);
-      }
-
       // fetch kind 41
       fetchMetadata();
     }
 
     return () => {
       ignore = true;
-      if (unsubscribe.current) {
-        unsubscribe.current();
-      }
     };
   }, [fetchMetadata, fallback]);