116 lines
3.3 KiB
TypeScript
116 lines
3.3 KiB
TypeScript
import { 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, useQueryClient } from "@tanstack/react-query";
|
|
import { useCallback, useMemo } from "react";
|
|
import { ActivityRepost } from "./activityRepost";
|
|
import { ActivityText } from "./activityText";
|
|
import { ActivityZap } from "./activityZap";
|
|
|
|
export function ActivityList() {
|
|
const ark = useArk();
|
|
const queryClient = useQueryClient();
|
|
|
|
const { data, hasNextPage, isLoading, isFetchingNextPage, fetchNextPage } =
|
|
useInfiniteQuery({
|
|
queryKey: ["activity"],
|
|
initialPageParam: 0,
|
|
queryFn: async ({
|
|
signal,
|
|
pageParam,
|
|
}: {
|
|
signal: AbortSignal;
|
|
pageParam: number;
|
|
}) => {
|
|
const events = await ark.getInfiniteEvents({
|
|
filter: {
|
|
kinds: [NDKKind.Text, NDKKind.Repost, NDKKind.Zap],
|
|
"#p": [ark.account.pubkey],
|
|
},
|
|
limit: FETCH_LIMIT,
|
|
pageParam,
|
|
signal,
|
|
});
|
|
|
|
return events;
|
|
},
|
|
getNextPageParam: (lastPage) => {
|
|
const lastEvent = lastPage.at(-1);
|
|
if (!lastEvent) return;
|
|
return lastEvent.created_at - 1;
|
|
},
|
|
initialData: () => {
|
|
const queryCacheData = queryClient.getQueryState(["activity"])
|
|
?.data as NDKEvent[];
|
|
if (queryCacheData) {
|
|
return {
|
|
pageParams: [undefined, 1],
|
|
pages: [queryCacheData],
|
|
};
|
|
}
|
|
},
|
|
staleTime: 360 * 1000,
|
|
refetchOnWindowFocus: false,
|
|
refetchOnMount: false,
|
|
});
|
|
|
|
const allEvents = useMemo(
|
|
() => (data ? data.pages.flatMap((page) => page) : []),
|
|
[data],
|
|
);
|
|
|
|
const renderEvenKind = useCallback(
|
|
(event: NDKEvent) => {
|
|
if (event.pubkey === ark.account.pubkey) return null;
|
|
switch (event.kind) {
|
|
case NDKKind.Text:
|
|
return <ActivityText key={event.id} event={event} />;
|
|
case NDKKind.Repost:
|
|
return <ActivityRepost key={event.id} event={event} />;
|
|
case NDKKind.Zap:
|
|
return <ActivityZap key={event.id} event={event} />;
|
|
default:
|
|
return <ActivityText key={event.id} event={event} />;
|
|
}
|
|
},
|
|
[data],
|
|
);
|
|
|
|
return (
|
|
<div className="flex flex-col flex-1 min-h-0 overflow-y-auto">
|
|
{isLoading ? (
|
|
<div className="w-full h-full flex flex-col items-center justify-center">
|
|
<LoaderIcon className="size-5 animate-spin" />
|
|
</div>
|
|
) : !allEvents.length ? (
|
|
<div className="w-full h-full flex flex-col items-center justify-center">
|
|
<p className="mb-2 text-2xl">🎉</p>
|
|
<p className="text-center font-medium">Yo! Nothing new yet.</p>
|
|
</div>
|
|
) : (
|
|
allEvents.map((event) => renderEvenKind(event))
|
|
)}
|
|
<div className="flex items-center justify-center h-16">
|
|
{hasNextPage ? (
|
|
<button
|
|
type="button"
|
|
onClick={() => fetchNextPage()}
|
|
disabled={!hasNextPage || isFetchingNextPage}
|
|
className="inline-flex items-center justify-center w-full h-12 gap-2 font-medium bg-neutral-100 hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800 rounded-xl focus:outline-none"
|
|
>
|
|
{isFetchingNextPage ? (
|
|
<LoaderIcon className="size-5 animate-spin" />
|
|
) : (
|
|
<>
|
|
<ArrowRightCircleIcon className="size-5" />
|
|
Load more
|
|
</>
|
|
)}
|
|
</button>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|