87 lines
2.8 KiB
TypeScript
87 lines
2.8 KiB
TypeScript
import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
|
|
import { useCallback } from 'react';
|
|
import { WVList } from 'virtua';
|
|
|
|
import { LoaderIcon } from '@shared/icons';
|
|
import {
|
|
ChildNote,
|
|
MemoizedArticleKind,
|
|
MemoizedFileKind,
|
|
MemoizedTextKind,
|
|
NoteActions,
|
|
NoteReplyForm,
|
|
} 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 { useNostr } from '@utils/hooks/useNostr';
|
|
import { Widget } from '@utils/types';
|
|
|
|
export function ThreadWidget({ widget }: { widget: Widget }) {
|
|
const { isFetching, isError, data } = useEvent(widget.content);
|
|
const { getEventThread } = useNostr();
|
|
|
|
const renderKind = useCallback(
|
|
(event: NDKEvent) => {
|
|
const thread = getEventThread(event.tags);
|
|
switch (event.kind) {
|
|
case NDKKind.Text:
|
|
return (
|
|
<>
|
|
{thread ? (
|
|
<div className="mb-2 w-full px-3">
|
|
<div className="flex h-min w-full flex-col gap-3 rounded-lg bg-neutral-100 p-3 dark:bg-neutral-900">
|
|
{thread.rootEventId ? (
|
|
<ChildNote id={thread.rootEventId} isRoot />
|
|
) : null}
|
|
{thread.replyEventId ? <ChildNote id={thread.replyEventId} /> : null}
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
<MemoizedTextKind content={event.content} />
|
|
</>
|
|
);
|
|
case NDKKind.Article:
|
|
return <MemoizedArticleKind id={event.id} tags={event.tags} />;
|
|
case 1063:
|
|
return <MemoizedFileKind tags={event.tags} />;
|
|
default:
|
|
return null;
|
|
}
|
|
},
|
|
[data]
|
|
);
|
|
|
|
return (
|
|
<WidgetWrapper>
|
|
<TitleBar id={widget.id} title={widget.title} />
|
|
<WVList className="flex-1 overflow-y-auto px-3 pb-5">
|
|
{isFetching ? (
|
|
<div className="flex h-16 items-center justify-center rounded-xl bg-neutral-50 px-3 py-3 dark:bg-neutral-950">
|
|
<LoaderIcon className="h-5 w-5 animate-spin" />
|
|
</div>
|
|
) : (
|
|
<>
|
|
<div className="flex flex-col rounded-xl bg-neutral-50 dark:bg-neutral-950">
|
|
{isError ? (
|
|
<div>Failed to fetch event</div>
|
|
) : (
|
|
<>
|
|
<User pubkey={data.pubkey} time={data.created_at} variant="thread" />
|
|
{renderKind(data)}
|
|
<NoteActions event={data} />
|
|
</>
|
|
)}
|
|
</div>
|
|
<NoteReplyForm rootEvent={data} />
|
|
<ReplyList eventId={data.id} />
|
|
</>
|
|
)}
|
|
</WVList>
|
|
</WidgetWrapper>
|
|
);
|
|
}
|