102 lines
3.3 KiB
TypeScript
102 lines
3.3 KiB
TypeScript
import { useQuery } from '@tanstack/react-query';
|
|
import { useVirtualizer } from '@tanstack/react-virtual';
|
|
import { useRef } from 'react';
|
|
|
|
import { useNDK } from '@libs/ndk/provider';
|
|
|
|
import { NoteKind_1, NoteSkeleton } from '@shared/notes';
|
|
import { TitleBar } from '@shared/titleBar';
|
|
import { UserProfile } from '@shared/userProfile';
|
|
|
|
import { nHoursAgo } from '@utils/date';
|
|
import { Block, LumeEvent } from '@utils/types';
|
|
|
|
export function UserBlock({ params }: { params: Block }) {
|
|
const parentRef = useRef<HTMLDivElement>(null);
|
|
|
|
const { fetcher, relayUrls } = useNDK();
|
|
const { status, data } = useQuery(['user-feed', params.content], async () => {
|
|
const events = await fetcher.fetchAllEvents(
|
|
relayUrls,
|
|
{ kinds: [1], authors: [params.content] },
|
|
{ since: nHoursAgo(48) },
|
|
{ sort: true }
|
|
);
|
|
return events as unknown as LumeEvent[];
|
|
});
|
|
|
|
const rowVirtualizer = useVirtualizer({
|
|
count: data ? data.length : 0,
|
|
getScrollElement: () => parentRef.current,
|
|
estimateSize: () => 400,
|
|
overscan: 2,
|
|
});
|
|
|
|
const itemsVirtualizer = rowVirtualizer.getVirtualItems();
|
|
|
|
return (
|
|
<div
|
|
ref={parentRef}
|
|
className="scrollbar-hide h-full w-[400px] shrink-0 overflow-y-auto bg-white/10 pb-20"
|
|
>
|
|
<TitleBar id={params.id} title={params.title} />
|
|
<div className="h-full">
|
|
<div className="px-3 pt-1.5">
|
|
<UserProfile pubkey={params.content} />
|
|
</div>
|
|
<div>
|
|
<h3 className="mt-4 px-3 text-lg font-semibold text-white">
|
|
Latest activities
|
|
</h3>
|
|
<div className="flex h-full w-full flex-col justify-between gap-1.5 pb-10">
|
|
{status === 'loading' ? (
|
|
<div className="px-3 py-1.5">
|
|
<div className="rounded-md bg-white/10 px-3 py-3">
|
|
<NoteSkeleton />
|
|
</div>
|
|
</div>
|
|
) : itemsVirtualizer.length === 0 ? (
|
|
<div className="px-3 py-1.5">
|
|
<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 text-white">
|
|
No new posts about this hashtag in 48 hours ago
|
|
</p>
|
|
</div>
|
|
</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)`,
|
|
}}
|
|
>
|
|
{itemsVirtualizer.map((virtualRow) => (
|
|
<div
|
|
key={virtualRow.key}
|
|
data-index={virtualRow.index}
|
|
ref={rowVirtualizer.measureElement}
|
|
>
|
|
<NoteKind_1 event={data[virtualRow.index]} />
|
|
</div>
|
|
))}
|
|
<div className="h-20" />
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|