96 lines
2.6 KiB
TypeScript
96 lines
2.6 KiB
TypeScript
import { NDKEvent, NDKKind, NostrEvent } from '@nostr-dev-kit/ndk';
|
|
import { useQuery } from '@tanstack/react-query';
|
|
import { memo } from 'react';
|
|
|
|
import { useArk } from '@libs/ark';
|
|
|
|
import {
|
|
MemoizedArticleKind,
|
|
MemoizedFileKind,
|
|
MemoizedTextKind,
|
|
NoteActions,
|
|
NoteSkeleton,
|
|
} from '@shared/notes';
|
|
import { User } from '@shared/user';
|
|
|
|
export function Repost({ event }: { event: NDKEvent }) {
|
|
const { ark } = useArk();
|
|
const {
|
|
isLoading,
|
|
isError,
|
|
data: repostEvent,
|
|
} = useQuery({
|
|
queryKey: ['repost', event.id],
|
|
queryFn: async () => {
|
|
try {
|
|
if (event.content.length > 50) {
|
|
const embed = JSON.parse(event.content) as NostrEvent;
|
|
return ark.createNDKEvent({ event: embed });
|
|
}
|
|
|
|
const id = event.tags.find((el) => el[0] === 'e')[1];
|
|
return await ark.getEventById({ id });
|
|
} catch {
|
|
throw new Error('Failed to get repost event');
|
|
}
|
|
},
|
|
refetchOnWindowFocus: false,
|
|
});
|
|
|
|
const renderContentByKind = () => {
|
|
if (!repostEvent) return null;
|
|
switch (repostEvent.kind) {
|
|
case NDKKind.Text:
|
|
return <MemoizedTextKind content={repostEvent.content} />;
|
|
case 1063:
|
|
return <MemoizedFileKind tags={repostEvent.tags} />;
|
|
case NDKKind.Article:
|
|
return <MemoizedArticleKind id={repostEvent.id} tags={repostEvent.tags} />;
|
|
default:
|
|
return null;
|
|
}
|
|
};
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="w-full px-3 pb-3">
|
|
<NoteSkeleton />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (isError) {
|
|
return (
|
|
<div className="mb-3 h-min w-full px-3">
|
|
<div className="relative flex flex-col gap-2 overflow-hidden rounded-xl bg-neutral-50 pt-3 dark:bg-neutral-950">
|
|
<User pubkey={event.pubkey} time={event.created_at} variant="repost" />
|
|
<div className="relative flex flex-col gap-2">
|
|
<div className="px-3">
|
|
<p>Failed to load event</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="mb-3 h-min w-full px-3">
|
|
<div className="relative flex flex-col gap-2 overflow-hidden rounded-xl bg-neutral-50 pt-3 dark:bg-neutral-950">
|
|
<User pubkey={event.pubkey} time={event.created_at} variant="repost" />
|
|
<div className="relative flex flex-col gap-2">
|
|
<User
|
|
pubkey={repostEvent.pubkey}
|
|
time={repostEvent.created_at}
|
|
eventId={repostEvent.id}
|
|
/>
|
|
{renderContentByKind()}
|
|
<NoteActions event={repostEvent} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export const MemoizedRepost = memo(Repost);
|