added useChannelMetadata and support kind 41

src/components/channels/browseChannelItem.tsx

@@ -2,16 +2,18 @@ import { ImageWithFallback } from '@components/imageWithFallback';
 
 import { DEFAULT_AVATAR } from '@stores/constants';
 
+import { useChannelMetadata } from '@utils/hooks/useChannelMetadata';
+
 import { useRouter } from 'next/navigation';
 import { useCallback } from 'react';
 
 export const BrowseChannelItem = ({ data }: { data: any }) => {
   const router = useRouter();
-  const channel = JSON.parse(data.content);
+  const channel = useChannelMetadata(data.event_id, data.metadata);
 
   const openChannel = useCallback(
     (id: string) => {
-      router.push(`/channels/${id}`);
+      router.push(`/nostr/channels/${id}`);
     },
     [router]
   );
@@ -23,15 +25,15 @@ export const BrowseChannelItem = ({ data }: { data: any }) => {
     >
       <div className="relative h-11 w-11 shrink overflow-hidden rounded-md border border-white/10">
         <ImageWithFallback
-          src={channel.picture || DEFAULT_AVATAR}
+          src={channel?.picture || DEFAULT_AVATAR}
           alt={data.id}
           fill={true}
           className="rounded-md object-cover"
         />
       </div>
       <div className="flex w-full flex-1 flex-col items-start text-start">
-        <span className="truncate font-medium leading-tight text-zinc-200">{channel.name}</span>
+        <span className="truncate font-medium leading-tight text-zinc-200">{channel?.name}</span>
-        <span className="text-sm leading-tight text-zinc-400">{channel.about}</span>
+        <span className="text-sm leading-tight text-zinc-400">{channel?.about}</span>
       </div>
       <div className="absolute right-2 top-1/2 hidden -translate-y-1/2 transform group-hover:inline-flex">
         <button className="inline-flex h-8 w-16 items-center justify-center rounded-md bg-fuchsia-500 px-4 text-sm font-medium shadow-button hover:bg-fuchsia-600 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50">

src/utils/hooks/useChannelMetadata.tsx

@@ -0,0 +1,52 @@
+import { RelayContext } from '@components/relaysProvider';
+
+import { updateChannelMetadata } from '@utils/storage';
+
+import { useCallback, useContext, useEffect, useRef, useState } from 'react';
+
+export const useChannelMetadata = (id: string, fallback: string) => {
+  const [pool, relays]: any = useContext(RelayContext);
+  const [metadata, setMetadata] = useState(null);
+  const unsubscribe = useRef(null);
+
+  const fetchMetadata = useCallback(() => {
+    unsubscribe.current = pool.subscribe(
+      [
+        {
+          kinds: [41],
+          '#e': [id],
+        },
+      ],
+      relays,
+      (event: { content: string }) => {
+        const json = JSON.parse(event.content);
+        // update state
+        setMetadata(json);
+        // update metadata in database
+        updateChannelMetadata(id, event.content);
+      },
+      undefined,
+      undefined,
+      {
+        unsubscribeOnEose: true,
+        logAllEvents: false,
+      }
+    );
+  }, []);
+
+  useEffect(() => {
+    const json = JSON.parse(fallback);
+    setMetadata(json);
+
+    // fetch kind 41
+    fetchMetadata();
+
+    return () => {
+      if (unsubscribe.current) {
+        unsubscribe.current();
+      }
+    };
+  }, [fetchMetadata]);
+
+  return metadata;
+};

src/utils/storage.tsx

@@ -127,6 +127,12 @@ export async function createChannel(event_id: string, metadata: string, created_
   ]);
 }
 
+// update channel metadata
+export async function updateChannelMetadata(event_id: string, value: string) {
+  const db = await connect();
+  return await db.execute(`UPDATE channels SET metadata = "${value}" WHERE event_id = "${event_id}";`);
+}
+
 // get all chats
 export async function getChats(account_id: number) {
   const db = await connect();