66 lines
2.1 KiB
TypeScript
66 lines
2.1 KiB
TypeScript
import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
|
|
import { useCallback } from 'react';
|
|
import { WVList } from 'virtua';
|
|
|
|
import { LoaderIcon } from '@shared/icons';
|
|
import {
|
|
MemoizedArticleNote,
|
|
MemoizedFileNote,
|
|
MemoizedTextNote,
|
|
NoteActions,
|
|
NoteReplyForm,
|
|
NoteStats,
|
|
UnknownNote,
|
|
} from '@shared/notes';
|
|
import { ReplyList } from '@shared/notes/replies/list';
|
|
import { TitleBar } from '@shared/titleBar';
|
|
import { User } from '@shared/user';
|
|
import { WidgetWrapper } from '@shared/widgets';
|
|
|
|
import { useEvent } from '@utils/hooks/useEvent';
|
|
import { Widget } from '@utils/types';
|
|
|
|
export function LocalThreadWidget({ params }: { params: Widget }) {
|
|
const { status, data } = useEvent(params.content);
|
|
|
|
const renderKind = useCallback(
|
|
(event: NDKEvent) => {
|
|
switch (event.kind) {
|
|
case NDKKind.Text:
|
|
return <MemoizedTextNote content={event.content} />;
|
|
case NDKKind.Article:
|
|
return <MemoizedArticleNote event={event} />;
|
|
case 1063:
|
|
return <MemoizedFileNote event={event} />;
|
|
default:
|
|
return <UnknownNote event={event} />;
|
|
}
|
|
},
|
|
[data]
|
|
);
|
|
|
|
return (
|
|
<WidgetWrapper>
|
|
<TitleBar id={params.id} title={params.title} />
|
|
<WVList className="flex-1 overflow-y-auto px-3">
|
|
{status === 'pending' ? (
|
|
<div className="flex h-16 items-center justify-center rounded-xl bg-neutral-100 px-3 py-3 dark:bg-neutral-900">
|
|
<LoaderIcon className="h-5 w-5 animate-spin" />
|
|
</div>
|
|
) : (
|
|
<div className="rounded-xl bg-neutral-100 px-3 py-3 dark:bg-neutral-900">
|
|
<User pubkey={data.pubkey} time={data.created_at} variant="thread" />
|
|
<div className="mt-2">{renderKind(data)}</div>
|
|
<NoteActions id={params.content} pubkey={data.pubkey} extraButtons={false} />
|
|
</div>
|
|
)}
|
|
<NoteStats id={params.content} />
|
|
<hr className="my-4 h-px w-full border-none bg-neutral-100" />
|
|
<NoteReplyForm id={params.content} />
|
|
<ReplyList id={params.content} />
|
|
<div className="h-10" />
|
|
</WVList>
|
|
</WidgetWrapper>
|
|
);
|
|
}
|