update useChannelProfile hook

src/app/channel/components/item.tsx

@@ -1,11 +1,11 @@
 import { DEFAULT_AVATAR } from '@lume/stores/constants';
-import { useChannelMetadata } from '@lume/utils/hooks/useChannelMetadata';
+import { useChannelProfile } from '@lume/utils/hooks/useChannelProfile';
 import { usePageContext } from '@lume/utils/hooks/usePageContext';
 
 import { twMerge } from 'tailwind-merge';
 
 export default function ChannelsListItem({ data }: { data: any }) {
-  const channel: any = useChannelMetadata(data.event_id, data.pubkey);
+  const channel: any = useChannelProfile(data.event_id, data.pubkey);
   const pageContext = usePageContext();
 
   const searchParams: any = pageContext.urlParsed.search;

src/utils/hooks/useChannelMetadata.tsx

@@ -1,81 +0,0 @@
-import { RelayContext } from '@lume/shared/relayProvider';
-import { READONLY_RELAYS } from '@lume/stores/constants';
-import { updateChannelMetadata } from '@lume/utils/storage';
-import { getChannel } from '@lume/utils/storage';
-
-import { useCallback, useContext, useEffect, useState } from 'react';
-
-export const useChannelMetadata = (id: string, channelPubkey: string) => {
-  const pool: any = useContext(RelayContext);
-  const [metadata, setMetadata] = useState(null);
-
-  const fetchFromRelay = useCallback(() => {
-    const unsubscribe = pool.subscribe(
-      [
-        {
-          kinds: [41],
-          '#e': [id],
-        },
-        {
-          ids: [id],
-          kinds: [40],
-        },
-      ],
-      READONLY_RELAYS,
-      (event: { kind: number; pubkey: string; content: string }) => {
-        switch (event.kind) {
-          case 41:
-            if (event.pubkey === channelPubkey) {
-              const json = JSON.parse(event.content);
-              // update state
-              setMetadata(json);
-              // update metadata in database
-              updateChannelMetadata(id, event.content);
-            }
-            break;
-          case 40:
-            if (event.pubkey === channelPubkey) {
-              // update state
-              setMetadata(JSON.parse(event.content));
-            }
-          default:
-            break;
-        }
-      },
-      undefined,
-      undefined,
-      {
-        unsubscribeOnEose: true,
-        logAllEvents: false,
-      }
-    );
-
-    return () => {
-      unsubscribe();
-    };
-  }, [channelPubkey, id]);
-
-  const getChannelFromDB = useCallback(async () => {
-    return await getChannel(id);
-  }, [id]);
-
-  useEffect(() => {
-    let ignore = false;
-
-    if (!ignore) {
-      getChannelFromDB().then((res) => {
-        if (res) {
-          setMetadata(JSON.parse(res.metadata));
-        } else {
-          fetchFromRelay();
-        }
-      });
-    }
-
-    return () => {
-      ignore = true;
-    };
-  }, [fetchFromRelay, getChannelFromDB]);
-
-  return metadata;
-};

src/utils/hooks/useChannelProfile.tsx

@@ -1,51 +1,56 @@
 import { RelayContext } from '@lume/shared/relayProvider';
 import { READONLY_RELAYS } from '@lume/stores/constants';
+import { getChannel } from '@lume/utils/storage';
 
 import { useContext } from 'react';
+import useSWR from 'swr';
 import useSWRSubscription from 'swr/subscription';
 
+const fetcher = async ([, id]) => {
+  const result = await getChannel(id);
+  if (result) {
+    return JSON.parse(result.metadata);
+  } else {
+    return null;
+  }
+};
+
 export const useChannelProfile = (id: string, channelPubkey: string) => {
   const pool: any = useContext(RelayContext);
 
-  const { data } = useSWRSubscription(id ? id : null, (key, { next }) => {
-    const unsubscribe = pool.subscribe(
-      [
-        {
-          kinds: [41],
-          '#e': [key],
+  const { data: cache, isLoading } = useSWR(['channel-cache-profile', id], fetcher);
+  const { data, error } = useSWRSubscription(
+    !isLoading && !cache ? ['channel-profile', id] : null,
+    ([, key], { next }) => {
+      // subscribe to channel
+      const unsubscribe = pool.subscribe(
+        [
+          {
+            '#e': [key],
+            authors: [channelPubkey],
+            kinds: [41],
+          },
+        ],
+        READONLY_RELAYS,
+        (event: { content: string }) => {
+          next(null, JSON.parse(event.content));
         },
+        undefined,
+        undefined,
         {
-          ids: [key],
-          kinds: [40],
-        },
-      ],
-      READONLY_RELAYS,
-      (event: { kind: number; pubkey: string; content: string }) => {
-        switch (event.kind) {
-          case 40:
-            next(null, JSON.parse(event.content));
-            break;
-          case 41:
-            console.log(event);
-            if (event.pubkey === channelPubkey) {
-              next(null, JSON.parse(event.content));
-            }
-            break;
-          default:
-            break;
+          unsubscribeOnEose: true,
         }
-      },
-      undefined,
-      undefined,
-      {
-        unsubscribeOnEose: true,
-      }
-    );
+      );
 
-    return () => {
-      unsubscribe();
-    };
-  });
+      return () => {
+        unsubscribe();
+      };
+    }
+  );
 
-  return data;
+  if (!data || error) {
+    return cache;
+  } else {
+    return data;
+  }
 };