updated fetch profile function

src/components/note/atoms/rootUser.tsx

@@ -2,25 +2,35 @@
 import { truncate } from '@utils/truncate';
 
 import { useNostrEvents } from 'nostr-react';
+import { useState } from 'react';
 
 export default function RootUser({ userPubkey, action }: { userPubkey: string; action: string }) {
-  const { events } = useNostrEvents({
+  const [profile, setProfile] = useState({ picture: null, name: null });
+
+  const { onEvent } = useNostrEvents({
     filter: {
       authors: [userPubkey],
       kinds: [0],
     },
   });
 
-  if (events !== undefined && events.length > 0) {
+  // #TODO: save response to DB
-    const userData: any = JSON.parse(events[0].content);
+  onEvent((rawMetadata) => {
-    return (
+    try {
-      <div className="text-zinc-400">
+      const metadata: any = JSON.parse(rawMetadata.content);
-        <p>
+      if (metadata) {
-          {userData?.name ? userData.name : truncate(userPubkey, 16, ' .... ')} {action}
+        setProfile(metadata);
-        </p>
+      }
-      </div>
+    } catch (err) {
-    );
+      console.error(err, rawMetadata);
-  } else {
+    }
-    return <></>;
+  });
-  }
+
+  return (
+    <div className="text-zinc-400">
+      <p>
+        {profile.name ? profile.name : truncate(userPubkey, 16, ' .... ')} {action}
+      </p>
+    </div>
+  );
 }

src/components/note/atoms/user.tsx

@@ -7,74 +7,66 @@ import MoreIcon from '@assets/icons/More';
 
 import Avatar from 'boring-avatars';
 import { useNostrEvents } from 'nostr-react';
-import { memo } from 'react';
+import { memo, useState } from 'react';
 import Moment from 'react-moment';
 
 export const User = memo(function User({ pubkey, time }: { pubkey: string; time: any }) {
-  const { events } = useNostrEvents({
+  const [profile, setProfile] = useState({ picture: null, name: null });
+
+  const { onEvent } = useNostrEvents({
     filter: {
       authors: [pubkey],
       kinds: [0],
     },
   });
 
-  if (events !== undefined && events.length > 0) {
+  // #TODO: save response to DB
-    const userData: any = JSON.parse(events[0].content);
+  onEvent((rawMetadata) => {
+    try {
+      const metadata: any = JSON.parse(rawMetadata.content);
+      if (metadata) {
+        setProfile(metadata);
+      }
+    } catch (err) {
+      console.error(err, rawMetadata);
+    }
+  });
 
-    return (
+  return (
-      <div className="relative flex items-start gap-4">
+    <div className="relative flex items-start gap-4">
-        <div className="relative h-11 w-11 shrink overflow-hidden rounded-full border border-white/10">
+      <div className="relative h-11 w-11 shrink overflow-hidden rounded-full border border-white/10">
-          {userData?.picture ? (
+        {profile.picture ? (
-            <ImageWithFallback
+          <ImageWithFallback
-              src={userData.picture}
+            src={profile.picture}
-              alt={pubkey}
+            alt={pubkey}
-              fill={true}
+            fill={true}
-              className="rounded-full object-cover"
+            className="rounded-full object-cover"
-            />
+          />
-          ) : (
+        ) : (
-            <Avatar
+          <Avatar
-              size={44}
+            size={44}
-              name={pubkey}
+            name={pubkey}
-              variant="beam"
+            variant="beam"
-              colors={['#FEE2E2', '#FEF3C7', '#F59E0B', '#EC4899', '#D946EF', '#8B5CF6']}
+            colors={['#FEE2E2', '#FEF3C7', '#F59E0B', '#EC4899', '#D946EF', '#8B5CF6']}
-            />
+          />
-          )}
+        )}
-        </div>
+      </div>
-        <div className="flex w-full flex-1 items-start justify-between">
+      <div className="flex w-full flex-1 items-start justify-between">
-          <div className="flex w-full justify-between">
+        <div className="flex w-full justify-between">
-            <div className="flex items-baseline gap-2 text-sm">
+          <div className="flex items-baseline gap-2 text-sm">
-              <span className="font-bold leading-tight">
+            <span className="font-bold leading-tight">
-                {userData?.name ? userData.name : truncate(pubkey, 16, ' .... ')}
+              {profile.name ? profile.name : truncate(pubkey, 16, ' .... ')}
-              </span>
+            </span>
-              <span className="leading-tight text-zinc-500">·</span>
+            <span className="leading-tight text-zinc-500">·</span>
-              <Moment fromNow unix className="text-zinc-500">
+            <Moment fromNow unix className="text-zinc-500">
-                {time}
+              {time}
-              </Moment>
+            </Moment>
-            </div>
+          </div>
-            <div>
+          <div>
-              <MoreIcon />
+            <MoreIcon />
-            </div>
           </div>
         </div>
       </div>
-    );
+    </div>
-  } else {
+  );
-    return (
-      <div className="relative flex animate-pulse items-start gap-4">
-        <div className="relative h-11 w-11 shrink overflow-hidden rounded-full border border-white/10 bg-zinc-700"></div>
-        <div className="flex w-full flex-1 items-start justify-between">
-          <div className="flex w-full justify-between">
-            <div className="flex items-center gap-2 text-sm">
-              <div className="h-4 w-16 rounded bg-zinc-700" />
-              <span className="text-zinc-500">·</span>
-              <div className="h-4 w-16 rounded bg-zinc-700" />
-            </div>
-            <div>
-              <MoreIcon />
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
 });

src/components/note/content/preview/imageCard.tsx

@@ -3,16 +3,15 @@ import Image from 'next/image';
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export default function ImageCard({ data }: { data: object }) {
   return (
-    <div
+    <div className={`relative mt-2 flex flex-col overflow-hidden`}>
-      className={`relative mt-2 flex flex-col overflow-hidden rounded-xl border border-zinc-800`}>
+      <div className="relative h-full w-2/3 rounded-lg border border-zinc-800">
-      <div className="relative h-full w-full">
         <Image
           src={data['image']}
           alt={data['image']}
           width="0"
           height="0"
           sizes="100vw"
-          className="h-auto w-full object-cover"
+          className=" h-auto w-full rounded-lg object-cover"
         />
       </div>
     </div>