reya/lume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor note component & add support for kind 30023

Browse Source
This commit is contained in:
Ren Amamiya
2023-08-23 09:48:22 +07:00
parent 0912948b31
commit c97c685149
32 changed files with 714 additions and 593 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/app/events/index.tsx
View File

@@ -1,13 +1,17 @@
import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
import { useParams } from 'react-router-dom';
import { useStorage } from '@libs/storage/provider';
import {
ArticleNote,
FileNote,
NoteActions,
NoteContent,
NoteReplyForm,
NoteStats,
TextNote,
ThreadUser,
UnknownNote,
} from '@shared/notes';
import { RepliesList } from '@shared/notes/replies/list';
import { NoteSkeleton } from '@shared/notes/skeleton';
@@ -19,6 +23,19 @@ export function EventScreen() {
const { db } = useStorage();
const { status, data } = useEvent(id);
const renderKind = (event: NDKEvent) => {
switch (event.kind) {
case NDKKind.Text:
return <TextNote event={event} />;
case NDKKind.Article:
return <ArticleNote event={event} />;
case 1063:
return <FileNote event={event} />;
default:
return <UnknownNote event={event} />;
}
};
return (
<div className="mx-auto w-[600px]">
<div className="scrollbar-hide flex h-full w-full flex-col gap-1.5 overflow-y-auto pt-11">
@@ -31,12 +48,10 @@ export function EventScreen() {
) : (
<div className="h-min w-full px-3 pt-1.5">
<div className="rounded-xl bg-white/10 px-3 pt-3">
<ThreadUser pubkey={data.event.pubkey} time={data.event.created_at} />
<div className="mt-2">
<NoteContent content={data.richContent} />
</div>
<ThreadUser pubkey={data.pubkey} time={data.created_at} />
<div className="mt-2">{renderKind(data)}</div>
<div>
<NoteActions id={id} pubkey={data.event.pubkey} noOpenThread={true} />
<NoteActions id={id} pubkey={data.pubkey} noOpenThread={true} />
<NoteStats id={id} />
</div>
</div>

2
src/app/space/components/button.tsx
View File

@@ -36,7 +36,7 @@ export function AddWidgetButton() {
const setArticleWidget = () => {
setWidget(db, {
kind: WidgetKinds.article,
title: 'Blogs',
title: 'Articles',
content: '',
});
};

50
src/app/space/components/widgets/article.tsx
View File

@@ -1,24 +1,21 @@
import { NDKEvent } from '@nostr-dev-kit/ndk';
import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
import { useQuery } from '@tanstack/react-query';
import { useVirtualizer } from '@tanstack/react-virtual';
import { useCallback, useRef } from 'react';
import { useNDK } from '@libs/ndk/provider';
import { NoteKind_1, NoteSkeleton, Repost } from '@shared/notes';
import { NoteKindUnsupport } from '@shared/notes/kinds/unsupport';
import { ArticleNote, NoteSkeleton, NoteWrapper } from '@shared/notes';
import { TitleBar } from '@shared/titleBar';
import { nHoursAgo } from '@utils/date';
import { Widget } from '@utils/types';
export function ArticleWidget({ params }: { params: Widget }) {
const { ndk } = useNDK();
const { status, data } = useQuery(['article-widget', params.content], async () => {
const events = await ndk.fetchEvents({
kinds: [30023],
'#t': [params.content],
since: nHoursAgo(48),
kinds: [NDKKind.Article],
limit: 100,
});
return [...events] as unknown as NDKEvent[];
});
@@ -38,41 +35,20 @@ export function ArticleWidget({ params }: { params: Widget }) {
const event: NDKEvent = data[index];
if (!event) return;
switch (event.kind) {
case 1:
return (
<div key={event.id} data-index={index} ref={virtualizer.measureElement}>
<NoteKind_1 event={event} skipMetadata={false} />
</div>
);
case 6:
return (
<div
key={event.id + index}
data-index={index}
ref={virtualizer.measureElement}
>
<Repost key={event.id} event={event} />
</div>
);
default:
return (
<div
key={event.id + index}
data-index={index}
ref={virtualizer.measureElement}
>
<NoteKindUnsupport key={event.id} event={event} />
</div>
);
}
return (
<div key={event.id} data-index={index} ref={virtualizer.measureElement}>
<NoteWrapper event={event}>
<ArticleNote event={event} />
</NoteWrapper>
</div>
);
},
[data]
);
return (
<div className="relative w-[400px] shrink-0 bg-white/10">
<TitleBar id={params.id} title={params.title + ' in 24 hours ago'} />
<TitleBar id={params.id} title={params.title} />
<div ref={parentRef} className="scrollbar-hide h-full overflow-y-auto pb-20">
{status === 'loading' ? (
<div className="px-3 py-1.5">
@@ -85,7 +61,7 @@ export function ArticleWidget({ params }: { params: Widget }) {
<div className="rounded-xl bg-white/10 px-3 py-6">
<div className="flex flex-col items-center gap-4">
<p className="text-center text-sm font-medium text-white">
No new postrs about this hashtag in 24 hours ago
There have been no new articles in the last 24 hours.
</p>
</div>
</div>

76
src/app/space/components/widgets/feed.tsx
View File

@@ -1,4 +1,4 @@
import { NDKEvent } from '@nostr-dev-kit/ndk';
import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
import { useInfiniteQuery } from '@tanstack/react-query';
import { useVirtualizer } from '@tanstack/react-virtual';
import { useCallback, useMemo, useRef } from 'react';
@@ -6,8 +6,14 @@ import { useCallback, useMemo, useRef } from 'react';
import { useStorage } from '@libs/storage/provider';
import { ArrowRightCircleIcon, LoaderIcon } from '@shared/icons';
import { NoteKind_1, NoteKind_1063, NoteThread, Repost } from '@shared/notes';
import { NoteKindUnsupport } from '@shared/notes/kinds/unsupport';
import {
ArticleNote,
FileNote,
NoteWrapper,
Repost,
TextNote,
UnknownNote,
} from '@shared/notes';
import { NoteSkeleton } from '@shared/notes/skeleton';
import { TitleBar } from '@shared/titleBar';
@@ -45,36 +51,20 @@ export function FeedWidget({ params }: { params: Widget }) {
if (!dbEvent) return;
const event: NDKEvent = JSON.parse(dbEvent.event as string);
switch (event.kind) {
case 1: {
if (dbEvent.root_id || dbEvent.reply_id) {
return (
<div
key={(dbEvent.root_id || dbEvent.reply_id) + dbEvent.id + index}
data-index={index}
ref={virtualizer.measureElement}
>
<NoteThread
event={event}
root={dbEvent.root_id}
reply={dbEvent.reply_id}
/>
</div>
);
} else {
return (
<div
key={dbEvent.id + index}
data-index={index}
ref={virtualizer.measureElement}
>
<NoteKind_1 event={event} skipMetadata={false} />
</div>
);
}
}
case 6:
case NDKKind.Text:
return (
<div
key={dbEvent.id + index}
data-index={index}
ref={virtualizer.measureElement}
>
<NoteWrapper event={event} root={dbEvent.root_id} reply={dbEvent.reply_id}>
<TextNote event={event} />
</NoteWrapper>
</div>
);
case NDKKind.Repost:
return (
<div
key={dbEvent.id + index}
@@ -91,7 +81,21 @@ export function FeedWidget({ params }: { params: Widget }) {
data-index={index}
ref={virtualizer.measureElement}
>
<NoteKind_1063 key={dbEvent.id} event={event} />
<NoteWrapper event={event}>
<FileNote event={event} />
</NoteWrapper>
</div>
);
case NDKKind.Article:
return (
<div
key={dbEvent.id + index}
data-index={index}
ref={virtualizer.measureElement}
>
<NoteWrapper event={event}>
<ArticleNote event={event} />
</NoteWrapper>
</div>
);
default:
@@ -101,7 +105,9 @@ export function FeedWidget({ params }: { params: Widget }) {
data-index={index}
ref={virtualizer.measureElement}
>
<NoteKindUnsupport key={dbEvent.id} event={event} />
<NoteWrapper event={event}>
<UnknownNote event={event} />
</NoteWrapper>
</div>
);
}
@@ -124,7 +130,7 @@ export function FeedWidget({ params }: { params: Widget }) {
<div className="bbg-white/10 rounded-xl px-3 py-6">
<div className="flex flex-col items-center gap-4">
<p className="text-center text-sm text-white">
Not found any postrs from last 48 hours
There have been no new postrs.
</p>
</div>
</div>

58
src/app/space/components/widgets/hashtag.tsx
View File

@@ -1,12 +1,19 @@
import { NDKEvent } from '@nostr-dev-kit/ndk';
import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
import { useQuery } from '@tanstack/react-query';
import { useVirtualizer } from '@tanstack/react-virtual';
import { useCallback, useRef } from 'react';
import { useNDK } from '@libs/ndk/provider';
import { NoteKind_1, NoteSkeleton, Repost } from '@shared/notes';
import { NoteKindUnsupport } from '@shared/notes/kinds/unsupport';
import {
ArticleNote,
FileNote,
NoteSkeleton,
NoteWrapper,
Repost,
TextNote,
UnknownNote,
} from '@shared/notes';
import { TitleBar } from '@shared/titleBar';
import { nHoursAgo } from '@utils/date';
@@ -16,7 +23,6 @@ export function HashtagWidget({ params }: { params: Widget }) {
const { ndk } = useNDK();
const { status, data } = useQuery(['hashtag-widget', params.content], async () => {
const events = await ndk.fetchEvents({
kinds: [1],
'#t': [params.content],
since: nHoursAgo(24),
});
@@ -39,13 +45,19 @@ export function HashtagWidget({ params }: { params: Widget }) {
if (!event) return;
switch (event.kind) {
case 1:
case NDKKind.Text:
return (
<div key={event.id} data-index={index} ref={virtualizer.measureElement}>
<NoteKind_1 event={event} skipMetadata={false} />
<div
key={event.id + index}
data-index={index}
ref={virtualizer.measureElement}
>
<NoteWrapper event={event}>
<TextNote event={event} />
</NoteWrapper>
</div>
);
case 6:
case NDKKind.Repost:
return (
<div
key={event.id + index}
@@ -55,6 +67,30 @@ export function HashtagWidget({ params }: { params: Widget }) {
<Repost key={event.id} event={event} />
</div>
);
case 1063:
return (
<div
key={event.id + index}
data-index={index}
ref={virtualizer.measureElement}
>
<NoteWrapper event={event}>
<FileNote event={event} />
</NoteWrapper>
</div>
);
case NDKKind.Article:
return (
<div
key={event.id + index}
data-index={index}
ref={virtualizer.measureElement}
>
<NoteWrapper event={event}>
<ArticleNote event={event} />
</NoteWrapper>
</div>
);
default:
return (
<div
@@ -62,7 +98,9 @@ export function HashtagWidget({ params }: { params: Widget }) {
data-index={index}
ref={virtualizer.measureElement}
>
<NoteKindUnsupport key={event.id} event={event} />
<NoteWrapper event={event}>
<UnknownNote event={event} />
</NoteWrapper>
</div>
);
}
@@ -85,7 +123,7 @@ export function HashtagWidget({ params }: { params: Widget }) {
<div className="rounded-xl bg-white/10 px-3 py-6">
<div className="flex flex-col items-center gap-4">
<p className="text-center text-sm font-medium text-white">
No new postrs about this hashtag in 24 hours ago
There have been no new postrs with this hashtag in the last 24 hours.
</p>
</div>
</div>

83
src/app/space/components/widgets/network.tsx
View File

@@ -1,15 +1,20 @@
import { NDKEvent, NDKFilter } from '@nostr-dev-kit/ndk';
import { NDKEvent, NDKFilter, NDKKind } from '@nostr-dev-kit/ndk';
import { useInfiniteQuery } from '@tanstack/react-query';
import { useVirtualizer } from '@tanstack/react-virtual';
import { destr } from 'destr';
import { useCallback, useEffect, useMemo, useRef } from 'react';
import { Link } from 'react-router-dom';
import { useStorage } from '@libs/storage/provider';
import { ArrowRightCircleIcon, LoaderIcon } from '@shared/icons';
import { NoteKind_1, NoteKind_1063, NoteThread, Repost } from '@shared/notes';
import { NoteKindUnsupport } from '@shared/notes/kinds/unsupport';
import {
ArticleNote,
FileNote,
NoteWrapper,
Repost,
TextNote,
UnknownNote,
} from '@shared/notes';
import { NoteSkeleton } from '@shared/notes/skeleton';
import { TitleBar } from '@shared/titleBar';
@@ -23,7 +28,7 @@ export function NetworkWidget() {
useInfiniteQuery({
queryKey: ['network-widget'],
queryFn: async ({ pageParam = 0 }) => {
return await db.getAllEvents(20, pageParam);
return await db.getAllEvents(30, pageParam);
},
getNextPageParam: (lastPage) => lastPage.nextCursor,
refetchOnWindowFocus: false,
@@ -51,36 +56,20 @@ export function NetworkWidget() {
if (!dbEvent) return;
const event: NDKEvent = JSON.parse(dbEvent.event as string);
switch (event.kind) {
case 1: {
if (dbEvent.root_id || dbEvent.reply_id) {
return (
<div
key={(dbEvent.root_id || dbEvent.reply_id) + dbEvent.id + index}
data-index={index}
ref={virtualizer.measureElement}
>
<NoteThread
event={event}
root={dbEvent.root_id}
reply={dbEvent.reply_id}
/>
</div>
);
} else {
return (
<div
key={dbEvent.id + index}
data-index={index}
ref={virtualizer.measureElement}
>
<NoteKind_1 event={event} skipMetadata={false} />
</div>
);
}
}
case 6:
case NDKKind.Text:
return (
<div
key={dbEvent.id + index}
data-index={index}
ref={virtualizer.measureElement}
>
<NoteWrapper event={event} root={dbEvent.root_id} reply={dbEvent.reply_id}>
<TextNote event={event} />
</NoteWrapper>
</div>
);
case NDKKind.Repost:
return (
<div
key={dbEvent.id + index}
@@ -97,7 +86,21 @@ export function NetworkWidget() {
data-index={index}
ref={virtualizer.measureElement}
>
<NoteKind_1063 key={dbEvent.id} event={event} />
<NoteWrapper event={event}>
<FileNote event={event} />
</NoteWrapper>
</div>
);
case NDKKind.Article:
return (
<div
key={dbEvent.id + index}
data-index={index}
ref={virtualizer.measureElement}
>
<NoteWrapper event={event}>
<ArticleNote event={event} />
</NoteWrapper>
</div>
);
default:
@@ -107,7 +110,9 @@ export function NetworkWidget() {
data-index={index}
ref={virtualizer.measureElement}
>
<NoteKindUnsupport key={dbEvent.id} event={event} />
<NoteWrapper event={event}>
<UnknownNote event={event} />
</NoteWrapper>
</div>
);
}
@@ -168,12 +173,6 @@ export function NetworkWidget() {
<br />
Follow more people to have more fun.
</p>
<Link
to="/trending"
className="inline-flex w-max rounded bg-fuchsia-500 px-2.5 py-1.5 text-sm hover:bg-fuchsia-600"
>
Trending users
</Link>
</div>
</div>
</div>

40
src/app/space/components/widgets/thread.tsx
View File

@@ -1,11 +1,17 @@
import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
import { useCallback } from 'react';
import { useStorage } from '@libs/storage/provider';
import {
ArticleNote,
FileNote,
NoteActions,
NoteContent,
NoteReplyForm,
NoteStats,
TextNote,
ThreadUser,
UnknownNote,
} from '@shared/notes';
import { RepliesList } from '@shared/notes/replies/list';
import { NoteSkeleton } from '@shared/notes/skeleton';
@@ -18,6 +24,22 @@ export function ThreadBlock({ params }: { params: Widget }) {
const { db } = useStorage();
const { status, data } = useEvent(params.content);
const renderKind = useCallback(
(event: NDKEvent) => {
switch (event.kind) {
case NDKKind.Text:
return <TextNote event={event} />;
case NDKKind.Article:
return <ArticleNote event={event} />;
case 1063:
return <FileNote event={event} />;
default:
return <UnknownNote event={event} />;
}
},
[data]
);
return (
<div className="scrollbar-hide h-full w-[400px] shrink-0 overflow-y-auto bg-white/10">
<TitleBar id={params.id} title={params.title} />
@@ -31,18 +53,10 @@ export function ThreadBlock({ params }: { params: Widget }) {
) : (
<div className="h-min w-full px-3 pt-1.5">
<div className="rounded-xl bg-white/10 px-3 pt-3">
<ThreadUser pubkey={data.event.pubkey} time={data.event.created_at} />
<div className="mt-2">
<NoteContent content={data.richContent} />
</div>
<div>
<NoteActions
id={params.content}
pubkey={data.event.pubkey}
noOpenThread={true}
/>
<NoteStats id={params.content} />
</div>
<ThreadUser pubkey={data.pubkey} time={data.created_at} />
<div className="mt-2">{renderKind(data)}</div>
<NoteActions id={params.content} pubkey={data.pubkey} noOpenThread={true} />
<NoteStats id={params.content} />
</div>
</div>
)}

7
src/app/space/components/widgets/trendingNotes.tsx
View File

@@ -1,8 +1,7 @@
import { NDKEvent } from '@nostr-dev-kit/ndk';
import { useQuery } from '@tanstack/react-query';
import { NoteKind_1 } from '@shared/notes';
import { NoteSkeleton } from '@shared/notes/skeleton';
import { NoteSkeleton, NoteWrapper, TextNote } from '@shared/notes';
import { TitleBar } from '@shared/titleBar';
import { Widget } from '@utils/types';
@@ -52,7 +51,9 @@ export function TrendingNotesWidget({ params }: { params: Widget }) {
) : (
<div className="relative flex w-full flex-col">
{data.map((item) => (
<NoteKind_1 key={item.event.id} event={item.event} skipMetadata={true} />
<NoteWrapper key={item.event.id} event={item.event}>
<TextNote event={item.event} />
</NoteWrapper>
))}
</div>
)}

55
src/app/space/components/widgets/user.tsx
View File

@@ -1,12 +1,19 @@
import { NDKEvent } from '@nostr-dev-kit/ndk';
import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
import { useQuery } from '@tanstack/react-query';
import { useVirtualizer } from '@tanstack/react-virtual';
import { useCallback, useRef } from 'react';
import { useNDK } from '@libs/ndk/provider';
import { NoteKind_1, NoteSkeleton, Repost } from '@shared/notes';
import { NoteKindUnsupport } from '@shared/notes/kinds/unsupport';
import {
ArticleNote,
FileNote,
NoteSkeleton,
NoteWrapper,
Repost,
TextNote,
UnknownNote,
} from '@shared/notes';
import { TitleBar } from '@shared/titleBar';
import { UserProfile } from '@shared/userProfile';
@@ -49,13 +56,19 @@ export function UserWidget({ params }: { params: Widget }) {
if (!event) return;
switch (event.kind) {
case 1:
case NDKKind.Text:
return (
<div key={event.id} data-index={index} ref={virtualizer.measureElement}>
<NoteKind_1 event={event} skipMetadata={false} />
<div
key={event.id + index}
data-index={index}
ref={virtualizer.measureElement}
>
<NoteWrapper event={event}>
<TextNote event={event} />
</NoteWrapper>
</div>
);
case 6:
case NDKKind.Repost:
return (
<div
key={event.id + index}
@@ -65,6 +78,30 @@ export function UserWidget({ params }: { params: Widget }) {
<Repost key={event.id} event={event} />
</div>
);
case 1063:
return (
<div
key={event.id + index}
data-index={index}
ref={virtualizer.measureElement}
>
<NoteWrapper event={event}>
<FileNote event={event} />
</NoteWrapper>
</div>
);
case NDKKind.Article:
return (
<div
key={event.id + index}
data-index={index}
ref={virtualizer.measureElement}
>
<NoteWrapper event={event}>
<ArticleNote event={event} />
</NoteWrapper>
</div>
);
default:
return (
<div
@@ -72,7 +109,9 @@ export function UserWidget({ params }: { params: Widget }) {
data-index={index}
ref={virtualizer.measureElement}
>
<NoteKindUnsupport key={event.id} event={event} />
<NoteWrapper event={event}>
<UnknownNote event={event} />
</NoteWrapper>
</div>
);
}

3
src/app/space/index.tsx
View File

@@ -3,6 +3,7 @@ import { useCallback, useEffect } from 'react';
import { AddWidgetButton } from '@app/space/components/button';
import { FeedWidgetForm } from '@app/space/components/forms/feed';
import { HashTagWidgetForm } from '@app/space/components/forms/hashtag';
import { ArticleWidget } from '@app/space/components/widgets/article';
import { FeedWidget } from '@app/space/components/widgets/feed';
import { HashtagWidget } from '@app/space/components/widgets/hashtag';
import { NetworkWidget } from '@app/space/components/widgets/network';
@@ -45,6 +46,8 @@ export function SpaceScreen() {
return <TrendingNotesWidget key={widget.id} params={widget} />;
case WidgetKinds.network:
return <NetworkWidget key={widget.id} />;
case WidgetKinds.article:
return <ArticleWidget key={widget.id} params={widget} />;
case WidgetKinds.xhashtag:
return <HashTagWidgetForm key={widget.id} params={widget} />;
case WidgetKinds.xfeed:

4
src/app/users/components/feed.tsx
View File

@@ -4,7 +4,7 @@ import { useRef } from 'react';
import { useNDK } from '@libs/ndk/provider';
import { NoteKind_1, NoteSkeleton } from '@shared/notes';
import { NoteSkeleton, TextNote } from '@shared/notes';
import { nHoursAgo } from '@utils/date';
import { LumeEvent } from '@utils/types';
@@ -73,7 +73,7 @@ export function UserFeed({ pubkey }: { pubkey: string }) {
data-index={virtualRow.index}
ref={rowVirtualizer.measureElement}
>
<NoteKind_1 event={data[virtualRow.index]} />
<TextNote event={data[virtualRow.index]} />
</div>
))}
</div>

4
src/app/users/index.tsx
View File

@@ -5,7 +5,7 @@ import { useParams } from 'react-router-dom';
import { useNDK } from '@libs/ndk/provider';
import { NoteKind_1, NoteSkeleton } from '@shared/notes';
import { NoteSkeleton, TextNote } from '@shared/notes';
import { nHoursAgo } from '@utils/date';
import { LumeEvent } from '@utils/types';
@@ -84,7 +84,7 @@ export function UserScreen() {
data-index={virtualRow.index}
ref={rowVirtualizer.measureElement}
>
<NoteKind_1 event={data[virtualRow.index]} />
<TextNote event={data[virtualRow.index]} />
</div>
))}
<div className="h-10" />

32
src/shared/notes/kinds/sub.tsx → src/shared/notes/child.tsx
View File

@@ -1,9 +1,18 @@
import { NoteActions, NoteContent, NoteSkeleton } from '@shared/notes';
import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
import {
ArticleNote,
FileNote,
NoteActions,
NoteSkeleton,
TextNote,
UnknownNote,
} from '@shared/notes';
import { User } from '@shared/user';
import { useEvent } from '@utils/hooks/useEvent';
export function SubNote({ id, root }: { id: string; root?: string }) {
export function ChildNote({ id, root }: { id: string; root?: string }) {
const { status, data } = useEvent(id);
if (status === 'loading') {
@@ -22,16 +31,29 @@ export function SubNote({ id, root }: { id: string; root?: string }) {
);
}
const renderKind = (event: NDKEvent) => {
switch (event.kind) {
case NDKKind.Text:
return <TextNote event={event} />;
case NDKKind.Article:
return <ArticleNote event={event} />;
case 1063:
return <FileNote event={event} />;
default:
return <UnknownNote event={event} />;
}
};
return (
<>
<div className="absolute bottom-0 left-[18px] h-[calc(100%-3.4rem)] w-0.5 bg-gradient-to-t from-white/20 to-white/10" />
<div className="mb-5 flex flex-col">
<User pubkey={data.event.pubkey} time={data.event.created_at} />
<User pubkey={data.pubkey} time={data.created_at} />
<div className="-mt-6 flex items-start gap-3">
<div className="w-11 shrink-0" />
<div className="relative z-20 flex-1">
<NoteContent content={data.richContent} long={data.event.kind === 30023} />
<NoteActions id={data.event.id} pubkey={data.event.pubkey} root={root} />
{renderKind(data)}
<NoteActions id={data.id} pubkey={data.pubkey} root={root} />
</div>
</div>
</div>

10
src/shared/notes/index.tsx
View File

@@ -11,17 +11,19 @@ export * from './replies/form';
export * from './replies/item';
export * from './replies/list';
export * from './replies/sub';
export * from './kinds/kind1';
export * from './kinds/kind1063';
export * from './kinds/text';
export * from './kinds/file';
export * from './kinds/article';
export * from './kinds/unknown';
export * from './metadata';
export * from './users/mini';
export * from './users/repost';
export * from './users/thread';
export * from './kinds/thread';
export * from './kinds/repost';
export * from './kinds/sub';
export * from './child';
export * from './skeleton';
export * from './actions';
export * from './content';
export * from './mentions/hashtag';
export * from './stats';
export * from './wrapper';

52
src/shared/notes/kinds/article.tsx Normal file
View File

@@ -0,0 +1,52 @@
import { NDKEvent } from '@nostr-dev-kit/ndk';
import { useMemo } from 'react';
import { Image } from '@shared/image';
export function ArticleNote({ event }: { event: NDKEvent }) {
const metadata = useMemo(() => {
const title = event.tags.find((tag) => tag[0] === 'title')?.[1];
const image = event.tags.find((tag) => tag[0] === 'image')?.[1];
const summary = event.tags.find((tag) => tag[0] === 'summary')?.[1];
let publishedAt: Date | string | number = event.tags.find(
(tag) => tag[0] === 'published_at'
)?.[1];
if (publishedAt) {
publishedAt = new Date(parseInt(publishedAt)).toLocaleDateString('en-US');
} else {
publishedAt = new Date(event.created_at * 1000).toLocaleDateString('en-US');
}
return {
title,
image,
publishedAt,
summary,
};
}, [event.id]);
return (
<div className="mb-2 mt-3 rounded-lg bg-white/10">
<div className="flex flex-col rounded-lg">
<Image
src={metadata.image}
alt={metadata.title}
className="h-44 w-full rounded-t-lg object-cover"
/>
<div className="flex flex-col gap-2 px-3 py-3">
<h5 className="line-clamp-1 font-medium leading-none text-white">
{metadata.title}
</h5>
<p className="line-clamp-3 break-all text-sm text-white/50">
{metadata.summary}
</p>
<span className="mt-2.5 text-sm leading-none text-white/50">
{metadata.publishedAt.toString()}
</span>
</div>
</div>
</div>
);
}

3
src/shared/notes/kinds/kind1063.tsx → src/shared/notes/kinds/file.tsx
View File

@@ -6,7 +6,7 @@ import { User } from '@shared/user';
import { isImage } from '@utils/isImage';
export function NoteKind_1063({ event }: { event: NDKEvent }) {
export function FileNote({ event }: { event: NDKEvent }) {
const url = event.tags.find((el) => el[0] === 'url')[1];
return (
@@ -20,7 +20,6 @@ export function NoteKind_1063({ event }: { event: NDKEvent }) {
{isImage(url) && (
<Image
src={url}
fallback="https://void.cat/d/XTmrMkpid8DGLjv1AzdvcW"
alt="image"
className="h-auto w-full rounded-lg object-cover"
/>

39
src/shared/notes/kinds/kind1.tsx
View File

@@ -1,39 +0,0 @@
import { NDKEvent } from '@nostr-dev-kit/ndk';
import { useMemo } from 'react';
import { NoteActions, NoteContent, NoteMetadata } from '@shared/notes';
import { User } from '@shared/user';
import { parser } from '@utils/parser';
export function NoteKind_1({
event,
skipMetadata = false,
}: {
event: NDKEvent;
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 bg-white/10 px-3 pt-3">
<div className="relative flex flex-col">
<User pubkey={event.pubkey} time={event.created_at} />
<div className="-mt-6 flex items-start gap-3">
<div className="w-11 shrink-0" />
<div className="relative z-20 flex-1">
<NoteContent content={content} />
<NoteActions id={event.id || event.id} pubkey={event.pubkey} />
</div>
</div>
{!skipMetadata ? (
<NoteMetadata id={event.id || event.id} />
) : (
<div className="pb-3" />
)}
</div>
</div>
</div>
);
}

30
src/shared/notes/kinds/repost.tsx
View File

@@ -1,11 +1,14 @@
import { NDKEvent } from '@nostr-dev-kit/ndk';
import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
import {
ArticleNote,
FileNote,
NoteActions,
NoteContent,
NoteMetadata,
NoteSkeleton,
RepostUser,
TextNote,
UnknownNote,
} from '@shared/notes';
import { User } from '@shared/user';
@@ -40,23 +43,32 @@ export function Repost({ event }: { event: NDKEvent }) {
);
}
const renderKind = (event: NDKEvent) => {
switch (event.kind) {
case NDKKind.Text:
return <TextNote event={event} />;
case NDKKind.Article:
return <ArticleNote event={event} />;
case 1063:
return <FileNote event={event} />;
default:
return <UnknownNote event={event} />;
}
};
return (
<div className="h-min w-full px-3 py-1.5">
<div className="relative overflow-hidden rounded-xl bg-white/10 px-3 pt-3">
<div className="relative flex flex-col">
<div className="isolate flex flex-col -space-y-4">
<RepostUser pubkey={event.pubkey} />
<User
pubkey={data.event.pubkey}
time={data.event.created_at}
isRepost={true}
/>
<User pubkey={data.pubkey} time={data.created_at} isRepost={true} />
</div>
<div className="flex items-start gap-3">
<div className="w-11 shrink-0" />
<div className="relative z-20 flex-1">
<NoteContent content={data.richContent} />
<NoteActions id={repostID} pubkey={data.event.pubkey} />
{renderKind(data)}
<NoteActions id={repostID} pubkey={data.pubkey} />
</div>
</div>
<NoteMetadata id={repostID} />

43
src/shared/notes/kinds/text.tsx Normal file
View File

@@ -0,0 +1,43 @@
import { NDKEvent } from '@nostr-dev-kit/ndk';
import { useMemo } from 'react';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import {
Hashtag,
ImagePreview,
LinkPreview,
MentionNote,
MentionUser,
VideoPreview,
} from '@shared/notes';
import { parser } from '@utils/parser';
export function TextNote({ event }: { event: NDKEvent }) {
const content = useMemo(() => parser(event), [event.id]);
return (
<div>
<ReactMarkdown
className="markdown"
remarkPlugins={[remarkGfm]}
components={{
del: ({ children }) => {
const key = children[0] as string;
if (key.startsWith('pub') && key.length > 50 && key.length < 100)
return <MentionUser pubkey={key.replace('pub-', '')} />;
if (key.startsWith('tag')) return <Hashtag tag={key.replace('tag-', '')} />;
},
}}
>
{content?.parsed}
</ReactMarkdown>
{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} />)}
</div>
);
}

19
src/shared/notes/kinds/unknown.tsx Normal file
View File

@@ -0,0 +1,19 @@
import { NDKEvent } from '@nostr-dev-kit/ndk';
export function UnknownNote({ event }: { event: NDKEvent }) {
return (
<div className="mb-3 mt-3 flex w-full flex-col gap-2">
<div className="inline-flex flex-col gap-1 rounded-md bg-white/10 px-2 py-2">
<span className="text-sm font-medium leading-none text-white/50">
Unknown kind: {event.kind}
</span>
<p className="text-sm leading-none text-white">
Lume isn&apos;t fully support this kind
</p>
</div>
<div className="select-text whitespace-pre-line break-all text-white">
<p>{event.content.toString()}</p>
</div>
</div>
);
}

36
src/shared/notes/kinds/unsupport.tsx
View File

@@ -1,36 +0,0 @@
import { NDKEvent } from '@nostr-dev-kit/ndk';
import { NoteActions, NoteMetadata } from '@shared/notes';
import { User } from '@shared/user';
export function NoteKindUnsupport({ event }: { event: NDKEvent }) {
return (
<div className="h-min w-full px-3 py-1.5">
<div className="relative overflow-hidden rounded-xl bg-white/10 px-3 pt-3">
<div className="flex flex-col">
<User pubkey={event.pubkey} time={event.created_at} />
<div className="-mt-6 flex items-start gap-3">
<div className="w-11 shrink-0" />
<div className="relative z-20 flex-1">
<div className="mt-3 flex w-full flex-col gap-2">
<div className="inline-flex flex-col gap-1 rounded-md bg-white/10 px-2 py-2">
<span className="text-sm font-medium leading-none text-white/50">
Kind: {event.kind}
</span>
<p className="text-sm leading-none text-white">
Lume isn&apos;t fully support this kind
</p>
</div>
<div className="select-text whitespace-pre-line break-all text-white">
<p>{event.content.toString()}</p>
</div>
</div>
<NoteActions id={event.id} pubkey={event.pubkey} />
</div>
</div>
<NoteMetadata id={event.id} />
</div>
</div>
</div>
);
}

85
src/shared/notes/mentions/note.tsx
View File

@@ -1,21 +1,24 @@
import { memo, useCallback } from 'react';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
import { memo } from 'react';
import { useStorage } from '@libs/storage/provider';
import { Image } from '@shared/image';
import { MentionUser, NoteSkeleton } from '@shared/notes';
import {
ArticleNote,
FileNote,
NoteSkeleton,
TextNote,
UnknownNote,
} from '@shared/notes';
import { User } from '@shared/user';
import { WidgetKinds, useWidgets } from '@stores/widgets';
import { useEvent } from '@utils/hooks/useEvent';
import { isImage } from '@utils/isImage';
export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
const { db } = useStorage();
const { status, data, error } = useEvent(id);
const { status, data } = useEvent(id);
const setWidget = useWidgets((state) => state.setWidget);
@@ -28,55 +31,6 @@ export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
}
};
const renderItem = useCallback(() => {
if (!data) return;
switch (data.event.kind) {
case 1: {
return (
<ReactMarkdown
className="markdown"
remarkPlugins={[remarkGfm]}
components={{
del: ({ children }) => {
const key = children[0] as string;
if (key.startsWith('pub')) return <MentionUser pubkey={key.slice(3)} />;
if (key.startsWith('tag'))
return (
<button
type="button"
className="font-normal text-orange-400 no-underline hover:text-orange-500"
>
{key.slice(3)}
</button>
);
},
}}
>
{data.richContent.parsed.length > 160
? data.richContent.parsed.substring(0, 160) + '...'
: data.richContent.parsed}
</ReactMarkdown>
);
}
case 1063: {
const url = data.event.tags.find((el) => el[0] === 'url')[1];
return (
<div>
{isImage(url) && (
<Image
src={url}
alt="image"
className="h-auto w-full rounded-lg object-cover"
/>
)}
</div>
);
}
default:
break;
}
}, [data]);
if (status === 'loading') {
return (
<div className="mb-2 mt-3 cursor-default rounded-lg bg-white/10 px-3 py-3">
@@ -85,7 +39,7 @@ export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
);
}
if (error) {
if (status === 'error') {
return (
<div className="mb-2 mt-3 cursor-default rounded-lg bg-white/10 px-3 py-3">
<p>Can&apos;t get event from relay</p>
@@ -93,6 +47,19 @@ export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
);
}
const renderKind = (event: NDKEvent) => {
switch (event.kind) {
case NDKKind.Text:
return <TextNote event={event} />;
case NDKKind.Article:
return <ArticleNote event={event} />;
case 1063:
return <FileNote event={event} />;
default:
return <UnknownNote event={event} />;
}
};
return (
<div
onClick={(e) => openThread(e, id)}
@@ -101,8 +68,8 @@ export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
tabIndex={0}
className="mb-2 mt-3 cursor-default rounded-lg bg-white/10 px-3 py-3"
>
<User pubkey={data.event.pubkey} time={data.event.created_at} size="small" />
<div className="mt-2">{renderItem()}</div>
<User pubkey={data.pubkey} time={data.created_at} size="small" />
<div>{renderKind(data)}</div>
</div>
);
});

4
src/shared/notes/replies/form.tsx
View File

@@ -3,8 +3,6 @@ import { useState } from 'react';
import { Button } from '@shared/button';
import { Image } from '@shared/image';
import { FULL_RELAYS } from '@stores/constants';
import { useNostr } from '@utils/hooks/useNostr';
import { useProfile } from '@utils/hooks/useProfile';
import { displayNpub } from '@utils/shortenKey';
@@ -16,7 +14,7 @@ export function NoteReplyForm({ id, pubkey }: { id: string; pubkey: string }) {
const [value, setValue] = useState('');
const submit = () => {
const tags = [['e', id, FULL_RELAYS[0], 'reply']];
const tags = [['e', id, '', 'reply']];
// publish event
publish({ content: value, kind: 1, tags });

4
src/shared/notes/replies/item.tsx
View File

@@ -4,9 +4,9 @@ import { NoteActions, NoteContent, SubReply } from '@shared/notes';
import { User } from '@shared/user';
import { parser } from '@utils/parser';
import { LumeEvent } from '@utils/types';
import { NDKEventWithReplies } from '@utils/types';
export function Reply({ event, root }: { event: LumeEvent; root?: string }) {
export function Reply({ event, root }: { event: NDKEventWithReplies; root?: string }) {
const content = useMemo(() => parser(event), [event]);
return (

13
src/shared/notes/replies/list.tsx
View File

@@ -1,23 +1,20 @@
import { NDKEvent } from '@nostr-dev-kit/ndk';
import { useQuery } from '@tanstack/react-query';
import { useNDK } from '@libs/ndk/provider';
import { NoteSkeleton, Reply } from '@shared/notes';
interface ReplyEvent extends NDKEvent {
replies: Array<NDKEvent>;
}
import { NDKEventWithReplies } from '@utils/types';
export function RepliesList({ id }: { id: string }) {
const { ndk } = useNDK();
const { status, data } = useQuery(['thread', id], async () => {
const { status, data } = useQuery(['note-replies', id], async () => {
const events = await ndk.fetchEvents({
kinds: [1],
'#e': [id],
});
const array = [...events] as unknown as ReplyEvent[];
const array = [...events] as unknown as NDKEventWithReplies[];
if (array.length > 0) {
const replies = new Set();
@@ -74,7 +71,9 @@ export function RepliesList({ id }: { id: string }) {
) : (
data
.reverse()
.map((event: NDKEvent) => <Reply key={event.id} event={event} root={id} />)
.map((event: NDKEventWithReplies) => (
<Reply key={event.id} event={event} root={id} />
))
)}
</div>
</div>

4
src/shared/notes/replies/sub.tsx
View File

@@ -1,12 +1,12 @@
import { NDKEvent } from '@nostr-dev-kit/ndk';
import { useMemo } from 'react';
import { NoteActions, NoteContent } from '@shared/notes';
import { User } from '@shared/user';
import { parser } from '@utils/parser';
import { LumeEvent } from '@utils/types';
export function SubReply({ event }: { event: LumeEvent }) {
export function SubReply({ event }: { event: NDKEvent }) {
const content = useMemo(() => parser(event), [event]);
return (

29
src/shared/notes/kinds/thread.tsx → src/shared/notes/wrapper.tsx
View File

@@ -1,37 +1,38 @@
import { NDKEvent } from '@nostr-dev-kit/ndk';
import { useMemo } from 'react';
import { ReactNode } from 'react';
import { NoteActions, NoteContent, NoteMetadata, SubNote } from '@shared/notes';
import { ChildNote, NoteActions, NoteMetadata } from '@shared/notes';
import { User } from '@shared/user';
import { parser } from '@utils/parser';
export function NoteThread({
export function NoteWrapper({
event,
children,
meta = true,
root,
reply,
}: {
event: NDKEvent;
root: string;
reply: string;
children: ReactNode;
repost?: boolean;
meta?: boolean;
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 bg-white/10 px-3 pt-3">
<div className="relative">{root && <SubNote id={root} />}</div>
<div className="relative">{reply && <SubNote id={reply} root={root} />}</div>
<div className="relative overflow-hidden rounded-xl bg-white/10 px-3 pt-3">
<div className="relative">{root && <ChildNote id={root} />}</div>
<div className="relative">{reply && <ChildNote id={reply} root={root} />}</div>
<div className="relative flex flex-col">
<User pubkey={event.pubkey} time={event.created_at} />
<div className="-mt-6 flex items-start gap-3">
<div className="w-11 shrink-0" />
<div className="relative z-20 flex-1">
<NoteContent content={content} />
{children}
<NoteActions id={event.id} pubkey={event.pubkey} />
</div>
</div>
<NoteMetadata id={event.id} />
{meta ? <NoteMetadata id={event.id} /> : <div className="pb-3" />}
</div>
</div>
</div>

23
src/utils/hooks/useEvent.tsx
View File

@@ -4,39 +4,26 @@ import { useQuery } from '@tanstack/react-query';
import { useNDK } from '@libs/ndk/provider';
import { useStorage } from '@libs/storage/provider';
import { parser } from '@utils/parser';
import { RichContent } from '@utils/types';
export function useEvent(id: string, embed?: string) {
const { db } = useStorage();
const { ndk } = useNDK();
const { status, data, error } = useQuery(
const { status, data } = useQuery(
['event', id],
async () => {
let richContent: RichContent;
// return embed event (nostr.band api)
if (embed) {
const event: NDKEvent = JSON.parse(embed);
if (event.kind === 1) richContent = parser(event);
return { event: event, richContent: richContent };
return event;
}
// get event from db
const dbEvent = await db.getEventByID(id);
if (dbEvent) {
if (dbEvent.kind === 1) richContent = parser(dbEvent);
return { event: dbEvent, richContent: richContent };
return dbEvent;
} else {
// get event from relay if event in db not present
const event = await ndk.fetchEvent(id);
if (!event) throw new Error(`Event not found: ${id}`);
if (event.kind === 1) {
richContent = parser(event);
}
return { event: event, richContent: richContent };
return event;
}
},
{
@@ -48,5 +35,5 @@ export function useEvent(id: string, embed?: string) {
}
);
return { status, data, error };
return { status, data };
}

4
src/utils/types.d.ts vendored
View File

@@ -74,3 +74,7 @@ export interface Opengraph {
description?: string;
image?: string;
}
export interface NDKEventWithReplies extends NDKEvent {
replies: Array<NDKEvent>;
}