nostr/lume
1
0
Fork 0
mirror of https://github.com/luminous-devs/lume.git synced 2024-09-14 09:13:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

updated fetch profile function

Browse Source
This commit is contained in:
Ren Amamiya 2023-02-23 09:18:58 +07:00
parent 76df6dbacf
commit eae708e07c
3 changed files with 75 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/note/atoms/rootUser.tsx
View File

@ -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) {
const userData: any = JSON.parse(events[0].content);
return (
<div className="text-zinc-400">
<p>
{userData?.name ? userData.name : truncate(userPubkey, 16, ' .... ')} {action}
</p>
</div>
);
} else {
return <></>;
}
// #TODO: save response to DB
onEvent((rawMetadata) => {
try {
const metadata: any = JSON.parse(rawMetadata.content);
if (metadata) {
setProfile(metadata);
}
} catch (err) {
console.error(err, rawMetadata);
}
});
return (
<div className="text-zinc-400">
<p>
{profile.name ? profile.name : truncate(userPubkey, 16, ' .... ')} {action}
</p>
</div>
);
}

106
src/components/note/atoms/user.tsx
View File

@ -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) {
const userData: any = JSON.parse(events[0].content);
// #TODO: save response to DB
onEvent((rawMetadata) => {
try {
const metadata: any = JSON.parse(rawMetadata.content);
if (metadata) {
setProfile(metadata);
}
} catch (err) {
console.error(err, rawMetadata);
}
});
return (
<div className="relative flex items-start gap-4">
<div className="relative h-11 w-11 shrink overflow-hidden rounded-full border border-white/10">
{userData?.picture ? (
<ImageWithFallback
src={userData.picture}
alt={pubkey}
fill={true}
className="rounded-full object-cover"
/>
) : (
<Avatar
size={44}
name={pubkey}
variant="beam"
colors={['#FEE2E2', '#FEF3C7', '#F59E0B', '#EC4899', '#D946EF', '#8B5CF6']}
/>
)}
</div>
<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 className="font-bold leading-tight">
{userData?.name ? userData.name : truncate(pubkey, 16, ' .... ')}
</span>
<span className="leading-tight text-zinc-500">·</span>
<Moment fromNow unix className="text-zinc-500">
{time}
</Moment>
</div>
<div>
<MoreIcon />
</div>
return (
<div className="relative flex items-start gap-4">
<div className="relative h-11 w-11 shrink overflow-hidden rounded-full border border-white/10">
{profile.picture ? (
<ImageWithFallback
src={profile.picture}
alt={pubkey}
fill={true}
className="rounded-full object-cover"
/>
) : (
<Avatar
size={44}
name={pubkey}
variant="beam"
colors={['#FEE2E2', '#FEF3C7', '#F59E0B', '#EC4899', '#D946EF', '#8B5CF6']}
/>
)}
</div>
<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 className="font-bold leading-tight">
{profile.name ? profile.name : truncate(pubkey, 16, ' .... ')}
</span>
<span className="leading-tight text-zinc-500">·</span>
<Moment fromNow unix className="text-zinc-500">
{time}
</Moment>
</div>
<div>
<MoreIcon />
</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>
);
}
</div>
);
});

7
src/components/note/content/preview/imageCard.tsx
View File

@ -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
className={`relative mt-2 flex flex-col overflow-hidden rounded-xl border border-zinc-800`}>
<div className="relative h-full w-full">
<div className={`relative mt-2 flex flex-col overflow-hidden`}>
<div className="relative h-full w-2/3 rounded-lg border border-zinc-800">
<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>