nostr/lume
1
0
Fork 0
mirror of https://github.com/luminous-devs/lume.git synced 2024-09-18 11:13:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

updated root note

Browse Source
This commit is contained in:
Ren Amamiya 2023-04-17 08:00:18 +07:00
parent a573f9e4eb
commit c9c8b57e5a
4 changed files with 92 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/note/parent.tsx
View File

@ -15,7 +15,7 @@ export const NoteParent = memo(function NoteParent({ id }: { id: string }) {
const [event, setEvent] = useState(null);
const unsubscribe = useRef(null);
const content = event ? contentParser(event?.content, event.tags) : '';
const content = event ? contentParser(event.content, event.tags) : '';
const fetchEvent = useCallback(async () => {
const { createNote } = await import('@utils/bindings');

2
src/components/note/quote.tsx
View File

@ -14,7 +14,7 @@ export const NoteQuote = memo(function NoteQuote({ id }: { id: string }) {
const [event, setEvent] = useState(null);
const unsubscribe = useRef(null);
const content = contentParser(event.content, event.tags);
const content = event ? contentParser(event.content, event.tags) : '';
const fetchEvent = useCallback(async () => {
const { createNote } = await import('@utils/bindings');

2
src/components/note/quoteRepost.tsx
View File

@ -9,6 +9,8 @@ export const NoteQuoteRepost = memo(function NoteQuoteRepost({ event }: { event:
if (event.content.length > 0) {
note = <RootNote event={JSON.parse(event.content)} />;
} else {
note = <RootNote event={event.tags[0][1]} />;
}
return note;

108
src/components/note/rootNote.tsx
View File

@ -1,14 +1,20 @@
import NoteMetadata from '@components/note/metadata';
import { RelayContext } from '@components/relaysProvider';
import { UserExtend } from '@components/user/extend';
import { contentParser } from '@utils/parser';
import { useRouter } from 'next/navigation';
import { memo } from 'react';
import { memo, useCallback, useContext, useEffect, useRef, useState } from 'react';
export const RootNote = memo(function RootNote({ event }: { event: any }) {
const router = useRouter();
const content = contentParser(event.content, event.tags);
const [pool, relays]: any = useContext(RelayContext);
const [data, setData] = useState(null);
const [content, setContent] = useState('');
const unsubscribe = useRef(null);
const openUserPage = (e) => {
e.stopPropagation();
@ -24,26 +30,88 @@ export const RootNote = memo(function RootNote({ event }: { event: any }) {
}
};
return (
<div onClick={(e) => openThread(e)} className="relative z-10 flex flex-col">
<div onClick={(e) => openUserPage(e)}>
<UserExtend pubkey={event.pubkey} time={event.created_at} />
const fetchEvent = useCallback(
async (id: string) => {
unsubscribe.current = pool.subscribe(
[
{
ids: [id],
kinds: [1],
},
],
relays,
(event: any) => {
setData(event);
setContent(contentParser(event.content, event.tags));
},
undefined,
undefined,
{
unsubscribeOnEose: true,
}
);
},
[pool, relays]
);
useEffect(() => {
if (typeof event === 'object') {
setData(event);
setContent(contentParser(event.content, event.tags));
} else {
fetchEvent(event);
}
}, [event, fetchEvent]);
if (data) {
return (
<div onClick={(e) => openThread(e)} className="relative z-10 flex flex-col">
<div onClick={(e) => openUserPage(e)}>
<UserExtend pubkey={data.pubkey} time={data.created_at} />
</div>
<div className="-mt-5 pl-[52px]">
<div className="flex flex-col gap-2">
<div className="prose prose-zinc max-w-none whitespace-pre-line break-words text-[15px] leading-tight dark:prose-invert prose-p:m-0 prose-p:text-[15px] prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-img:m-0 prose-video:m-0">
{content}
</div>
</div>
</div>
<div onClick={(e) => e.stopPropagation()} className="mt-5 pl-[52px]">
<NoteMetadata
eventID={data.id}
eventPubkey={data.pubkey}
eventContent={data.content}
eventTime={data.created_at}
/>
</div>
</div>
<div className="-mt-5 pl-[52px]">
<div className="flex flex-col gap-2">
<div className="prose prose-zinc max-w-none whitespace-pre-line break-words text-[15px] leading-tight dark:prose-invert prose-p:m-0 prose-p:text-[15px] prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-img:m-0 prose-video:m-0">
{content}
);
} else {
return (
<div className="relative z-10 flex h-min animate-pulse select-text flex-col pb-5">
<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 className="h-3 w-3 rounded-full bg-zinc-700" />
</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 onClick={(e) => e.stopPropagation()} className="mt-5 pl-[52px]">
<NoteMetadata
eventID={event.id}
eventPubkey={event.pubkey}
eventContent={event.content}
eventTime={event.created_at}
/>
</div>
</div>
);
);
}
});