152 lines
3.7 KiB
TypeScript
152 lines
3.7 KiB
TypeScript
import { createNote, getNotes } from "@libs/storage";
|
|
import { NDKEvent, NDKFilter, NDKSubscription } from "@nostr-dev-kit/ndk";
|
|
import { Note } from "@shared/notes/note";
|
|
import { NoteSkeleton } from "@shared/notes/skeleton";
|
|
import { RelayContext } from "@shared/relayProvider";
|
|
import { TitleBar } from "@shared/titleBar";
|
|
import { useInfiniteQuery } from "@tanstack/react-query";
|
|
import { useVirtualizer } from "@tanstack/react-virtual";
|
|
import { dateToUnix } from "@utils/date";
|
|
import { useAccount } from "@utils/hooks/useAccount";
|
|
import { useContext, useEffect, useRef } from "react";
|
|
|
|
const ITEM_PER_PAGE = 10;
|
|
const TIME = Math.floor(Date.now() / 1000);
|
|
|
|
export function FollowingBlock({ block }: { block: number }) {
|
|
const ndk = useContext(RelayContext);
|
|
|
|
const { account } = useAccount();
|
|
|
|
const {
|
|
status,
|
|
data,
|
|
fetchNextPage,
|
|
hasNextPage,
|
|
isFetching,
|
|
isFetchingNextPage,
|
|
}: any = useInfiniteQuery({
|
|
queryKey: ["newsfeed-circle"],
|
|
queryFn: async ({ pageParam = 0 }) => {
|
|
return await getNotes(TIME, ITEM_PER_PAGE, pageParam);
|
|
},
|
|
getNextPageParam: (lastPage) => lastPage.nextCursor,
|
|
});
|
|
|
|
const notes = data ? data.pages.flatMap((d: { data: any }) => d.data) : [];
|
|
const parentRef = useRef();
|
|
|
|
const rowVirtualizer = useVirtualizer({
|
|
count: hasNextPage ? notes.length + 1 : notes.length,
|
|
getScrollElement: () => parentRef.current,
|
|
estimateSize: () => 500,
|
|
overscan: 2,
|
|
});
|
|
|
|
const itemsVirtualizer = rowVirtualizer.getVirtualItems();
|
|
|
|
useEffect(() => {
|
|
const [lastItem] = [...rowVirtualizer.getVirtualItems()].reverse();
|
|
|
|
if (!lastItem) {
|
|
return;
|
|
}
|
|
|
|
if (
|
|
lastItem.index >= notes.length - 1 &&
|
|
hasNextPage &&
|
|
!isFetchingNextPage
|
|
) {
|
|
fetchNextPage();
|
|
}
|
|
}, [notes.length, fetchNextPage, rowVirtualizer.getVirtualItems()]);
|
|
|
|
useEffect(() => {
|
|
const follows = account ? JSON.parse(account.follows) : [];
|
|
|
|
const filter: NDKFilter = {
|
|
kinds: [1, 6],
|
|
authors: follows,
|
|
since: dateToUnix(),
|
|
};
|
|
|
|
const sub = account ? ndk.subscribe(filter) : null;
|
|
if (sub) {
|
|
sub.addListener("event", (event: NDKEvent) => {
|
|
createNote(
|
|
event.id,
|
|
event.pubkey,
|
|
event.kind,
|
|
event.tags,
|
|
event.content,
|
|
event.created_at,
|
|
);
|
|
});
|
|
}
|
|
|
|
return () => {
|
|
if (sub) {
|
|
sub.stop();
|
|
}
|
|
};
|
|
}, [account]);
|
|
|
|
const renderItem = (index: string | number) => {
|
|
const note = notes[index];
|
|
|
|
if (!note) return;
|
|
return (
|
|
<div key={index} data-index={index} ref={rowVirtualizer.measureElement}>
|
|
<Note event={note} block={block} />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div className="shrink-0 w-[400px] border-r border-zinc-900">
|
|
<TitleBar title="Circle" />
|
|
<div
|
|
ref={parentRef}
|
|
className="scrollbar-hide flex w-full h-full flex-col justify-between gap-1.5 pt-1.5 pb-20 overflow-y-auto"
|
|
style={{ contain: "strict" }}
|
|
>
|
|
{status === "loading" ? (
|
|
<div className="px-3 py-1.5">
|
|
<div className="rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-3 py-3">
|
|
<NoteSkeleton />
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div
|
|
className="relative w-full"
|
|
style={{
|
|
height: `${rowVirtualizer.getTotalSize()}px`,
|
|
}}
|
|
>
|
|
<div
|
|
className="absolute left-0 top-0 w-full"
|
|
style={{
|
|
transform: `translateY(${
|
|
itemsVirtualizer[0].start -
|
|
rowVirtualizer.options.scrollMargin
|
|
}px)`,
|
|
}}
|
|
>
|
|
{rowVirtualizer
|
|
.getVirtualItems()
|
|
.map((virtualRow) => renderItem(virtualRow.index))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
{isFetching && !isFetchingNextPage && (
|
|
<div className="px-3 py-1.5">
|
|
<div className="rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-3 py-3">
|
|
<NoteSkeleton />
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|