60 lines
2.0 KiB
TypeScript
60 lines
2.0 KiB
TypeScript
import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
|
|
import { useQuery } from '@tanstack/react-query';
|
|
import { useCallback } from 'react';
|
|
|
|
import { LoaderIcon } from '@shared/icons';
|
|
import { MemoizedRepost, MemoizedTextNote, UnknownNote } from '@shared/notes';
|
|
|
|
import { useNostr } from '@utils/hooks/useNostr';
|
|
|
|
export function UserLatestPosts({ pubkey }: { pubkey: string }) {
|
|
const { getEventsByPubkey } = useNostr();
|
|
const { status, data } = useQuery({
|
|
queryKey: ['user-posts', pubkey],
|
|
queryFn: async () => {
|
|
return await getEventsByPubkey(pubkey);
|
|
},
|
|
refetchOnWindowFocus: false,
|
|
});
|
|
|
|
const renderItem = useCallback(
|
|
(event: NDKEvent) => {
|
|
switch (event.kind) {
|
|
case NDKKind.Text:
|
|
return <MemoizedTextNote key={event.id} event={event} />;
|
|
case NDKKind.Repost:
|
|
return <MemoizedRepost key={event.id} event={event} />;
|
|
default:
|
|
return <UnknownNote key={event.id} event={event} />;
|
|
}
|
|
},
|
|
[data]
|
|
);
|
|
|
|
return (
|
|
<div className="mt-4 border-t border-neutral-300 pt-3 dark:border-neutral-700">
|
|
<h3 className="mb-4 px-3 text-lg font-semibold text-neutral-900 dark:text-neutral-100">
|
|
Latest post
|
|
</h3>
|
|
<div>
|
|
{status === 'pending' ? (
|
|
<div className="px-3">
|
|
<div className="inline-flex h-16 w-full items-center justify-center gap-1.5 rounded-lg bg-neutral-300 text-sm font-medium dark:bg-neutral-700">
|
|
<LoaderIcon className="h-4 w-4 animate-spin" />
|
|
Loading latest posts...
|
|
</div>
|
|
</div>
|
|
) : data.length < 1 ? (
|
|
<div className="px-3">
|
|
<div className="inline-flex h-16 w-full items-center justify-center rounded-lg bg-neutral-300 text-sm font-medium dark:bg-neutral-700">
|
|
No posts from 24 hours ago
|
|
</div>
|
|
</div>
|
|
) : (
|
|
data.map((event) => renderItem(event))
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|