refactor note component
This commit is contained in:
Ren Amamiya
52
src/shared/notes/kinds/kind1.tsx
Normal file
52
src/shared/notes/kinds/kind1.tsx
Normal file
@@ -0,0 +1,52 @@
|
||||
import { useMemo } from 'react';
|
||||
|
||||
import { LinkPreview, NoteActions, NoteMetadata, VideoPreview } from '@shared/notes';
|
||||
import { MentionNote } from '@shared/notes/mentions/note';
|
||||
import { ImagePreview } from '@shared/notes/preview/image';
|
||||
import { User } from '@shared/user';
|
||||
|
||||
import { parser } from '@utils/parser';
|
||||
import { LumeEvent } from '@utils/types';
|
||||
|
||||
export function NoteKind_1({
|
||||
event,
|
||||
skipMetadata = false,
|
||||
}: {
|
||||
event: LumeEvent;
|
||||
skipMetadata?: boolean;
|
||||
}) {
|
||||
const content = useMemo(() => parser(event), [event.id]);
|
||||
|
||||
return (
|
||||
<div className="h-min w-full px-3 py-1.5">
|
||||
<div className="relative overflow-hidden rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-3 pt-3">
|
||||
<div className="relative flex flex-col">
|
||||
<User pubkey={event.pubkey} time={event.created_at} />
|
||||
<div className="relative z-20 -mt-5 flex items-start gap-3">
|
||||
<div className="w-11 shrink-0" />
|
||||
<div className="flex-1">
|
||||
<div className="relative z-10 select-text whitespace-pre-line break-words text-base text-zinc-100">
|
||||
{content.parsed}
|
||||
</div>
|
||||
{content.images.length > 0 && <ImagePreview urls={content.images} />}
|
||||
{content.videos.length > 0 && <VideoPreview urls={content.videos} />}
|
||||
{content.links.length > 0 && <LinkPreview urls={content.links} />}
|
||||
{content.notes.length > 0 &&
|
||||
content.notes.map((note: string) => <MentionNote key={note} id={note} />)}
|
||||
<NoteActions
|
||||
id={event.event_id}
|
||||
rootID={event.parent_id}
|
||||
eventPubkey={event.pubkey}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{!skipMetadata ? (
|
||||
<NoteMetadata id={event.event_id} />
|
||||
) : (
|
||||
<div className="pb-3" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
42
src/shared/notes/kinds/kind1063.tsx
Normal file
42
src/shared/notes/kinds/kind1063.tsx
Normal file
@@ -0,0 +1,42 @@
|
||||
import { Image } from '@shared/image';
|
||||
import { NoteActions, NoteMetadata } from '@shared/notes';
|
||||
import { User } from '@shared/user';
|
||||
|
||||
import { LumeEvent } from '@utils/types';
|
||||
|
||||
function isImage(url: string) {
|
||||
return /\.(jpg|jpeg|gif|png|webp|avif)$/.test(url);
|
||||
}
|
||||
|
||||
export function NoteKind_1063({ event }: { event: LumeEvent }) {
|
||||
const url = event.tags[0][1];
|
||||
|
||||
return (
|
||||
<div className="h-min w-full px-3 py-1.5">
|
||||
<div className="relative overflow-hidden rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-3 pt-3">
|
||||
<div className="flex flex-col">
|
||||
<User pubkey={event.pubkey} time={event.created_at} />
|
||||
<div className="relative z-20 -mt-5 flex items-start gap-3">
|
||||
<div className="w-11 shrink-0" />
|
||||
<div className="flex-1">
|
||||
{isImage(url) && (
|
||||
<Image
|
||||
src={url}
|
||||
fallback="https://void.cat/d/XTmrMkpid8DGLjv1AzdvcW"
|
||||
alt="image"
|
||||
className="h-auto w-full rounded-lg object-cover"
|
||||
/>
|
||||
)}
|
||||
<NoteActions
|
||||
id={event.event_id}
|
||||
rootID={event.parent_id}
|
||||
eventPubkey={event.pubkey}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<NoteMetadata id={event.event_id} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
74
src/shared/notes/kinds/repost.tsx
Normal file
74
src/shared/notes/kinds/repost.tsx
Normal file
@@ -0,0 +1,74 @@
|
||||
import {
|
||||
ImagePreview,
|
||||
LinkPreview,
|
||||
MentionNote,
|
||||
NoteActions,
|
||||
NoteMetadata,
|
||||
NoteSkeleton,
|
||||
RepostUser,
|
||||
VideoPreview,
|
||||
} from '@shared/notes';
|
||||
import { User } from '@shared/user';
|
||||
|
||||
import { useEvent } from '@utils/hooks/useEvent';
|
||||
import { getRepostID } from '@utils/transform';
|
||||
import { LumeEvent } from '@utils/types';
|
||||
|
||||
export function Repost({ event }: { event: LumeEvent }) {
|
||||
const repostID = getRepostID(event.tags);
|
||||
const { status, data } = useEvent(repostID, event.content);
|
||||
|
||||
if (status === 'loading') {
|
||||
return (
|
||||
<div className="relative overflow-hidden rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-3 pt-3">
|
||||
<NoteSkeleton />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (status === 'error') {
|
||||
return (
|
||||
<div className="flex items-center justify-center overflow-hidden rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-3 py-3">
|
||||
<p className="text-zinc-400">Failed to fetch</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="h-min w-full px-3 py-1.5">
|
||||
<div className="relative overflow-hidden rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-3 pt-3">
|
||||
<div className="flex flex-col">
|
||||
<div className="isolate flex flex-col -space-y-4 overflow-hidden">
|
||||
<RepostUser pubkey={event.pubkey} />
|
||||
<User pubkey={data.pubkey} time={event.created_at} isRepost={true} />
|
||||
</div>
|
||||
<div className="relative z-20 flex items-start gap-3">
|
||||
<div className="w-11 shrink-0" />
|
||||
<div className="flex-1">
|
||||
<div className="relative z-10 select-text whitespace-pre-line break-all text-base text-zinc-100">
|
||||
{data.content.parsed}
|
||||
</div>
|
||||
{data.content.images.length > 0 && (
|
||||
<ImagePreview urls={data.content.images} />
|
||||
)}
|
||||
{data.content.videos.length > 0 && (
|
||||
<VideoPreview urls={data.content.videos} />
|
||||
)}
|
||||
{data.content.links.length > 0 && <LinkPreview urls={data.content.links} />}
|
||||
{data.content.notes.length > 0 &&
|
||||
data.content.notes.map((note: string) => (
|
||||
<MentionNote key={note} id={note} />
|
||||
))}
|
||||
<NoteActions
|
||||
id={event.event_id}
|
||||
rootID={event.parent_id}
|
||||
eventPubkey={event.pubkey}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<NoteMetadata id={event.event_id} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
60
src/shared/notes/kinds/sub.tsx
Normal file
60
src/shared/notes/kinds/sub.tsx
Normal file
@@ -0,0 +1,60 @@
|
||||
import {
|
||||
ImagePreview,
|
||||
LinkPreview,
|
||||
MentionNote,
|
||||
NoteActions,
|
||||
NoteSkeleton,
|
||||
VideoPreview,
|
||||
} from '@shared/notes';
|
||||
import { User } from '@shared/user';
|
||||
|
||||
import { useEvent } from '@utils/hooks/useEvent';
|
||||
|
||||
export function SubNote({ id }: { id: string }) {
|
||||
const { status, data } = useEvent(id);
|
||||
|
||||
if (status === 'loading') {
|
||||
return (
|
||||
<div className="relative overflow-hidden rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-3 pt-3">
|
||||
<NoteSkeleton />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (status === 'error') {
|
||||
return (
|
||||
<div className="flex items-center justify-center overflow-hidden rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-3 py-3">
|
||||
<p className="text-zinc-400">Failed to fetch</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="absolute bottom-0 left-[18px] h-[calc(100%-3.4rem)] w-0.5 bg-gradient-to-t from-zinc-800 to-zinc-600" />
|
||||
<div className="mb-5 flex flex-col">
|
||||
<User pubkey={data.pubkey} time={data.created_at} />
|
||||
<div className="relative z-20 -mt-5 flex items-start gap-3">
|
||||
<div className="w-11 shrink-0" />
|
||||
<div className="flex-1">
|
||||
<div className="relative z-10 select-text whitespace-pre-line break-words text-base text-zinc-100">
|
||||
{data.content.parsed}
|
||||
</div>
|
||||
{data.content.images.length > 0 && (
|
||||
<ImagePreview urls={data.content.images} />
|
||||
)}
|
||||
{data.content.videos.length > 0 && (
|
||||
<VideoPreview urls={data.content.videos} />
|
||||
)}
|
||||
{data.content.links.length > 0 && <LinkPreview urls={data.content.links} />}
|
||||
{data.content.notes.length > 0 &&
|
||||
data.content.notes.map((note: string) => (
|
||||
<MentionNote key={note} id={note} />
|
||||
))}
|
||||
<NoteActions id={data.id} eventPubkey={data.pubkey} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
58
src/shared/notes/kinds/thread.tsx
Normal file
58
src/shared/notes/kinds/thread.tsx
Normal file
@@ -0,0 +1,58 @@
|
||||
import { useMemo } from 'react';
|
||||
|
||||
import {
|
||||
LinkPreview,
|
||||
NoteActions,
|
||||
NoteMetadata,
|
||||
SubNote,
|
||||
VideoPreview,
|
||||
} from '@shared/notes';
|
||||
import { MentionNote } from '@shared/notes/mentions/note';
|
||||
import { ImagePreview } from '@shared/notes/preview/image';
|
||||
import { User } from '@shared/user';
|
||||
|
||||
import { parser } from '@utils/parser';
|
||||
import { LumeEvent } from '@utils/types';
|
||||
|
||||
export function NoteThread({
|
||||
event,
|
||||
root,
|
||||
reply,
|
||||
}: {
|
||||
event: LumeEvent;
|
||||
root: string;
|
||||
reply: string;
|
||||
}) {
|
||||
const content = useMemo(() => parser(event), [event.id]);
|
||||
|
||||
return (
|
||||
<div className="h-min w-full px-3 py-1.5">
|
||||
<div className="overflow-hidden rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-3 pt-3">
|
||||
<div className="relative">{root && <SubNote id={root} />}</div>
|
||||
<div className="relative">{reply && <SubNote id={reply} />}</div>
|
||||
<div className="relative flex flex-col">
|
||||
<User pubkey={event.pubkey} time={event.created_at} />
|
||||
<div className="relative z-20 -mt-5 flex items-start gap-3">
|
||||
<div className="w-11 shrink-0" />
|
||||
<div className="flex-1">
|
||||
<div className="relative z-10 select-text whitespace-pre-line break-words text-base text-zinc-100">
|
||||
{content.parsed}
|
||||
</div>
|
||||
{content.images.length > 0 && <ImagePreview urls={content.images} />}
|
||||
{content.videos.length > 0 && <VideoPreview urls={content.videos} />}
|
||||
{content.links.length > 0 && <LinkPreview urls={content.links} />}
|
||||
{content.notes.length > 0 &&
|
||||
content.notes.map((note: string) => <MentionNote key={note} id={note} />)}
|
||||
<NoteActions
|
||||
id={event.event_id}
|
||||
rootID={event.parent_id}
|
||||
eventPubkey={event.pubkey}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<NoteMetadata id={event.event_id} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
40
src/shared/notes/kinds/unsupport.tsx
Normal file
40
src/shared/notes/kinds/unsupport.tsx
Normal file
@@ -0,0 +1,40 @@
|
||||
import { NoteActions, NoteMetadata } from '@shared/notes';
|
||||
import { User } from '@shared/user';
|
||||
|
||||
import { LumeEvent } from '@utils/types';
|
||||
|
||||
export function NoteKindUnsupport({ event }: { event: LumeEvent }) {
|
||||
return (
|
||||
<div className="h-min w-full px-3 py-1.5">
|
||||
<div className="relative overflow-hidden rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-3 pt-3">
|
||||
<div className="flex flex-col">
|
||||
<User pubkey={event.pubkey} time={event.created_at} />
|
||||
<div className="relative z-20 -mt-6 flex items-start gap-3">
|
||||
<div className="w-11 shrink-0" />
|
||||
<div className="flex-1">
|
||||
<div className="mt-3 flex w-full flex-col gap-2">
|
||||
<div className="inline-flex flex-col gap-1 rounded-md bg-zinc-800 px-2 py-2">
|
||||
<span className="text-sm font-medium leading-none text-zinc-500">
|
||||
Kind: {event.kind}
|
||||
</span>
|
||||
<p className="text-sm leading-none text-fuchsia-500">
|
||||
Lume isn't fully support this kind
|
||||
</p>
|
||||
</div>
|
||||
<div className="select-text whitespace-pre-line break-all text-zinc-100">
|
||||
<p>{event.content.toString()}</p>
|
||||
</div>
|
||||
</div>
|
||||
<NoteActions
|
||||
id={event.event_id}
|
||||
rootID={event.parent_id}
|
||||
eventPubkey={event.pubkey}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<NoteMetadata id={event.event_id} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user