90 lines
2.5 KiB
TypeScript
90 lines
2.5 KiB
TypeScript
import { NoteSkeleton, RepostNote, TextNote, useArk } from "@lume/ark";
|
|
import { ArrowRightCircleIcon, LoaderIcon } from "@lume/icons";
|
|
import { FETCH_LIMIT } from "@lume/utils";
|
|
import { NDKEvent, NDKKind } from "@nostr-dev-kit/ndk";
|
|
import { useInfiniteQuery } from "@tanstack/react-query";
|
|
import { useCallback, useMemo } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { VList } from "virtua";
|
|
|
|
export function RelayEventList({ relayUrl }: { relayUrl: string }) {
|
|
const ark = useArk();
|
|
|
|
const { t } = useTranslation();
|
|
const { status, data, hasNextPage, isFetchingNextPage, fetchNextPage } =
|
|
useInfiniteQuery({
|
|
queryKey: ["relay-events", relayUrl],
|
|
initialPageParam: 0,
|
|
queryFn: async ({
|
|
signal,
|
|
pageParam,
|
|
}: {
|
|
signal: AbortSignal;
|
|
pageParam: number;
|
|
}) => {
|
|
const url = `wss://${relayUrl}`;
|
|
const events = await ark.getRelayEvents({
|
|
relayUrl: url,
|
|
filter: {
|
|
kinds: [NDKKind.Text, NDKKind.Repost],
|
|
},
|
|
limit: FETCH_LIMIT,
|
|
pageParam,
|
|
signal,
|
|
});
|
|
|
|
return events;
|
|
},
|
|
getNextPageParam: (lastPage) => {
|
|
const lastEvent = lastPage.at(-1);
|
|
if (!lastEvent) return;
|
|
return lastEvent.created_at - 1;
|
|
},
|
|
select: (data) => data?.pages.flatMap((page) => page),
|
|
refetchOnWindowFocus: false,
|
|
});
|
|
|
|
const renderItem = useCallback(
|
|
(event: NDKEvent) => {
|
|
switch (event.kind) {
|
|
case NDKKind.Text:
|
|
return <TextNote key={event.id} event={event} className="mt-3" />;
|
|
case NDKKind.Repost:
|
|
return <RepostNote key={event.id} event={event} className="mt-3" />;
|
|
default:
|
|
return <TextNote key={event.id} event={event} className="mt-3" />;
|
|
}
|
|
},
|
|
[data],
|
|
);
|
|
|
|
return (
|
|
<VList className="mx-auto h-full w-full max-w-[500px] px-3 scrollbar-none">
|
|
{status === "pending" ? (
|
|
<NoteSkeleton />
|
|
) : (
|
|
data.map((item) => renderItem(item))
|
|
)}
|
|
<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" />
|
|
{t("global.loading")}
|
|
</>
|
|
)}
|
|
</button>
|
|
) : null}
|
|
</div>
|
|
</VList>
|
|
);
|
|
}
|