84 lines
2.8 KiB
TypeScript
84 lines
2.8 KiB
TypeScript
import { contentParser } from '@lume/app/newsfeed/components/contentParser';
|
|
import { NoteDefaultUser } from '@lume/app/newsfeed/components/user/default';
|
|
import { READONLY_RELAYS } from '@lume/stores/constants';
|
|
|
|
import { RelayPool } from 'nostr-relaypool';
|
|
import { memo } from 'react';
|
|
import useSWRSubscription from 'swr/subscription';
|
|
|
|
export const NoteParent = memo(function NoteParent({ id }: { id: string }) {
|
|
const { data, error } = useSWRSubscription(
|
|
id
|
|
? [
|
|
{
|
|
ids: [id],
|
|
kinds: [1],
|
|
},
|
|
]
|
|
: null,
|
|
(key, { next }) => {
|
|
const pool = new RelayPool(READONLY_RELAYS);
|
|
const unsubscribe = pool.subscribe(
|
|
key,
|
|
READONLY_RELAYS,
|
|
(event: any) => {
|
|
next(null, event);
|
|
},
|
|
undefined,
|
|
undefined,
|
|
{
|
|
unsubscribeOnEose: true,
|
|
}
|
|
);
|
|
|
|
return () => {
|
|
unsubscribe();
|
|
};
|
|
}
|
|
);
|
|
|
|
return (
|
|
<div className="relative pb-5">
|
|
{error && <div>failed to load</div>}
|
|
{!data ? (
|
|
<div className="animated-pulse">
|
|
<div className="flex items-start gap-2">
|
|
<div className="relative h-11 w-11 shrink overflow-hidden rounded-md bg-zinc-700" />
|
|
<div className="flex w-full flex-1 items-start justify-between">
|
|
<div className="flex w-full items-center justify-between">
|
|
<div className="flex items-center gap-2 text-sm">
|
|
<div className="h-4 w-16 rounded bg-zinc-700" />
|
|
<span className="text-zinc-500">·</span>
|
|
<div className="h-4 w-12 rounded bg-zinc-700" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="-mt-5 pl-[52px]">
|
|
<div className="flex flex-col gap-6">
|
|
<div className="h-16 w-full rounded bg-zinc-700" />
|
|
<div className="flex items-center gap-8">
|
|
<div className="h-4 w-12 rounded bg-zinc-700" />
|
|
<div className="h-4 w-12 rounded bg-zinc-700" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<>
|
|
<div className="absolute left-[21px] top-0 h-full w-0.5 bg-gradient-to-t from-zinc-800 to-zinc-600"></div>
|
|
<div className="relative z-10 flex flex-col">
|
|
<NoteDefaultUser pubkey={data.pubkey} time={data.created_at} />
|
|
<div className="mt-1 pl-[52px]">
|
|
<div className="whitespace-pre-line break-words text-[15px] leading-tight text-zinc-100">
|
|
{contentParser(data.content, data.tags)}
|
|
</div>
|
|
</div>
|
|
<div onClick={(e) => e.stopPropagation()} className="mt-5 pl-[52px]"></div>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
});
|