added useMetadata and refactor user component

src/components/user/base.tsx

@@ -1,22 +1,14 @@
 import { ImageWithFallback } from '@components/imageWithFallback';
-import { RelayContext } from '@components/relaysProvider';
 
 import { DEFAULT_AVATAR } from '@stores/constants';
 
+import { useMetadata } from '@utils/metadata';
 import { truncate } from '@utils/truncate';
 
-import { Author } from 'nostr-relaypool';
-import { memo, useContext, useEffect, useState } from 'react';
+import { memo } from 'react';
 
 export const UserBase = memo(function UserBase({ pubkey }: { pubkey: string }) {
-  const [pool, relays]: any = useContext(RelayContext);
-
-  const [profile, setProfile] = useState(null);
-
-  useEffect(() => {
-    const user = new Author(pool, relays, pubkey);
-    user.metaData((res) => setProfile(JSON.parse(res.content)), 0);
-  }, [pool, relays, pubkey]);
+  const profile = useMetadata(pubkey);
 
   return (
     <div className="flex items-center gap-2">

src/components/user/extend.tsx

@@ -2,63 +2,21 @@ import { ImageWithFallback } from '@components/imageWithFallback';
 
 import { DEFAULT_AVATAR } from '@stores/constants';
 
+import { useMetadata } from '@utils/metadata';
 import { truncate } from '@utils/truncate';
 
 import { DotsHorizontalIcon } from '@radix-ui/react-icons';
-import { fetch } from '@tauri-apps/api/http';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
-import { useRouter } from 'next/router';
-import { useCallback, useEffect, useState } from 'react';
 
 dayjs.extend(relativeTime);
 
 export const UserExtend = ({ pubkey, time }: { pubkey: string; time: number }) => {
-  const router = useRouter();
-  const [profile, setProfile] = useState(null);
-
-  const openUserPage = (e) => {
-    e.stopPropagation();
-    router.push(`/users/${pubkey}`);
-  };
-
-  const fetchMetadata = useCallback(async (pubkey: string) => {
-    const res = await fetch(`https://rbr.bio/${pubkey}/metadata.json`, {
-      method: 'GET',
-      timeout: 5,
-    });
-    return res.data;
-  }, []);
-
-  const getCachedMetadata = useCallback(async () => {
-    const { getPlebByPubkey } = await import('@utils/bindings');
-    getPlebByPubkey({ pubkey: pubkey })
-      .then((res) => {
-        if (res) {
-          const metadata = JSON.parse(res.metadata);
-          setProfile(metadata);
-        } else {
-          fetchMetadata(pubkey).then((res: any) => {
-            if (res.content) {
-              const metadata = JSON.parse(res.content);
-              setProfile(metadata);
-            }
-          });
-        }
-      })
-      .catch(console.error);
-  }, [fetchMetadata, pubkey]);
-
-  useEffect(() => {
-    getCachedMetadata().catch(console.error);
-  }, [getCachedMetadata]);
+  const profile = useMetadata(pubkey);
 
   return (
     <div className="group flex items-start gap-2">
-      <div
-        onClick={(e) => openUserPage(e)}
-        className="relative h-11 w-11 shrink overflow-hidden rounded-md bg-zinc-900 ring-fuchsia-500 ring-offset-1 ring-offset-zinc-900 group-hover:ring-1"
-      >
+      <div className="relative h-11 w-11 shrink overflow-hidden rounded-md bg-zinc-900 ring-fuchsia-500 ring-offset-1 ring-offset-zinc-900 group-hover:ring-1">
         <ImageWithFallback
           src={profile?.picture || DEFAULT_AVATAR}
           alt={pubkey}
@@ -69,7 +27,7 @@ export const UserExtend = ({ pubkey, time }: { pubkey: string; time: number }) =
       <div className="flex w-full flex-1 items-start justify-between">
         <div className="flex w-full justify-between">
           <div className="flex items-baseline gap-2 text-sm">
-            <span onClick={(e) => openUserPage(e)} className="font-bold leading-tight group-hover:underline">
+            <span className="font-bold leading-tight group-hover:underline">
               {profile?.display_name || profile?.name || truncate(pubkey, 16, ' .... ')}
             </span>
             <span className="leading-tight text-zinc-500">·</span>

src/components/user/follow.tsx

@@ -2,28 +2,11 @@ import { ImageWithFallback } from '@components/imageWithFallback';
 
 import { DEFAULT_AVATAR } from '@stores/constants';
 
+import { useMetadata } from '@utils/metadata';
 import { truncate } from '@utils/truncate';
 
-import { useCallback, useEffect, useState } from 'react';
-
 export const UserFollow = ({ pubkey }: { pubkey: string }) => {
-  const [profile, setProfile] = useState(null);
-
-  const getCachedMetadata = useCallback(async () => {
-    const { getPlebByPubkey } = await import('@utils/bindings');
-    getPlebByPubkey({ pubkey: pubkey })
-      .then((res) => {
-        if (res) {
-          const metadata = JSON.parse(res.metadata);
-          setProfile(metadata);
-        }
-      })
-      .catch(console.error);
-  }, [pubkey]);
-
-  useEffect(() => {
-    getCachedMetadata().catch(console.error);
-  }, [getCachedMetadata]);
+  const profile = useMetadata(pubkey);
 
   return (
     <div className="flex items-center gap-2">

src/components/user/large.tsx

@@ -2,33 +2,17 @@ import { ImageWithFallback } from '@components/imageWithFallback';
 
 import { DEFAULT_AVATAR } from '@stores/constants';
 
+import { useMetadata } from '@utils/metadata';
 import { truncate } from '@utils/truncate';
 
 import { DotsHorizontalIcon } from '@radix-ui/react-icons';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
-import { useCallback, useEffect, useState } from 'react';
 
 dayjs.extend(relativeTime);
 
 export const UserLarge = ({ pubkey, time }: { pubkey: string; time: number }) => {
-  const [profile, setProfile] = useState(null);
-
-  const getCachedMetadata = useCallback(async () => {
-    const { getPlebByPubkey } = await import('@utils/bindings');
-    getPlebByPubkey({ pubkey: pubkey })
-      .then((res) => {
-        if (res) {
-          const metadata = JSON.parse(res.metadata);
-          setProfile(metadata);
-        }
-      })
-      .catch(console.error);
-  }, [pubkey]);
-
-  useEffect(() => {
-    getCachedMetadata().catch(console.error);
-  }, [getCachedMetadata]);
+  const profile = useMetadata(pubkey);
 
   return (
     <div className="flex items-center gap-2">

src/components/user/mention.tsx

@@ -1,41 +1,10 @@
+import { useMetadata } from '@utils/metadata';
 import { truncate } from '@utils/truncate';
 
-import { fetch } from '@tauri-apps/api/http';
-import { memo, useCallback, useEffect, useState } from 'react';
+import { memo } from 'react';
 
 export const UserMention = memo(function UserMention({ pubkey }: { pubkey: string }) {
-  const [profile, setProfile] = useState(null);
-
-  const fetchMetadata = useCallback(async (pubkey: string) => {
-    const res = await fetch(`https://rbr.bio/${pubkey}/metadata.json`, {
-      method: 'GET',
-      timeout: 5,
-    });
-    return res.data;
-  }, []);
-
-  const getCachedMetadata = useCallback(async () => {
-    const { getPlebByPubkey } = await import('@utils/bindings');
-    getPlebByPubkey({ pubkey: pubkey })
-      .then((res) => {
-        if (res) {
-          const metadata = JSON.parse(res.metadata);
-          setProfile(metadata);
-        } else {
-          fetchMetadata(pubkey).then((res: any) => {
-            if (res.content) {
-              const metadata = JSON.parse(res.content);
-              setProfile(metadata);
-            }
-          });
-        }
-      })
-      .catch(console.error);
-  }, [fetchMetadata, pubkey]);
-
-  useEffect(() => {
-    getCachedMetadata().catch(console.error);
-  }, [getCachedMetadata]);
+  const profile = useMetadata(pubkey);
 
   return <span className="cursor-pointer text-fuchsia-500">@{profile?.name || truncate(pubkey, 16, ' .... ')}</span>;
 });

src/components/user/mini.tsx

@@ -2,48 +2,27 @@ import { ImageWithFallback } from '@components/imageWithFallback';
 
 import { DEFAULT_AVATAR } from '@stores/constants';
 
+import { useMetadata } from '@utils/metadata';
 import { truncate } from '@utils/truncate';
 
-import { useCallback, useEffect, useState } from 'react';
-
 export const UserMini = ({ pubkey }: { pubkey: string }) => {
-  const [profile, setProfile] = useState(null);
+  const profile = useMetadata(pubkey);
 
-  const getCachedMetadata = useCallback(async () => {
-    const { getPlebByPubkey } = await import('@utils/bindings');
-    getPlebByPubkey({ pubkey: pubkey })
-      .then((res) => {
-        if (res) {
-          const metadata = JSON.parse(res.metadata);
-          setProfile(metadata);
-        }
-      })
-      .catch(console.error);
-  }, [pubkey]);
-
-  useEffect(() => {
-    getCachedMetadata().catch(console.error);
-  }, [getCachedMetadata]);
-
-  if (profile) {
-    return (
-      <div className="flex cursor-pointer items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm font-medium hover:bg-zinc-900">
-        <div className="relative h-5 w-5 shrink-0 overflow-hidden rounded">
-          <ImageWithFallback
-            src={profile?.picture || DEFAULT_AVATAR}
-            alt={pubkey}
-            fill={true}
-            className="rounded object-cover"
-          />
-        </div>
-        <div className="inline-flex w-full flex-1 flex-col overflow-hidden">
-          <p className="truncate leading-tight text-zinc-300">
-            {profile?.display_name || profile?.name || truncate(pubkey, 16, ' .... ')}
-          </p>
-        </div>
+  return (
+    <div className="flex cursor-pointer items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm font-medium hover:bg-zinc-900">
+      <div className="relative h-5 w-5 shrink-0 overflow-hidden rounded">
+        <ImageWithFallback
+          src={profile?.picture || DEFAULT_AVATAR}
+          alt={pubkey}
+          fill={true}
+          className="rounded object-cover"
+        />
       </div>
-    );
-  } else {
-    return <></>;
-  }
+      <div className="inline-flex w-full flex-1 flex-col overflow-hidden">
+        <p className="truncate leading-tight text-zinc-300">
+          {profile?.display_name || profile?.name || truncate(pubkey, 16, ' .... ')}
+        </p>
+      </div>
+    </div>
+  );
 };