improve notification and performance
This commit is contained in:
@@ -1,109 +1,158 @@
|
||||
import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
|
||||
import { memo } from 'react';
|
||||
|
||||
import { ShareIcon } from '@shared/icons';
|
||||
import {
|
||||
MemoizedArticleKind,
|
||||
MemoizedFileKind,
|
||||
MemoizedTextKind,
|
||||
NoteSkeleton,
|
||||
} from '@shared/notes';
|
||||
import { ReplyIcon, RepostIcon } from '@shared/icons';
|
||||
import { ChildNote, TextKind } from '@shared/notes';
|
||||
import { User } from '@shared/user';
|
||||
|
||||
import { WIDGET_KIND } from '@stores/constants';
|
||||
|
||||
import { formatCreatedAt } from '@utils/createdAt';
|
||||
import { useEvent } from '@utils/hooks/useEvent';
|
||||
import { useNostr } from '@utils/hooks/useNostr';
|
||||
import { useWidget } from '@utils/hooks/useWidget';
|
||||
|
||||
export function NotifyNote({ event }: { event: NDKEvent }) {
|
||||
const createdAt = formatCreatedAt(event.created_at, false);
|
||||
const rootEventId = event.tags.find((el) => el[0] === 'e')?.[1];
|
||||
|
||||
const { status, data } = useEvent(rootEventId);
|
||||
const { getEventThread } = useNostr();
|
||||
const { addWidget } = useWidget();
|
||||
|
||||
const renderKind = (event: NDKEvent) => {
|
||||
switch (event.kind) {
|
||||
case NDKKind.Text:
|
||||
return <MemoizedTextKind key={event.id} content={event.content} textmode />;
|
||||
case NDKKind.Article:
|
||||
return <MemoizedArticleKind key={event.id} id={event.id} tags={event.tags} />;
|
||||
case 1063:
|
||||
return <MemoizedFileKind key={event.id} tags={event.tags} />;
|
||||
default:
|
||||
return (
|
||||
<div className="break-p line-clamp-3 select-text leading-normal text-neutral-900 dark:text-neutral-100">
|
||||
{event.content}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
const thread = getEventThread(event.tags);
|
||||
const createdAt = formatCreatedAt(event.created_at, false);
|
||||
|
||||
const renderText = (kind: number) => {
|
||||
switch (kind) {
|
||||
case NDKKind.Text:
|
||||
return 'replied';
|
||||
case NDKKind.Reaction: {
|
||||
return `reacted your post`;
|
||||
}
|
||||
case NDKKind.Repost:
|
||||
return 'reposted your post';
|
||||
case NDKKind.Zap:
|
||||
return 'zapped your post';
|
||||
default:
|
||||
return 'unknown';
|
||||
}
|
||||
};
|
||||
|
||||
if (status === 'pending') {
|
||||
if (event.kind === NDKKind.Reaction) {
|
||||
return (
|
||||
<div className="h-min w-full px-3 pb-3">
|
||||
<div className="relative overflow-hidden rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
|
||||
<NoteSkeleton />
|
||||
<div className="mb-3 h-min w-full px-3">
|
||||
<div className="flex flex-col gap-2 rounded-xl bg-neutral-50 p-3 dark:bg-neutral-950">
|
||||
<div className="flex h-10 items-center justify-between">
|
||||
<div className="relative flex w-full items-center gap-2 px-3 pt-2">
|
||||
<div className="absolute -left-0.5 -top-0.5 inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-blue-100 text-xs ring-2 ring-neutral-50 dark:bg-blue-900 dark:ring-neutral-950">
|
||||
{event.content === '+' ? '👍' : event.content}
|
||||
</div>
|
||||
<div className="flex flex-1 items-center justify-between">
|
||||
<div className="inline-flex items-center gap-1.5">
|
||||
<User pubkey={event.pubkey} variant="notify" />
|
||||
<p className="text-neutral-700 dark:text-neutral-300">reacted</p>
|
||||
</div>
|
||||
<div className="text-neutral-500 dark:text-neutral-400">{createdAt}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="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} /> : null}
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() =>
|
||||
addWidget.mutate({
|
||||
kind: WIDGET_KIND.thread,
|
||||
title: 'Thread',
|
||||
content: thread.rootEventId,
|
||||
})
|
||||
}
|
||||
className="self-start text-blue-500 hover:text-blue-600"
|
||||
>
|
||||
Show original post
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mb-3 h-min w-full px-3">
|
||||
<div className="flex flex-col gap-2 rounded-xl bg-neutral-50 p-3 dark:bg-neutral-950">
|
||||
<div className="flex h-10 items-center justify-between">
|
||||
<div className="relative flex w-full items-center gap-2 px-3 pt-2">
|
||||
<div className="absolute -left-0.5 -top-0.5 inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-blue-100 text-xs ring-2 ring-neutral-50 dark:bg-blue-900 dark:ring-neutral-950">
|
||||
{event.kind === 7 ? (event.content === '+' ? '👍' : event.content) : '⚡️'}
|
||||
</div>
|
||||
<div className="flex flex-1 items-center justify-between">
|
||||
<div className="inline-flex items-center gap-1.5">
|
||||
<User pubkey={event.pubkey} variant="notify" />
|
||||
<p className="text-neutral-900 dark:text-neutral-100">
|
||||
{renderText(event.kind)}
|
||||
</p>
|
||||
if (event.kind === NDKKind.Repost) {
|
||||
return (
|
||||
<div className="mb-3 h-min w-full px-3">
|
||||
<div className="flex flex-col gap-2 rounded-xl bg-neutral-50 p-3 dark:bg-neutral-950">
|
||||
<div className="flex h-10 items-center justify-between">
|
||||
<div className="relative flex w-full items-center gap-2 px-3 pt-2">
|
||||
<div className="absolute -left-0.5 -top-0.5 inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-teal-500 text-xs ring-2 ring-neutral-50 dark:ring-neutral-950">
|
||||
<RepostIcon className="h-4 w-4 text-white" />
|
||||
</div>
|
||||
<div className="flex flex-1 items-center justify-between">
|
||||
<div className="inline-flex items-center gap-1.5">
|
||||
<User pubkey={event.pubkey} variant="notify" />
|
||||
<p className="text-neutral-700 dark:text-neutral-300">reposted</p>
|
||||
</div>
|
||||
<div className="text-neutral-500 dark:text-neutral-400">{createdAt}</div>
|
||||
</div>
|
||||
<div className="text-neutral-500 dark:text-neutral-400">{createdAt}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<div className="flex-1">{data ? renderKind(data) : <p>Loading...</p>}</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() =>
|
||||
addWidget.mutate({
|
||||
kind: WIDGET_KIND.thread,
|
||||
title: 'Thread',
|
||||
content: data.id,
|
||||
})
|
||||
}
|
||||
className="inline-flex min-h-full w-10 shrink-0 items-center justify-center rounded-lg text-neutral-600 hover:text-blue-500 dark:text-neutral-400"
|
||||
>
|
||||
<ShareIcon className="h-5 w-5" />
|
||||
</button>
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="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} /> : null}
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() =>
|
||||
addWidget.mutate({
|
||||
kind: WIDGET_KIND.thread,
|
||||
title: 'Thread',
|
||||
content: thread.rootEventId,
|
||||
})
|
||||
}
|
||||
className="self-start text-blue-500 hover:text-blue-600"
|
||||
>
|
||||
Show original post
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
);
|
||||
}
|
||||
|
||||
if (event.kind === NDKKind.Text) {
|
||||
return (
|
||||
<div className="mb-3 h-min w-full px-3">
|
||||
<div className="flex flex-col gap-2 rounded-xl bg-neutral-50 p-3 dark:bg-neutral-950">
|
||||
<div className="flex h-10 items-center justify-between">
|
||||
<div className="relative flex w-full items-center gap-2 px-3 pt-2">
|
||||
<div className="absolute -left-0.5 -top-0.5 inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-blue-500 text-xs ring-2 ring-neutral-50 dark:ring-neutral-950">
|
||||
<ReplyIcon className="h-4 w-4 text-white" />
|
||||
</div>
|
||||
<div className="flex flex-1 items-center justify-between">
|
||||
<div className="inline-flex items-center gap-1.5">
|
||||
<User pubkey={event.pubkey} variant="notify" />
|
||||
<p className="text-neutral-700 dark:text-neutral-300">replied</p>
|
||||
</div>
|
||||
<div className="text-neutral-500 dark:text-neutral-400">{createdAt}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="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.replyEventId ? (
|
||||
<ChildNote id={thread.replyEventId} />
|
||||
) : thread.rootEventId ? (
|
||||
<ChildNote id={thread.rootEventId} isRoot />
|
||||
) : null}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() =>
|
||||
addWidget.mutate({
|
||||
kind: WIDGET_KIND.thread,
|
||||
title: 'Thread',
|
||||
content: thread.replyEventId
|
||||
? thread.replyEventId
|
||||
: thread.rootEventId,
|
||||
})
|
||||
}
|
||||
className="self-start text-blue-500 hover:text-blue-600"
|
||||
>
|
||||
Show full thread
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<TextKind content={event.content} textmode />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export const MemoizedNotifyNote = memo(NotifyNote);
|
||||
|
||||
Reference in New Issue
Block a user