refactor all widgets
This commit is contained in:
@@ -1,58 +1,70 @@
|
||||
import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { useCallback } from 'react';
|
||||
import { useInfiniteQuery } from '@tanstack/react-query';
|
||||
import { useMemo } from 'react';
|
||||
import { VList } from 'virtua';
|
||||
|
||||
import { useNDK } from '@libs/ndk/provider';
|
||||
|
||||
import { LoaderIcon } from '@shared/icons';
|
||||
import { ArrowRightCircleIcon, LoaderIcon } from '@shared/icons';
|
||||
import { ArticleNote, NoteWrapper } from '@shared/notes';
|
||||
import { TitleBar } from '@shared/titleBar';
|
||||
import { WidgetWrapper } from '@shared/widgets';
|
||||
|
||||
import { FETCH_LIMIT } from '@stores/constants';
|
||||
|
||||
import { Widget } from '@utils/types';
|
||||
|
||||
export function GlobalArticlesWidget({ params }: { params: Widget }) {
|
||||
const { ndk } = useNDK();
|
||||
const { status, data } = useQuery({
|
||||
queryKey: ['global-articles'],
|
||||
queryFn: async () => {
|
||||
const events = await ndk.fetchEvents({
|
||||
kinds: [NDKKind.Article],
|
||||
limit: 200,
|
||||
});
|
||||
const sortedEvents = [...events].sort((x, y) => y.created_at - x.created_at);
|
||||
return sortedEvents;
|
||||
},
|
||||
refetchOnWindowFocus: false,
|
||||
});
|
||||
const { ndk, relayUrls, fetcher } = useNDK();
|
||||
const { status, data, hasNextPage, isFetchingNextPage, fetchNextPage } =
|
||||
useInfiniteQuery({
|
||||
queryKey: ['global-articles'],
|
||||
initialPageParam: 0,
|
||||
queryFn: async ({
|
||||
signal,
|
||||
pageParam,
|
||||
}: {
|
||||
signal: AbortSignal;
|
||||
pageParam: number;
|
||||
}) => {
|
||||
const events = await fetcher.fetchLatestEvents(
|
||||
relayUrls,
|
||||
{
|
||||
kinds: [NDKKind.Article],
|
||||
},
|
||||
FETCH_LIMIT,
|
||||
{ asOf: pageParam === 0 ? undefined : pageParam, abortSignal: signal }
|
||||
);
|
||||
|
||||
// render event match event kind
|
||||
const renderItem = useCallback(
|
||||
(event: NDKEvent) => {
|
||||
return (
|
||||
<NoteWrapper key={event.id} event={event}>
|
||||
<ArticleNote />
|
||||
</NoteWrapper>
|
||||
);
|
||||
},
|
||||
const ndkEvents = events.map((event) => {
|
||||
return new NDKEvent(ndk, event);
|
||||
});
|
||||
|
||||
return ndkEvents.sort((a, b) => b.created_at - a.created_at);
|
||||
},
|
||||
getNextPageParam: (lastPage) => {
|
||||
const lastEvent = lastPage.at(-1);
|
||||
if (!lastEvent) return;
|
||||
return lastEvent.created_at - 1;
|
||||
},
|
||||
refetchOnWindowFocus: false,
|
||||
refetchOnReconnect: false,
|
||||
});
|
||||
|
||||
const allEvents = useMemo(
|
||||
() => (data ? data.pages.flatMap((page) => page) : []),
|
||||
[data]
|
||||
);
|
||||
|
||||
return (
|
||||
<WidgetWrapper>
|
||||
<TitleBar id={params.id} title={params.title} />
|
||||
<div className="flex-1">
|
||||
<VList className="flex-1">
|
||||
{status === 'pending' ? (
|
||||
<div className="flex h-full w-full items-center justify-center ">
|
||||
<div className="inline-flex flex-col items-center justify-center gap-2">
|
||||
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />
|
||||
<p className="text-sm font-medium text-neutral-500 dark:text-neutral-400">
|
||||
Loading article...
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex h-full w-full items-center justify-center">
|
||||
<LoaderIcon className="h-5 w-5 animate-spin" />
|
||||
</div>
|
||||
) : data.length === 0 ? (
|
||||
) : allEvents.length === 0 ? (
|
||||
<div className="flex h-full w-full flex-col items-center justify-center px-3">
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
|
||||
@@ -67,12 +79,32 @@ export function GlobalArticlesWidget({ params }: { params: Widget }) {
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<VList className="h-full" style={{ contentVisibility: 'auto' }}>
|
||||
{data.map((item) => renderItem(item))}
|
||||
<div className="h-14" />
|
||||
</VList>
|
||||
allEvents.map((item) => (
|
||||
<NoteWrapper key={item.id} event={item}>
|
||||
<ArticleNote />
|
||||
</NoteWrapper>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
<div className="flex h-16 items-center justify-center px-3 pb-3">
|
||||
{hasNextPage ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => fetchNextPage()}
|
||||
disabled={!hasNextPage || isFetchingNextPage}
|
||||
className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-blue-500 px-6 font-medium text-white hover:bg-blue-600 focus:outline-none"
|
||||
>
|
||||
{isFetchingNextPage ? (
|
||||
<LoaderIcon className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<>
|
||||
<ArrowRightCircleIcon className="h-5 w-5" />
|
||||
Load more
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
</VList>
|
||||
</WidgetWrapper>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,66 +1,76 @@
|
||||
import { NDKEvent } from '@nostr-dev-kit/ndk';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { useCallback } from 'react';
|
||||
import { useInfiniteQuery } from '@tanstack/react-query';
|
||||
import { useMemo } from 'react';
|
||||
import { VList } from 'virtua';
|
||||
|
||||
import { useNDK } from '@libs/ndk/provider';
|
||||
|
||||
import { LoaderIcon } from '@shared/icons';
|
||||
import { ArrowRightCircleIcon, LoaderIcon } from '@shared/icons';
|
||||
import { FileNote, NoteWrapper } from '@shared/notes';
|
||||
import { TitleBar } from '@shared/titleBar';
|
||||
import { WidgetWrapper } from '@shared/widgets';
|
||||
|
||||
import { nHoursAgo } from '@utils/date';
|
||||
import { FETCH_LIMIT } from '@stores/constants';
|
||||
|
||||
import { Widget } from '@utils/types';
|
||||
|
||||
export function GlobalFilesWidget({ params }: { params: Widget }) {
|
||||
const { ndk } = useNDK();
|
||||
const { status, data } = useQuery({
|
||||
queryKey: ['global-file-sharing'],
|
||||
queryFn: async () => {
|
||||
const events = await ndk.fetchEvents({
|
||||
// @ts-expect-error, NDK not support file metadata yet
|
||||
kinds: [1063],
|
||||
since: nHoursAgo(24),
|
||||
});
|
||||
const sortedEvents = [...events].sort((x, y) => y.created_at - x.created_at);
|
||||
return sortedEvents;
|
||||
},
|
||||
refetchOnWindowFocus: false,
|
||||
});
|
||||
const { ndk, relayUrls, fetcher } = useNDK();
|
||||
const { status, data, hasNextPage, isFetchingNextPage, fetchNextPage } =
|
||||
useInfiniteQuery({
|
||||
queryKey: ['global-files'],
|
||||
initialPageParam: 0,
|
||||
queryFn: async ({
|
||||
signal,
|
||||
pageParam,
|
||||
}: {
|
||||
signal: AbortSignal;
|
||||
pageParam: number;
|
||||
}) => {
|
||||
const events = await fetcher.fetchLatestEvents(
|
||||
relayUrls,
|
||||
{
|
||||
kinds: [1063],
|
||||
},
|
||||
FETCH_LIMIT,
|
||||
{ asOf: pageParam === 0 ? undefined : pageParam, abortSignal: signal }
|
||||
);
|
||||
|
||||
// render event match event kind
|
||||
const renderItem = useCallback(
|
||||
(event: NDKEvent) => {
|
||||
return (
|
||||
<NoteWrapper key={event.id} event={event}>
|
||||
<FileNote />
|
||||
</NoteWrapper>
|
||||
);
|
||||
},
|
||||
const ndkEvents = events.map((event) => {
|
||||
return new NDKEvent(ndk, event);
|
||||
});
|
||||
|
||||
return ndkEvents.sort((a, b) => b.created_at - a.created_at);
|
||||
},
|
||||
getNextPageParam: (lastPage) => {
|
||||
const lastEvent = lastPage.at(-1);
|
||||
if (!lastEvent) return;
|
||||
return lastEvent.created_at - 1;
|
||||
},
|
||||
refetchOnWindowFocus: false,
|
||||
refetchOnReconnect: false,
|
||||
});
|
||||
|
||||
const allEvents = useMemo(
|
||||
() => (data ? data.pages.flatMap((page) => page) : []),
|
||||
[data]
|
||||
);
|
||||
|
||||
return (
|
||||
<WidgetWrapper>
|
||||
<TitleBar id={params.id} title={params.title} />
|
||||
<div className="flex-1">
|
||||
<VList className="flex-1">
|
||||
{status === 'pending' ? (
|
||||
<div className="flex h-full w-full items-center justify-center ">
|
||||
<div className="inline-flex flex-col items-center justify-center gap-2">
|
||||
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />
|
||||
<p className="text-sm font-medium text-neutral-500 dark:text-neutral-400">
|
||||
Loading file sharing event...
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex h-full w-full items-center justify-center">
|
||||
<LoaderIcon className="h-5 w-5 animate-spin" />
|
||||
</div>
|
||||
) : data.length === 0 ? (
|
||||
) : allEvents.length === 0 ? (
|
||||
<div className="flex h-full w-full flex-col items-center justify-center px-3">
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
|
||||
<div className="text-center">
|
||||
<h3 className="font-semibold leading-tight text-neutral-900 dark:text-neutral-100">
|
||||
Oops, it looks like there are no file sharing events.
|
||||
Oops, it looks like there are no files.
|
||||
</h3>
|
||||
<p className="text-neutral-500 dark:text-neutral-400">
|
||||
You can close this widget
|
||||
@@ -69,12 +79,32 @@ export function GlobalFilesWidget({ params }: { params: Widget }) {
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<VList className="h-full" style={{ contentVisibility: 'auto' }}>
|
||||
{data.map((item) => renderItem(item))}
|
||||
<div className="h-14" />
|
||||
</VList>
|
||||
allEvents.map((item) => (
|
||||
<NoteWrapper key={item.id} event={item}>
|
||||
<FileNote />
|
||||
</NoteWrapper>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
<div className="flex h-16 items-center justify-center px-3 pb-3">
|
||||
{hasNextPage ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => fetchNextPage()}
|
||||
disabled={!hasNextPage || isFetchingNextPage}
|
||||
className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-blue-500 px-6 font-medium text-white hover:bg-blue-600 focus:outline-none"
|
||||
>
|
||||
{isFetchingNextPage ? (
|
||||
<LoaderIcon className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<>
|
||||
<ArrowRightCircleIcon className="h-5 w-5" />
|
||||
Load more
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
</VList>
|
||||
</WidgetWrapper>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { useCallback } from 'react';
|
||||
import { useInfiniteQuery } from '@tanstack/react-query';
|
||||
import { useCallback, useMemo } from 'react';
|
||||
import { VList } from 'virtua';
|
||||
|
||||
import { useNDK } from '@libs/ndk/provider';
|
||||
|
||||
import { LoaderIcon } from '@shared/icons';
|
||||
import { ArrowRightCircleIcon, LoaderIcon } from '@shared/icons';
|
||||
import {
|
||||
ArticleNote,
|
||||
FileNote,
|
||||
@@ -17,74 +17,94 @@ import {
|
||||
import { TitleBar } from '@shared/titleBar';
|
||||
import { WidgetWrapper } from '@shared/widgets';
|
||||
|
||||
import { nHoursAgo } from '@utils/date';
|
||||
import { FETCH_LIMIT } from '@stores/constants';
|
||||
|
||||
import { Widget } from '@utils/types';
|
||||
|
||||
export function GlobalHashtagWidget({ params }: { params: Widget }) {
|
||||
const { ndk } = useNDK();
|
||||
const { status, data } = useQuery({
|
||||
queryKey: ['hashtag-' + params.title],
|
||||
queryFn: async () => {
|
||||
const events = await ndk.fetchEvents({
|
||||
kinds: [NDKKind.Text, NDKKind.Repost, NDKKind.Article],
|
||||
'#t': [params.content],
|
||||
since: nHoursAgo(24),
|
||||
});
|
||||
const sortedEvents = [...events].sort((x, y) => y.created_at - x.created_at);
|
||||
return sortedEvents;
|
||||
},
|
||||
refetchOnWindowFocus: false,
|
||||
});
|
||||
const { ndk, relayUrls, fetcher } = useNDK();
|
||||
const { status, data, hasNextPage, isFetchingNextPage, fetchNextPage } =
|
||||
useInfiniteQuery({
|
||||
queryKey: ['hashtag-' + params.title],
|
||||
initialPageParam: 0,
|
||||
queryFn: async ({
|
||||
signal,
|
||||
pageParam,
|
||||
}: {
|
||||
signal: AbortSignal;
|
||||
pageParam: number;
|
||||
}) => {
|
||||
const events = await fetcher.fetchLatestEvents(
|
||||
relayUrls,
|
||||
{
|
||||
kinds: [NDKKind.Text, NDKKind.Repost, 1063, NDKKind.Article],
|
||||
'#t': [params.content],
|
||||
},
|
||||
FETCH_LIMIT,
|
||||
{ asOf: pageParam === 0 ? undefined : pageParam, abortSignal: signal }
|
||||
);
|
||||
|
||||
// render event match event kind
|
||||
const renderItem = useCallback(
|
||||
(event: NDKEvent) => {
|
||||
switch (event.kind) {
|
||||
case NDKKind.Text:
|
||||
return (
|
||||
<NoteWrapper key={event.id} event={event}>
|
||||
<TextNote />
|
||||
</NoteWrapper>
|
||||
);
|
||||
case NDKKind.Repost:
|
||||
return <Repost key={event.id} event={event} />;
|
||||
case 1063:
|
||||
return (
|
||||
<NoteWrapper key={event.id} event={event}>
|
||||
<FileNote />
|
||||
</NoteWrapper>
|
||||
);
|
||||
case NDKKind.Article:
|
||||
return (
|
||||
<NoteWrapper key={event.id} event={event}>
|
||||
<ArticleNote />
|
||||
</NoteWrapper>
|
||||
);
|
||||
default:
|
||||
return (
|
||||
<NoteWrapper key={event.id} event={event}>
|
||||
<UnknownNote />
|
||||
</NoteWrapper>
|
||||
);
|
||||
}
|
||||
},
|
||||
const ndkEvents = events.map((event) => {
|
||||
return new NDKEvent(ndk, event);
|
||||
});
|
||||
|
||||
return ndkEvents.sort((a, b) => b.created_at - a.created_at);
|
||||
},
|
||||
getNextPageParam: (lastPage) => {
|
||||
const lastEvent = lastPage.at(-1);
|
||||
if (!lastEvent) return;
|
||||
return lastEvent.created_at - 1;
|
||||
},
|
||||
refetchOnWindowFocus: false,
|
||||
refetchOnReconnect: false,
|
||||
});
|
||||
|
||||
const allEvents = useMemo(
|
||||
() => (data ? data.pages.flatMap((page) => page) : []),
|
||||
[data]
|
||||
);
|
||||
|
||||
// render event match event kind
|
||||
const renderItem = useCallback((event: NDKEvent) => {
|
||||
switch (event.kind) {
|
||||
case NDKKind.Text:
|
||||
return (
|
||||
<NoteWrapper key={event.id} event={event}>
|
||||
<TextNote />
|
||||
</NoteWrapper>
|
||||
);
|
||||
case NDKKind.Repost:
|
||||
return <Repost key={event.id} event={event} />;
|
||||
case 1063:
|
||||
return (
|
||||
<NoteWrapper key={event.id} event={event}>
|
||||
<FileNote />
|
||||
</NoteWrapper>
|
||||
);
|
||||
case NDKKind.Article:
|
||||
return (
|
||||
<NoteWrapper key={event.id} event={event}>
|
||||
<ArticleNote />
|
||||
</NoteWrapper>
|
||||
);
|
||||
default:
|
||||
return (
|
||||
<NoteWrapper key={event.id} event={event}>
|
||||
<UnknownNote />
|
||||
</NoteWrapper>
|
||||
);
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<WidgetWrapper>
|
||||
<TitleBar id={params.id} title={params.title} />
|
||||
<div className="flex-1">
|
||||
<VList className="flex-1">
|
||||
{status === 'pending' ? (
|
||||
<div className="flex h-full w-full items-center justify-center">
|
||||
<div className="inline-flex flex-col items-center justify-center gap-2">
|
||||
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />
|
||||
<p className="text-sm font-medium text-neutral-500 dark:text-neutral-400">
|
||||
Loading event related to the hashtag {params.title}...
|
||||
</p>
|
||||
</div>
|
||||
<LoaderIcon className="h-5 w-5 animate-spin" />
|
||||
</div>
|
||||
) : data.length === 0 ? (
|
||||
) : allEvents.length === 0 ? (
|
||||
<div className="flex h-full w-full flex-col items-center justify-center px-3">
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
|
||||
@@ -93,18 +113,34 @@ export function GlobalHashtagWidget({ params }: { params: Widget }) {
|
||||
Oops, it looks like there are no events related to {params.title}.
|
||||
</h3>
|
||||
<p className="text-neutral-500 dark:text-neutral-400">
|
||||
You can close this widget or try with other hashtag
|
||||
You can close this widget
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<VList className="h-full" style={{ contentVisibility: 'auto' }}>
|
||||
{data.map((item) => renderItem(item))}
|
||||
<div className="h-16" />
|
||||
</VList>
|
||||
allEvents.map((item) => renderItem(item))
|
||||
)}
|
||||
</div>
|
||||
<div className="flex h-16 items-center justify-center px-3 pb-3">
|
||||
{hasNextPage ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => fetchNextPage()}
|
||||
disabled={!hasNextPage || isFetchingNextPage}
|
||||
className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-blue-500 px-6 font-medium text-white hover:bg-blue-600 focus:outline-none"
|
||||
>
|
||||
{isFetchingNextPage ? (
|
||||
<LoaderIcon className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<>
|
||||
<ArrowRightCircleIcon className="h-5 w-5" />
|
||||
Load more
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
</VList>
|
||||
</WidgetWrapper>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,11 +1,9 @@
|
||||
export * from './wrapper';
|
||||
export * from './local/feeds';
|
||||
export * from './local/network';
|
||||
export * from './local/user';
|
||||
export * from './local/thread';
|
||||
export * from './local/files';
|
||||
export * from './local/articles';
|
||||
export * from './local/follows';
|
||||
export * from './global/articles';
|
||||
export * from './global/files';
|
||||
export * from './global/hashtag';
|
||||
@@ -13,7 +11,5 @@ export * from './nostrBand/trendingNotes';
|
||||
export * from './nostrBand/trendingAccounts';
|
||||
export * from './tmp/feeds';
|
||||
export * from './tmp/hashtag';
|
||||
export * from './other/learnNostr';
|
||||
export * from './eventLoader';
|
||||
export * from './newsfeed';
|
||||
export * from './notification';
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
|
||||
import { useInfiniteQuery } from '@tanstack/react-query';
|
||||
import { useCallback, useMemo } from 'react';
|
||||
import { useMemo } from 'react';
|
||||
import { VList } from 'virtua';
|
||||
|
||||
import { useNDK } from '@libs/ndk/provider';
|
||||
import { useStorage } from '@libs/storage/provider';
|
||||
|
||||
import { ArrowRightCircleIcon, LoaderIcon } from '@shared/icons';
|
||||
@@ -10,52 +11,63 @@ import { ArticleNote, NoteWrapper } from '@shared/notes';
|
||||
import { TitleBar } from '@shared/titleBar';
|
||||
import { WidgetWrapper } from '@shared/widgets';
|
||||
|
||||
import { DBEvent, Widget } from '@utils/types';
|
||||
import { FETCH_LIMIT } from '@stores/constants';
|
||||
|
||||
import { Widget } from '@utils/types';
|
||||
|
||||
export function LocalArticlesWidget({ params }: { params: Widget }) {
|
||||
const { db } = useStorage();
|
||||
const { ndk, relayUrls, fetcher } = useNDK();
|
||||
const { status, data, hasNextPage, isFetchingNextPage, fetchNextPage } =
|
||||
useInfiniteQuery({
|
||||
queryKey: ['local-articles'],
|
||||
initialPageParam: 0,
|
||||
queryFn: async ({ pageParam = 0 }) => {
|
||||
return await db.getAllEventsByKinds([NDKKind.Article], 20, pageParam);
|
||||
queryFn: async ({
|
||||
signal,
|
||||
pageParam,
|
||||
}: {
|
||||
signal: AbortSignal;
|
||||
pageParam: number;
|
||||
}) => {
|
||||
const events = await fetcher.fetchLatestEvents(
|
||||
relayUrls,
|
||||
{
|
||||
kinds: [NDKKind.Article],
|
||||
authors: db.account.circles,
|
||||
},
|
||||
FETCH_LIMIT,
|
||||
{ asOf: pageParam === 0 ? undefined : pageParam, abortSignal: signal }
|
||||
);
|
||||
|
||||
const ndkEvents = events.map((event) => {
|
||||
return new NDKEvent(ndk, event);
|
||||
});
|
||||
|
||||
return ndkEvents.sort((a, b) => b.created_at - a.created_at);
|
||||
},
|
||||
getNextPageParam: (lastPage) => lastPage.nextCursor,
|
||||
getNextPageParam: (lastPage) => {
|
||||
const lastEvent = lastPage.at(-1);
|
||||
if (!lastEvent) return;
|
||||
return lastEvent.created_at - 1;
|
||||
},
|
||||
refetchOnWindowFocus: false,
|
||||
refetchOnReconnect: false,
|
||||
});
|
||||
|
||||
const dbEvents = useMemo(
|
||||
() => (data ? data.pages.flatMap((d: { data: DBEvent[] }) => d.data) : []),
|
||||
[data]
|
||||
);
|
||||
|
||||
// render event match event kind
|
||||
const renderItem = useCallback(
|
||||
(dbEvent: DBEvent) => {
|
||||
const event: NDKEvent = JSON.parse(dbEvent.event as string);
|
||||
return (
|
||||
<NoteWrapper key={event.id} event={event}>
|
||||
<ArticleNote />
|
||||
</NoteWrapper>
|
||||
);
|
||||
},
|
||||
const allEvents = useMemo(
|
||||
() => (data ? data.pages.flatMap((page) => page) : []),
|
||||
[data]
|
||||
);
|
||||
|
||||
return (
|
||||
<WidgetWrapper>
|
||||
<TitleBar id={params.id} title={params.title} />
|
||||
<div className="flex-1">
|
||||
<VList className="flex-1">
|
||||
{status === 'pending' ? (
|
||||
<div className="flex h-full w-full items-center justify-center ">
|
||||
<div className="inline-flex flex-col items-center justify-center gap-2">
|
||||
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />
|
||||
<p className="text-sm font-medium text-neutral-500 dark:text-neutral-400">
|
||||
Loading article...
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex h-full w-full items-center justify-center">
|
||||
<LoaderIcon className="h-5 w-5 animate-spin" />
|
||||
</div>
|
||||
) : dbEvents.length === 0 ? (
|
||||
) : allEvents.length === 0 ? (
|
||||
<div className="flex h-full w-full flex-col items-center justify-center px-3">
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
|
||||
@@ -70,38 +82,32 @@ export function LocalArticlesWidget({ params }: { params: Widget }) {
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<VList className="h-full" style={{ contentVisibility: 'auto' }}>
|
||||
{dbEvents.map((item) => renderItem(item))}
|
||||
<div className="flex items-center justify-center px-3 py-1.5">
|
||||
{dbEvents.length > 0 ? (
|
||||
<button
|
||||
onClick={() => fetchNextPage()}
|
||||
disabled={!hasNextPage || isFetchingNextPage}
|
||||
className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-blue-500 px-6 font-medium text-white hover:bg-blue-600 focus:outline-none"
|
||||
>
|
||||
{isFetchingNextPage ? (
|
||||
<>
|
||||
<span>Loading...</span>
|
||||
<LoaderIcon className="h-5 w-5 animate-spin text-neutral-900 dark:text-neutral-100" />
|
||||
</>
|
||||
) : hasNextPage ? (
|
||||
<>
|
||||
<ArrowRightCircleIcon className="h-5 w-5 text-neutral-900 dark:text-neutral-100" />
|
||||
<span>Load more</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<ArrowRightCircleIcon className="h-5 w-5 text-neutral-900 dark:text-neutral-100" />
|
||||
<span>Nothing more to load</span>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="h-14" />
|
||||
</VList>
|
||||
allEvents.map((item) => (
|
||||
<NoteWrapper key={item.id} event={item}>
|
||||
<ArticleNote />
|
||||
</NoteWrapper>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
<div className="flex h-16 items-center justify-center px-3 pb-3">
|
||||
{hasNextPage ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => fetchNextPage()}
|
||||
disabled={!hasNextPage || isFetchingNextPage}
|
||||
className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-blue-500 px-6 font-medium text-white hover:bg-blue-600 focus:outline-none"
|
||||
>
|
||||
{isFetchingNextPage ? (
|
||||
<LoaderIcon className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<>
|
||||
<ArrowRightCircleIcon className="h-5 w-5" />
|
||||
Load more
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
</VList>
|
||||
</WidgetWrapper>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,141 +3,132 @@ import { useInfiniteQuery } from '@tanstack/react-query';
|
||||
import { useCallback, useMemo } from 'react';
|
||||
import { VList } from 'virtua';
|
||||
|
||||
import { useStorage } from '@libs/storage/provider';
|
||||
import { useNDK } from '@libs/ndk/provider';
|
||||
|
||||
import { ArrowRightCircleIcon, LoaderIcon } from '@shared/icons';
|
||||
import {
|
||||
ArticleNote,
|
||||
FileNote,
|
||||
MemoizedArticleNote,
|
||||
MemoizedFileNote,
|
||||
MemoizedRepost,
|
||||
MemoizedTextNote,
|
||||
NoteSkeleton,
|
||||
NoteWrapper,
|
||||
Repost,
|
||||
TextNote,
|
||||
UnknownNote,
|
||||
} from '@shared/notes';
|
||||
import { TitleBar } from '@shared/titleBar';
|
||||
import { WidgetWrapper } from '@shared/widgets';
|
||||
|
||||
import { DBEvent, Widget } from '@utils/types';
|
||||
import { FETCH_LIMIT } from '@stores/constants';
|
||||
|
||||
import { Widget } from '@utils/types';
|
||||
|
||||
export function LocalFeedsWidget({ params }: { params: Widget }) {
|
||||
const { db } = useStorage();
|
||||
const { relayUrls, ndk, fetcher } = useNDK();
|
||||
const { status, data, hasNextPage, isFetchingNextPage, fetchNextPage } =
|
||||
useInfiniteQuery({
|
||||
queryKey: ['group-feeds-' + params.id],
|
||||
initialPageParam: 0,
|
||||
queryFn: async ({ pageParam = 0 }) => {
|
||||
const authors = JSON.parse(params.content);
|
||||
return await db.getAllEventsByAuthors(authors, 20, pageParam);
|
||||
queryFn: async ({
|
||||
signal,
|
||||
pageParam,
|
||||
}: {
|
||||
signal: AbortSignal;
|
||||
pageParam: number;
|
||||
}) => {
|
||||
const events = await fetcher.fetchLatestEvents(
|
||||
relayUrls,
|
||||
{
|
||||
kinds: [NDKKind.Text, NDKKind.Repost, 1063, NDKKind.Article],
|
||||
authors: JSON.parse(params.content),
|
||||
},
|
||||
FETCH_LIMIT,
|
||||
{ asOf: pageParam === 0 ? undefined : pageParam, abortSignal: signal }
|
||||
);
|
||||
|
||||
const ndkEvents = events.map((event) => {
|
||||
return new NDKEvent(ndk, event);
|
||||
});
|
||||
|
||||
return ndkEvents.sort((a, b) => b.created_at - a.created_at);
|
||||
},
|
||||
getNextPageParam: (lastPage) => lastPage.nextCursor,
|
||||
getNextPageParam: (lastPage) => {
|
||||
const lastEvent = lastPage.at(-1);
|
||||
if (!lastEvent) return;
|
||||
return lastEvent.created_at - 1;
|
||||
},
|
||||
refetchOnWindowFocus: false,
|
||||
refetchOnReconnect: false,
|
||||
});
|
||||
|
||||
const dbEvents = useMemo(
|
||||
() => (data ? data.pages.flatMap((d: { data: DBEvent[] }) => d.data) : []),
|
||||
const allEvents = useMemo(
|
||||
() => (data ? data.pages.flatMap((page) => page) : []),
|
||||
[data]
|
||||
);
|
||||
|
||||
// render event match event kind
|
||||
const renderItem = useCallback(
|
||||
(dbEvent: DBEvent) => {
|
||||
const event: NDKEvent = JSON.parse(dbEvent.event as string);
|
||||
switch (event.kind) {
|
||||
case NDKKind.Text:
|
||||
return (
|
||||
<NoteWrapper
|
||||
key={dbEvent.id + dbEvent.root_id + dbEvent.reply_id}
|
||||
event={event}
|
||||
root={dbEvent.root_id}
|
||||
reply={dbEvent.reply_id}
|
||||
>
|
||||
<TextNote />
|
||||
</NoteWrapper>
|
||||
);
|
||||
case NDKKind.Repost:
|
||||
return <Repost key={dbEvent.id} event={event} />;
|
||||
case 1063:
|
||||
return (
|
||||
<NoteWrapper key={dbEvent.id} event={event}>
|
||||
<FileNote />
|
||||
</NoteWrapper>
|
||||
);
|
||||
case NDKKind.Article:
|
||||
return (
|
||||
<NoteWrapper key={dbEvent.id} event={event}>
|
||||
<ArticleNote />
|
||||
</NoteWrapper>
|
||||
);
|
||||
default:
|
||||
return (
|
||||
<NoteWrapper key={dbEvent.id} event={event}>
|
||||
<UnknownNote />
|
||||
</NoteWrapper>
|
||||
);
|
||||
}
|
||||
},
|
||||
[dbEvents]
|
||||
);
|
||||
const renderItem = useCallback((event: NDKEvent) => {
|
||||
switch (event.kind) {
|
||||
case NDKKind.Text:
|
||||
return (
|
||||
<NoteWrapper key={event.id} event={event}>
|
||||
<MemoizedTextNote />
|
||||
</NoteWrapper>
|
||||
);
|
||||
case NDKKind.Repost:
|
||||
return <MemoizedRepost key={event.id} event={event} />;
|
||||
case 1063:
|
||||
return (
|
||||
<NoteWrapper key={event.id} event={event}>
|
||||
<MemoizedFileNote />
|
||||
</NoteWrapper>
|
||||
);
|
||||
case NDKKind.Article:
|
||||
return (
|
||||
<NoteWrapper key={event.id} event={event}>
|
||||
<MemoizedArticleNote />
|
||||
</NoteWrapper>
|
||||
);
|
||||
default:
|
||||
return (
|
||||
<NoteWrapper key={event.id} event={event}>
|
||||
<UnknownNote />
|
||||
</NoteWrapper>
|
||||
);
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<WidgetWrapper>
|
||||
<TitleBar id={params.id} title={params.title} />
|
||||
<div className="flex-1">
|
||||
<VList className="flex-1">
|
||||
{status === 'pending' ? (
|
||||
<div className="flex h-full w-full items-center justify-center">
|
||||
<div className="inline-flex flex-col items-center justify-center gap-2">
|
||||
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />
|
||||
<p className="text-sm font-medium text-neutral-500 dark:text-neutral-400">
|
||||
Loading newsfeed...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
) : dbEvents.length === 0 ? (
|
||||
<div className="flex h-full w-full flex-col items-center justify-center px-3">
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
|
||||
<div className="text-center">
|
||||
<h3 className="font-semibold leading-tight text-neutral-900 dark:text-neutral-100">
|
||||
Oops, it looks like there are no posts.
|
||||
</h3>
|
||||
<p className="text-neutral-500 dark:text-neutral-400">
|
||||
You can close this widget
|
||||
</p>
|
||||
</div>
|
||||
<div className="px-3 py-1.5">
|
||||
<div className="rounded-xl bg-neutral-100 px-3 py-3 dark:bg-neutral-900">
|
||||
<NoteSkeleton />
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<VList className="h-full" style={{ contentVisibility: 'auto' }}>
|
||||
{dbEvents.map((item) => renderItem(item))}
|
||||
<div className="flex items-center justify-center px-3 py-1.5">
|
||||
{dbEvents.length > 0 ? (
|
||||
<button
|
||||
onClick={() => fetchNextPage()}
|
||||
disabled={!hasNextPage || isFetchingNextPage}
|
||||
className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-blue-500 px-6 font-medium text-white hover:bg-blue-600 focus:outline-none"
|
||||
>
|
||||
{isFetchingNextPage ? (
|
||||
<>
|
||||
<span>Loading...</span>
|
||||
<LoaderIcon className="h-5 w-5 animate-spin text-neutral-900 dark:text-neutral-100" />
|
||||
</>
|
||||
) : hasNextPage ? (
|
||||
<>
|
||||
<ArrowRightCircleIcon className="h-5 w-5 text-neutral-900 dark:text-neutral-100" />
|
||||
<span>Load more</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<ArrowRightCircleIcon className="h-5 w-5 text-neutral-900 dark:text-neutral-100" />
|
||||
<span>Nothing more to load</span>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="h-14" />
|
||||
</VList>
|
||||
allEvents.map((item) => renderItem(item))
|
||||
)}
|
||||
</div>
|
||||
<div className="flex h-16 items-center justify-center px-3 pb-3">
|
||||
{hasNextPage ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => fetchNextPage()}
|
||||
disabled={!hasNextPage || isFetchingNextPage}
|
||||
className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-blue-500 px-6 font-medium text-white hover:bg-blue-600 focus:outline-none"
|
||||
>
|
||||
{isFetchingNextPage ? (
|
||||
<LoaderIcon className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<>
|
||||
<ArrowRightCircleIcon className="h-5 w-5" />
|
||||
Load more
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
</VList>
|
||||
</WidgetWrapper>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
import { NDKEvent } from '@nostr-dev-kit/ndk';
|
||||
import { useInfiniteQuery } from '@tanstack/react-query';
|
||||
import { useCallback, useMemo } from 'react';
|
||||
import { useMemo } from 'react';
|
||||
import { VList } from 'virtua';
|
||||
|
||||
import { useNDK } from '@libs/ndk/provider';
|
||||
import { useStorage } from '@libs/storage/provider';
|
||||
|
||||
import { ArrowRightCircleIcon, LoaderIcon } from '@shared/icons';
|
||||
@@ -10,58 +11,69 @@ import { FileNote, NoteWrapper } from '@shared/notes';
|
||||
import { TitleBar } from '@shared/titleBar';
|
||||
import { WidgetWrapper } from '@shared/widgets';
|
||||
|
||||
import { DBEvent, Widget } from '@utils/types';
|
||||
import { FETCH_LIMIT } from '@stores/constants';
|
||||
|
||||
import { Widget } from '@utils/types';
|
||||
|
||||
export function LocalFilesWidget({ params }: { params: Widget }) {
|
||||
const { db } = useStorage();
|
||||
const { ndk, relayUrls, fetcher } = useNDK();
|
||||
const { status, data, hasNextPage, isFetchingNextPage, fetchNextPage } =
|
||||
useInfiniteQuery({
|
||||
queryKey: ['local-file-sharing'],
|
||||
queryKey: ['local-files'],
|
||||
initialPageParam: 0,
|
||||
queryFn: async ({ pageParam = 0 }) => {
|
||||
return await db.getAllEventsByKinds([1063], 20, pageParam);
|
||||
queryFn: async ({
|
||||
signal,
|
||||
pageParam,
|
||||
}: {
|
||||
signal: AbortSignal;
|
||||
pageParam: number;
|
||||
}) => {
|
||||
const events = await fetcher.fetchLatestEvents(
|
||||
relayUrls,
|
||||
{
|
||||
kinds: [1063],
|
||||
authors: db.account.circles,
|
||||
},
|
||||
FETCH_LIMIT,
|
||||
{ asOf: pageParam === 0 ? undefined : pageParam, abortSignal: signal }
|
||||
);
|
||||
|
||||
const ndkEvents = events.map((event) => {
|
||||
return new NDKEvent(ndk, event);
|
||||
});
|
||||
|
||||
return ndkEvents.sort((a, b) => b.created_at - a.created_at);
|
||||
},
|
||||
getNextPageParam: (lastPage) => lastPage.nextCursor,
|
||||
getNextPageParam: (lastPage) => {
|
||||
const lastEvent = lastPage.at(-1);
|
||||
if (!lastEvent) return;
|
||||
return lastEvent.created_at - 1;
|
||||
},
|
||||
refetchOnWindowFocus: false,
|
||||
refetchOnReconnect: false,
|
||||
});
|
||||
|
||||
const dbEvents = useMemo(
|
||||
() => (data ? data.pages.flatMap((d: { data: DBEvent[] }) => d.data) : []),
|
||||
[data]
|
||||
);
|
||||
|
||||
// render event match event kind
|
||||
const renderItem = useCallback(
|
||||
(dbEvent: DBEvent) => {
|
||||
const event: NDKEvent = JSON.parse(dbEvent.event as string);
|
||||
return (
|
||||
<NoteWrapper key={event.id} event={event}>
|
||||
<FileNote />
|
||||
</NoteWrapper>
|
||||
);
|
||||
},
|
||||
const allEvents = useMemo(
|
||||
() => (data ? data.pages.flatMap((page) => page) : []),
|
||||
[data]
|
||||
);
|
||||
|
||||
return (
|
||||
<WidgetWrapper>
|
||||
<TitleBar id={params.id} title={params.title} />
|
||||
<div className="flex-1">
|
||||
<VList className="flex-1">
|
||||
{status === 'pending' ? (
|
||||
<div className="flex h-full w-full items-center justify-center ">
|
||||
<div className="inline-flex flex-col items-center justify-center gap-2">
|
||||
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />
|
||||
<p className="text-sm font-medium text-neutral-500 dark:text-neutral-400">
|
||||
Loading file sharing event...
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex h-full w-full items-center justify-center">
|
||||
<LoaderIcon className="h-5 w-5 animate-spin" />
|
||||
</div>
|
||||
) : dbEvents.length === 0 ? (
|
||||
) : allEvents.length === 0 ? (
|
||||
<div className="flex h-full w-full flex-col items-center justify-center px-3">
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
|
||||
<div className="text-center">
|
||||
<h3 className="font-semibold leading-tight text-neutral-900 dark:text-neutral-100">
|
||||
Oops, it looks like there are no file sharing events.
|
||||
Oops, it looks like there are no files.
|
||||
</h3>
|
||||
<p className="text-neutral-500 dark:text-neutral-400">
|
||||
You can close this widget
|
||||
@@ -70,38 +82,32 @@ export function LocalFilesWidget({ params }: { params: Widget }) {
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<VList className="h-full" style={{ contentVisibility: 'auto' }}>
|
||||
{dbEvents.map((item) => renderItem(item))}
|
||||
<div className="flex items-center justify-center px-3 py-1.5">
|
||||
{dbEvents.length > 0 ? (
|
||||
<button
|
||||
onClick={() => fetchNextPage()}
|
||||
disabled={!hasNextPage || isFetchingNextPage}
|
||||
className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-blue-500 px-6 font-medium text-white hover:bg-blue-600 focus:outline-none"
|
||||
>
|
||||
{isFetchingNextPage ? (
|
||||
<>
|
||||
<span>Loading...</span>
|
||||
<LoaderIcon className="h-5 w-5 animate-spin text-neutral-900 dark:text-neutral-100" />
|
||||
</>
|
||||
) : hasNextPage ? (
|
||||
<>
|
||||
<ArrowRightCircleIcon className="h-5 w-5 text-neutral-900 dark:text-neutral-100" />
|
||||
<span>Load more</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<ArrowRightCircleIcon className="h-5 w-5 text-neutral-900 dark:text-neutral-100" />
|
||||
<span>Nothing more to load</span>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="h-14" />
|
||||
</VList>
|
||||
allEvents.map((item) => (
|
||||
<NoteWrapper key={item.id} event={item}>
|
||||
<FileNote />
|
||||
</NoteWrapper>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
<div className="flex h-16 items-center justify-center px-3 pb-3">
|
||||
{hasNextPage ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => fetchNextPage()}
|
||||
disabled={!hasNextPage || isFetchingNextPage}
|
||||
className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-blue-500 px-6 font-medium text-white hover:bg-blue-600 focus:outline-none"
|
||||
>
|
||||
{isFetchingNextPage ? (
|
||||
<LoaderIcon className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<>
|
||||
<ArrowRightCircleIcon className="h-5 w-5" />
|
||||
Load more
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
</VList>
|
||||
</WidgetWrapper>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,140 +0,0 @@
|
||||
import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
|
||||
import { useInfiniteQuery } from '@tanstack/react-query';
|
||||
import { useCallback, useMemo } from 'react';
|
||||
import { VList } from 'virtua';
|
||||
|
||||
import { useStorage } from '@libs/storage/provider';
|
||||
|
||||
import { ArrowRightCircleIcon, LoaderIcon } from '@shared/icons';
|
||||
import {
|
||||
MemoizedArticleNote,
|
||||
MemoizedFileNote,
|
||||
MemoizedRepost,
|
||||
MemoizedTextNote,
|
||||
NoteWrapper,
|
||||
UnknownNote,
|
||||
} from '@shared/notes';
|
||||
import { TitleBar } from '@shared/titleBar';
|
||||
import { WidgetWrapper } from '@shared/widgets';
|
||||
|
||||
import { DBEvent, Widget } from '@utils/types';
|
||||
|
||||
export function LocalFollowsWidget({ params }: { params: Widget }) {
|
||||
const { db } = useStorage();
|
||||
const { status, data, hasNextPage, isFetchingNextPage, fetchNextPage } =
|
||||
useInfiniteQuery({
|
||||
queryKey: ['follows-' + params.title],
|
||||
initialPageParam: 0,
|
||||
queryFn: async ({ pageParam = 0 }) => {
|
||||
return await db.getAllEventsByAuthors(db.account.follows, 20, pageParam);
|
||||
},
|
||||
getNextPageParam: (lastPage) => lastPage.nextCursor,
|
||||
});
|
||||
|
||||
const dbEvents = useMemo(
|
||||
() => (data ? data.pages.flatMap((d: { data: DBEvent[] }) => d.data) : []),
|
||||
[data]
|
||||
);
|
||||
|
||||
// render event match event kind
|
||||
const renderItem = useCallback(
|
||||
(dbEvent: DBEvent) => {
|
||||
const event: NDKEvent = JSON.parse(dbEvent.event as string);
|
||||
switch (event.kind) {
|
||||
case NDKKind.Text:
|
||||
return (
|
||||
<NoteWrapper
|
||||
key={dbEvent.id + dbEvent.root_id + dbEvent.reply_id}
|
||||
event={event}
|
||||
>
|
||||
<MemoizedTextNote />
|
||||
</NoteWrapper>
|
||||
);
|
||||
case NDKKind.Repost:
|
||||
return <MemoizedRepost key={dbEvent.id} event={event} />;
|
||||
case 1063:
|
||||
return (
|
||||
<NoteWrapper key={dbEvent.id} event={event}>
|
||||
<MemoizedFileNote />
|
||||
</NoteWrapper>
|
||||
);
|
||||
case NDKKind.Article:
|
||||
return (
|
||||
<NoteWrapper key={dbEvent.id} event={event}>
|
||||
<MemoizedArticleNote />
|
||||
</NoteWrapper>
|
||||
);
|
||||
default:
|
||||
return (
|
||||
<NoteWrapper key={dbEvent.id} event={event}>
|
||||
<UnknownNote />
|
||||
</NoteWrapper>
|
||||
);
|
||||
}
|
||||
},
|
||||
[dbEvents]
|
||||
);
|
||||
|
||||
return (
|
||||
<WidgetWrapper>
|
||||
<TitleBar id={params.id} title="Follows" />
|
||||
<div className="flex-1">
|
||||
{status === 'pending' ? (
|
||||
<div className="flex h-full w-full items-center justify-center ">
|
||||
<div className="inline-flex flex-col items-center justify-center gap-2">
|
||||
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />
|
||||
<p className="text-sm font-medium text-neutral-500 dark:text-neutral-400">
|
||||
Loading post...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
) : dbEvents.length === 0 ? (
|
||||
<div className="flex h-full w-full flex-col items-center justify-center px-3">
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
|
||||
<div className="text-center">
|
||||
<h3 className="font-semibold leading-tight text-neutral-900 dark:text-neutral-100">
|
||||
Oops, it looks like there are no posts.
|
||||
</h3>
|
||||
<p className="text-neutral-500 dark:text-neutral-400">
|
||||
You can close this widget
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<VList className="h-full" style={{ contentVisibility: 'auto' }}>
|
||||
{dbEvents.map((item) => renderItem(item))}
|
||||
<div className="flex items-center justify-center px-3 py-1.5">
|
||||
{dbEvents.length > 0 ? (
|
||||
<button
|
||||
onClick={() => fetchNextPage()}
|
||||
disabled={!hasNextPage || isFetchingNextPage}
|
||||
className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-blue-500 px-6 font-medium text-white hover:bg-blue-600 focus:outline-none"
|
||||
>
|
||||
{isFetchingNextPage ? (
|
||||
<>
|
||||
<span>Loading...</span>
|
||||
<LoaderIcon className="h-5 w-5 animate-spin text-neutral-900 dark:text-neutral-100" />
|
||||
</>
|
||||
) : hasNextPage ? (
|
||||
<>
|
||||
<ArrowRightCircleIcon className="h-5 w-5 text-neutral-900 dark:text-neutral-100" />
|
||||
<span>Load more</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<ArrowRightCircleIcon className="h-5 w-5 text-neutral-900 dark:text-neutral-100" />
|
||||
<span>Nothing more to load</span>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="h-14" />
|
||||
</VList>
|
||||
)}
|
||||
</div>
|
||||
</WidgetWrapper>
|
||||
);
|
||||
}
|
||||
@@ -26,14 +26,30 @@ export function LocalUserWidget({ params }: { params: Widget }) {
|
||||
const { status, data } = useQuery({
|
||||
queryKey: ['user-posts', params.content],
|
||||
queryFn: async () => {
|
||||
const rootIds = new Set();
|
||||
const dedupQueue = new Set();
|
||||
|
||||
const events = await ndk.fetchEvents({
|
||||
// @ts-expect-error, NDK not support file metadata yet
|
||||
kinds: [NDKKind.Text, NDKKind.Repost, 1063, NDKKind.Article],
|
||||
authors: [params.content],
|
||||
since: nHoursAgo(24),
|
||||
});
|
||||
const sortedEvents = [...events].sort((x, y) => y.created_at - x.created_at);
|
||||
return sortedEvents;
|
||||
|
||||
const ndkEvents = [...events];
|
||||
|
||||
ndkEvents.forEach((event) => {
|
||||
const tags = event.tags.filter((el) => el[0] === 'e');
|
||||
if (tags && tags.length > 0) {
|
||||
const rootId = tags.filter((el) => el[3] === 'root')[1] ?? tags[0][1];
|
||||
if (rootIds.has(rootId)) return dedupQueue.add(event.id);
|
||||
rootIds.add(rootId);
|
||||
}
|
||||
});
|
||||
|
||||
return ndkEvents
|
||||
.filter((event) => !dedupQueue.has(event.id))
|
||||
.sort((a, b) => b.created_at - a.created_at);
|
||||
},
|
||||
staleTime: Infinity,
|
||||
refetchOnMount: false,
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { NDKEvent, NDKFilter, NDKKind } from '@nostr-dev-kit/ndk';
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import { useCallback, useEffect } from 'react';
|
||||
import { useInfiniteQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import { useCallback, useEffect, useMemo } from 'react';
|
||||
import { VList } from 'virtua';
|
||||
|
||||
import { useNDK } from '@libs/ndk/provider';
|
||||
@@ -19,92 +19,66 @@ import {
|
||||
import { TitleBar } from '@shared/titleBar';
|
||||
import { WidgetWrapper } from '@shared/widgets';
|
||||
|
||||
import { nHoursAgo } from '@utils/date';
|
||||
import { useNostr } from '@utils/hooks/useNostr';
|
||||
|
||||
export function NewsfeedWidget() {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const { db } = useStorage();
|
||||
const { sub } = useNostr();
|
||||
const { relayUrls, ndk, fetcher } = useNDK();
|
||||
const { status, data } = useQuery({
|
||||
queryKey: ['newsfeed'],
|
||||
queryFn: async ({ signal }: { signal: AbortSignal }) => {
|
||||
const rootIds = new Set();
|
||||
const dedupQueue = new Set();
|
||||
const { status, data, hasNextPage, isFetchingNextPage, fetchNextPage } =
|
||||
useInfiniteQuery({
|
||||
queryKey: ['newsfeed'],
|
||||
initialPageParam: 0,
|
||||
queryFn: async ({
|
||||
signal,
|
||||
pageParam,
|
||||
}: {
|
||||
signal: AbortSignal;
|
||||
pageParam: number;
|
||||
}) => {
|
||||
const rootIds = new Set();
|
||||
const dedupQueue = new Set();
|
||||
|
||||
const events = await fetcher.fetchAllEvents(
|
||||
relayUrls,
|
||||
{
|
||||
kinds: [NDKKind.Text, NDKKind.Repost, 1063, NDKKind.Article],
|
||||
authors: db.account.circles,
|
||||
},
|
||||
{
|
||||
since: db.account.last_login_at === 0 ? nHoursAgo(4) : db.account.last_login_at,
|
||||
},
|
||||
{ abortSignal: signal }
|
||||
);
|
||||
const events = await fetcher.fetchLatestEvents(
|
||||
relayUrls,
|
||||
{
|
||||
kinds: [NDKKind.Text, NDKKind.Repost, 1063, NDKKind.Article],
|
||||
authors: db.account.circles,
|
||||
},
|
||||
50,
|
||||
{ asOf: pageParam === 0 ? undefined : pageParam, abortSignal: signal }
|
||||
);
|
||||
|
||||
const ndkEvents = events.map((event) => {
|
||||
return new NDKEvent(ndk, event);
|
||||
});
|
||||
const ndkEvents = events.map((event) => {
|
||||
return new NDKEvent(ndk, event);
|
||||
});
|
||||
|
||||
ndkEvents.forEach((event) => {
|
||||
const tags = event.tags.filter((el) => el[0] === 'e');
|
||||
if (tags && tags.length > 0) {
|
||||
const rootId = tags.filter((el) => el[3] === 'root')[1] ?? tags[0][1];
|
||||
if (rootIds.has(rootId)) return dedupQueue.add(event.id);
|
||||
rootIds.add(rootId);
|
||||
}
|
||||
});
|
||||
ndkEvents.forEach((event) => {
|
||||
const tags = event.tags.filter((el) => el[0] === 'e');
|
||||
if (tags && tags.length > 0) {
|
||||
const rootId = tags.filter((el) => el[3] === 'root')[1] ?? tags[0][1];
|
||||
if (rootIds.has(rootId)) return dedupQueue.add(event.id);
|
||||
rootIds.add(rootId);
|
||||
}
|
||||
});
|
||||
|
||||
return ndkEvents
|
||||
.filter((event) => !dedupQueue.has(event.id))
|
||||
.sort((a, b) => b.created_at - a.created_at);
|
||||
},
|
||||
});
|
||||
return ndkEvents
|
||||
.filter((event) => !dedupQueue.has(event.id))
|
||||
.sort((a, b) => b.created_at - a.created_at);
|
||||
},
|
||||
getNextPageParam: (lastPage) => {
|
||||
const lastEvent = lastPage.at(-1);
|
||||
if (!lastEvent) return;
|
||||
return lastEvent.created_at - 1;
|
||||
},
|
||||
});
|
||||
|
||||
const queryClient = useQueryClient();
|
||||
const mutation = useMutation({
|
||||
mutationFn: async () => {
|
||||
const currentLastEvent = data.at(-1);
|
||||
const lastCreatedAt = currentLastEvent.created_at - 1;
|
||||
|
||||
const rootIds = new Set();
|
||||
const dedupQueue = new Set();
|
||||
|
||||
const events = await fetcher.fetchLatestEvents(
|
||||
relayUrls,
|
||||
{
|
||||
kinds: [NDKKind.Text, NDKKind.Repost, 1063, NDKKind.Article],
|
||||
authors: db.account.circles,
|
||||
},
|
||||
100,
|
||||
{
|
||||
asOf: lastCreatedAt,
|
||||
}
|
||||
);
|
||||
|
||||
const ndkEvents = events.map((event) => {
|
||||
return new NDKEvent(ndk, event);
|
||||
});
|
||||
|
||||
ndkEvents.forEach((event) => {
|
||||
const tags = event.tags.filter((el) => el[0] === 'e');
|
||||
if (tags && tags.length > 0) {
|
||||
const rootId = tags.filter((el) => el[3] === 'root')[1] ?? tags[0][1];
|
||||
if (rootIds.has(rootId)) return dedupQueue.add(event.id);
|
||||
rootIds.add(rootId);
|
||||
}
|
||||
});
|
||||
|
||||
return ndkEvents
|
||||
.filter((event) => !dedupQueue.has(event.id))
|
||||
.sort((a, b) => b.created_at - a.created_at);
|
||||
},
|
||||
onSuccess: async (data) => {
|
||||
queryClient.setQueryData(['newsfeed'], (old: NDKEvent[]) => [...old, ...data]);
|
||||
},
|
||||
});
|
||||
const allEvents = useMemo(
|
||||
() => (data ? data.pages.flatMap((page) => page) : []),
|
||||
[data]
|
||||
);
|
||||
|
||||
const renderItem = useCallback((event: NDKEvent) => {
|
||||
switch (event.kind) {
|
||||
@@ -138,46 +112,55 @@ export function NewsfeedWidget() {
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (db.account && db.account.circles.length > 0) {
|
||||
if (status === 'success' && db.account && db.account.circles.length > 0) {
|
||||
queryClient.fetchQuery({ queryKey: ['notification'] });
|
||||
|
||||
const filter: NDKFilter = {
|
||||
kinds: [NDKKind.Text, NDKKind.Repost],
|
||||
authors: db.account.circles,
|
||||
since: Math.floor(Date.now() / 1000),
|
||||
};
|
||||
|
||||
sub(filter, async (event) => {
|
||||
queryClient.setQueryData(['newsfeed'], (old: NDKEvent[]) => [event, ...old]);
|
||||
});
|
||||
sub(
|
||||
filter,
|
||||
async (event) => {
|
||||
queryClient.setQueryData(['newsfeed'], (old: NDKEvent[]) => [event, ...old]);
|
||||
},
|
||||
false,
|
||||
'newsfeed'
|
||||
);
|
||||
}
|
||||
}, []);
|
||||
}, [status]);
|
||||
|
||||
return (
|
||||
<WidgetWrapper>
|
||||
<TitleBar id="9999" />
|
||||
<VList className="flex-1">
|
||||
{status === 'pending' ? (
|
||||
<div>
|
||||
<div className="px-3 py-1.5">
|
||||
<div className="rounded-xl bg-neutral-100 px-3 py-3 dark:bg-neutral-900">
|
||||
<NoteSkeleton />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex h-11 items-center justify-center">
|
||||
<LoaderIcon className="h-4 w-4 animate-spin" />
|
||||
<div className="px-3 py-1.5">
|
||||
<div className="rounded-xl bg-neutral-100 px-3 py-3 dark:bg-neutral-900">
|
||||
<NoteSkeleton />
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
data.map((item) => renderItem(item))
|
||||
allEvents.map((item) => renderItem(item))
|
||||
)}
|
||||
<div className="flex h-16 items-center justify-center px-3 pb-3">
|
||||
{data ? (
|
||||
{hasNextPage ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => mutation.mutate()}
|
||||
onClick={() => fetchNextPage()}
|
||||
disabled={!hasNextPage || isFetchingNextPage}
|
||||
className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-blue-500 px-6 font-medium text-white hover:bg-blue-600 focus:outline-none"
|
||||
>
|
||||
<ArrowRightCircleIcon className="h-5 w-5" />
|
||||
Load more
|
||||
{isFetchingNextPage ? (
|
||||
<LoaderIcon className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<>
|
||||
<ArrowRightCircleIcon className="h-5 w-5" />
|
||||
Load more
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
@@ -1,59 +1,145 @@
|
||||
import { NDKEvent } from '@nostr-dev-kit/ndk';
|
||||
import { useCallback, useEffect } from 'react';
|
||||
import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
|
||||
import { useInfiniteQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import { useCallback, useEffect, useMemo } from 'react';
|
||||
import { VList } from 'virtua';
|
||||
|
||||
import { useNDK } from '@libs/ndk/provider';
|
||||
import { useStorage } from '@libs/storage/provider';
|
||||
|
||||
import { LoaderIcon } from '@shared/icons';
|
||||
import { ArrowRightCircleIcon, LoaderIcon } from '@shared/icons';
|
||||
import { NoteSkeleton } from '@shared/notes';
|
||||
import { NotifyNote } from '@shared/notification/notifyNote';
|
||||
import { TitleBar } from '@shared/titleBar';
|
||||
import { WidgetWrapper } from '@shared/widgets';
|
||||
|
||||
import { useActivities } from '@stores/activities';
|
||||
|
||||
import { useNostr } from '@utils/hooks/useNostr';
|
||||
import { Widget } from '@utils/types';
|
||||
import { sendNativeNotification } from '@utils/notification';
|
||||
|
||||
export function NotificationWidget() {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
export function LocalNotificationWidget({ params }: { params: Widget }) {
|
||||
const { db } = useStorage();
|
||||
const { getAllActivities } = useNostr();
|
||||
const { sub } = useNostr();
|
||||
const { ndk, relayUrls, fetcher } = useNDK();
|
||||
const { status, data, hasNextPage, isFetchingNextPage, fetchNextPage } =
|
||||
useInfiniteQuery({
|
||||
queryKey: ['notification'],
|
||||
initialPageParam: 0,
|
||||
queryFn: async ({
|
||||
signal,
|
||||
pageParam,
|
||||
}: {
|
||||
signal: AbortSignal;
|
||||
pageParam: number;
|
||||
}) => {
|
||||
const events = await fetcher.fetchLatestEvents(
|
||||
relayUrls,
|
||||
{
|
||||
kinds: [NDKKind.Text, NDKKind.Repost, NDKKind.Reaction, NDKKind.Zap],
|
||||
'#p': [db.account.pubkey],
|
||||
},
|
||||
50,
|
||||
{ asOf: pageParam === 0 ? undefined : pageParam, abortSignal: signal }
|
||||
);
|
||||
|
||||
const [activities, setActivities] = useActivities((state) => [
|
||||
state.activities,
|
||||
state.setActivities,
|
||||
]);
|
||||
const ndkEvents = events.map((event) => {
|
||||
return new NDKEvent(ndk, event);
|
||||
});
|
||||
|
||||
const renderEvent = useCallback(
|
||||
(event: NDKEvent) => {
|
||||
if (event.pubkey === db.account.pubkey) return null;
|
||||
return <NotifyNote key={event.id} event={event} />;
|
||||
},
|
||||
[activities]
|
||||
return ndkEvents.sort((a, b) => b.created_at - a.created_at);
|
||||
},
|
||||
getNextPageParam: (lastPage) => {
|
||||
const lastEvent = lastPage.at(-1);
|
||||
if (!lastEvent) return;
|
||||
return lastEvent.created_at - 1;
|
||||
},
|
||||
enabled: false,
|
||||
});
|
||||
|
||||
const allEvents = useMemo(
|
||||
() => (data ? data.pages.flatMap((page) => page) : []),
|
||||
[data]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
async function getActivities() {
|
||||
const events = await getAllActivities(48);
|
||||
setActivities(events);
|
||||
}
|
||||
|
||||
getActivities();
|
||||
const renderEvent = useCallback((event: NDKEvent) => {
|
||||
if (event.pubkey === db.account.pubkey) return null;
|
||||
return <NotifyNote key={event.id} event={event} />;
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (status === 'success' && db.account) {
|
||||
const filter = {
|
||||
kinds: [NDKKind.Text, NDKKind.Repost, NDKKind.Reaction, NDKKind.Zap],
|
||||
'#p': [db.account.pubkey],
|
||||
since: Math.floor(Date.now() / 1000),
|
||||
};
|
||||
|
||||
sub(
|
||||
filter,
|
||||
async (event) => {
|
||||
queryClient.setQueryData(['notification'], (old: NDKEvent[]) => [
|
||||
event,
|
||||
...old,
|
||||
]);
|
||||
|
||||
const user = ndk.getUser({ hexpubkey: event.pubkey });
|
||||
await user.fetchProfile();
|
||||
|
||||
switch (event.kind) {
|
||||
case NDKKind.Text:
|
||||
return await sendNativeNotification(
|
||||
`${
|
||||
user.profile.displayName || user.profile.name
|
||||
} has replied to your note`
|
||||
);
|
||||
case NDKKind.EncryptedDirectMessage: {
|
||||
if (location.pathname !== '/chats') {
|
||||
return await sendNativeNotification(
|
||||
`${
|
||||
user.profile.displayName || user.profile.name
|
||||
} has send you a encrypted message`
|
||||
);
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
case NDKKind.Repost:
|
||||
return await sendNativeNotification(
|
||||
`${
|
||||
user.profile.displayName || user.profile.name
|
||||
} has reposted to your note`
|
||||
);
|
||||
case NDKKind.Reaction:
|
||||
return await sendNativeNotification(
|
||||
`${user.profile.displayName || user.profile.name} has reacted ${
|
||||
event.content
|
||||
} to your note`
|
||||
);
|
||||
case NDKKind.Zap:
|
||||
return await sendNativeNotification(
|
||||
`${user.profile.displayName || user.profile.name} has zapped to your note`
|
||||
);
|
||||
default:
|
||||
break;
|
||||
}
|
||||
},
|
||||
false,
|
||||
'notification'
|
||||
);
|
||||
}
|
||||
}, [status]);
|
||||
|
||||
return (
|
||||
<WidgetWrapper>
|
||||
<TitleBar id={params.id} title={params.title} />
|
||||
<div className="flex-1">
|
||||
{!activities ? (
|
||||
<div className="flex h-full w-full items-center justify-center">
|
||||
<div className="flex flex-col items-center gap-1.5">
|
||||
<LoaderIcon className="h-5 w-5 animate-spin text-neutral-900 dark:text-neutral-100" />
|
||||
<p className="text-sm font-medium text-neutral-600 dark:text-neutral-400">
|
||||
Loading...
|
||||
</p>
|
||||
<TitleBar id="9998" title="Notification" />
|
||||
<VList className="flex-1">
|
||||
{status === 'pending' ? (
|
||||
<div className="px-3 py-1.5">
|
||||
<div className="rounded-xl bg-neutral-100 px-3 py-3 dark:bg-neutral-900">
|
||||
<NoteSkeleton />
|
||||
</div>
|
||||
</div>
|
||||
) : activities.length < 1 ? (
|
||||
) : allEvents.length < 1 ? (
|
||||
<div className="flex h-full w-full flex-col items-center justify-center">
|
||||
<p className="mb-1 text-4xl">🎉</p>
|
||||
<p className="text-center font-medium text-neutral-600 dark:text-neutral-400">
|
||||
@@ -61,12 +147,28 @@ export function LocalNotificationWidget({ params }: { params: Widget }) {
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<VList className="h-full" style={{ contentVisibility: 'auto' }}>
|
||||
{activities.map((event) => renderEvent(event))}
|
||||
<div className="h-14" />
|
||||
</VList>
|
||||
allEvents.map((event) => renderEvent(event))
|
||||
)}
|
||||
</div>
|
||||
<div className="flex h-16 items-center justify-center px-3 pb-3">
|
||||
{hasNextPage ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => fetchNextPage()}
|
||||
disabled={!hasNextPage || isFetchingNextPage}
|
||||
className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-blue-500 px-6 font-medium text-white hover:bg-blue-600 focus:outline-none"
|
||||
>
|
||||
{isFetchingNextPage ? (
|
||||
<LoaderIcon className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<>
|
||||
<ArrowRightCircleIcon className="h-5 w-5" />
|
||||
Load more
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
</VList>
|
||||
</WidgetWrapper>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,70 +0,0 @@
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
import { ArrowRightIcon } from '@shared/icons';
|
||||
import { TitleBar } from '@shared/titleBar';
|
||||
import { WidgetWrapper } from '@shared/widgets';
|
||||
|
||||
import { useResources } from '@stores/resources';
|
||||
|
||||
import { Widget } from '@utils/types';
|
||||
|
||||
export function LearnNostrWidget({ params }: { params: Widget }) {
|
||||
const navigate = useNavigate();
|
||||
const openResource = useResources((state) => state.openResource);
|
||||
const resources = useResources((state) => state.resources);
|
||||
const seens = useResources((state) => state.seens);
|
||||
|
||||
const open = (naddr: string) => {
|
||||
// add resource to seen list
|
||||
openResource(naddr);
|
||||
// redirect
|
||||
navigate(`/notes/article/${naddr}`);
|
||||
};
|
||||
|
||||
return (
|
||||
<WidgetWrapper>
|
||||
<TitleBar id={params.id} title="The Joy of Nostr" />
|
||||
<div className="h-full overflow-y-auto px-3 pb-20 scrollbar-none">
|
||||
{resources.map((resource, index) => (
|
||||
<div key={index} className="mb-6">
|
||||
<h3 className="mb-2 text-sm font-medium text-neutral-500 dark:text-neutral-400">
|
||||
{resource.title}
|
||||
</h3>
|
||||
<div className="flex flex-col gap-2">
|
||||
{resource.data.length ? (
|
||||
resource.data.map((item, index) => (
|
||||
<button
|
||||
key={index}
|
||||
type="button"
|
||||
onClick={() => open(item.id)}
|
||||
className="flex items-center justify-between rounded-xl bg-neutral-100 px-4 py-3 hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800"
|
||||
>
|
||||
<div className="flex flex-col items-start">
|
||||
<h5 className="font-semibold text-neutral-900 dark:text-neutral-100">
|
||||
{item.title}
|
||||
</h5>
|
||||
{seens.has(item.id) ? (
|
||||
<p className="text-sm text-green-500">Readed</p>
|
||||
) : (
|
||||
<p className="text-sm text-neutral-500 dark:text-neutral-400">
|
||||
Unread
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<ArrowRightIcon className="h-5 w-5 text-neutral-100 dark:text-neutral-900" />
|
||||
</button>
|
||||
))
|
||||
) : (
|
||||
<div className="flex h-14 items-center justify-center rounded-xl bg-neutral-100 px-3 py-3 dark:bg-neutral-900">
|
||||
<p className="text-sm font-medium text-neutral-900 dark:text-neutral-100">
|
||||
More resources are coming, stay tuned.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</WidgetWrapper>
|
||||
);
|
||||
}
|
||||
@@ -5,17 +5,15 @@ import { useStorage } from '@libs/storage/provider';
|
||||
import { ArrowRightCircleIcon, CheckCircleIcon } from '@shared/icons';
|
||||
import { User } from '@shared/user';
|
||||
|
||||
import { WidgetKinds, useWidgets } from '@stores/widgets';
|
||||
import { WidgetKinds } from '@stores/constants';
|
||||
|
||||
import { useWidget } from '@utils/hooks/useWidget';
|
||||
import { Widget } from '@utils/types';
|
||||
|
||||
export function XfeedsWidget({ params }: { params: Widget }) {
|
||||
const { db } = useStorage();
|
||||
const { addWidget, removeWidget } = useWidget();
|
||||
|
||||
const [setWidget, removeWidget] = useWidgets((state) => [
|
||||
state.setWidget,
|
||||
state.removeWidget,
|
||||
]);
|
||||
const [title, setTitle] = useState<string>('');
|
||||
const [groups, setGroups] = useState<Array<string>>([]);
|
||||
|
||||
@@ -28,17 +26,17 @@ export function XfeedsWidget({ params }: { params: Widget }) {
|
||||
};
|
||||
|
||||
const cancel = () => {
|
||||
removeWidget(db, params.id);
|
||||
removeWidget.mutate(params.id);
|
||||
};
|
||||
|
||||
const submit = async () => {
|
||||
setWidget(db, {
|
||||
addWidget.mutate({
|
||||
kind: WidgetKinds.local.feeds,
|
||||
title: title || 'Group',
|
||||
content: JSON.stringify(groups),
|
||||
});
|
||||
// remove temp widget
|
||||
removeWidget(db, params.id);
|
||||
removeWidget.mutate(params.id);
|
||||
};
|
||||
|
||||
return (
|
||||
|
||||
@@ -1,11 +1,10 @@
|
||||
import { Resolver, useForm } from 'react-hook-form';
|
||||
|
||||
import { useStorage } from '@libs/storage/provider';
|
||||
|
||||
import { ArrowRightCircleIcon } from '@shared/icons';
|
||||
|
||||
import { WidgetKinds, useWidgets } from '@stores/widgets';
|
||||
import { WidgetKinds } from '@stores/constants';
|
||||
|
||||
import { useWidget } from '@utils/hooks/useWidget';
|
||||
import { Widget } from '@utils/types';
|
||||
|
||||
type FormValues = {
|
||||
@@ -27,12 +26,7 @@ const resolver: Resolver<FormValues> = async (values) => {
|
||||
};
|
||||
|
||||
export function XhashtagWidget({ params }: { params: Widget }) {
|
||||
const [setWidget, removeWidget] = useWidgets((state) => [
|
||||
state.setWidget,
|
||||
state.removeWidget,
|
||||
]);
|
||||
|
||||
const { db } = useStorage();
|
||||
const { addWidget, removeWidget } = useWidget();
|
||||
const {
|
||||
register,
|
||||
setError,
|
||||
@@ -41,18 +35,18 @@ export function XhashtagWidget({ params }: { params: Widget }) {
|
||||
} = useForm<FormValues>({ resolver });
|
||||
|
||||
const cancel = () => {
|
||||
removeWidget(db, params.id);
|
||||
removeWidget.mutate(params.id);
|
||||
};
|
||||
|
||||
const onSubmit = async (data: FormValues) => {
|
||||
try {
|
||||
setWidget(db, {
|
||||
addWidget.mutate({
|
||||
kind: WidgetKinds.global.hashtag,
|
||||
title: data.hashtag,
|
||||
content: data.hashtag.replace('#', ''),
|
||||
});
|
||||
// remove temp widget
|
||||
removeWidget(db, params.id);
|
||||
removeWidget.mutate(params.id);
|
||||
} catch (e) {
|
||||
setError('hashtag', {
|
||||
type: 'custom',
|
||||
|
||||
Reference in New Issue
Block a user