Files
spsays-training/app/(app)/u/[handle]/posts-grid.tsx
T

46 lines
1.5 KiB
TypeScript

"use client";
/**
* PostsGrid — client-side body for /u/[handle] (Posts tab).
*
* Split out from page.tsx so the page itself can be a server component that
* exports `generateMetadata` for the public-profile OG card. The
* /u/[handle]/layout.tsx still owns ProfileHeader + tab strip + the outer
* container (and 404s unknown handles); this just renders the post grid.
*
* Window-virtualised, infinite-scroll 2-up grid (usePostScrollFeed keyset-pages
* the user's posts). Tapping a thumbnail jumps to /u/[handle]/posts#post-<id>
* where the scroll feed shows the full passages.
*/
import { use } from "react";
import { profile } from "@/lib/social";
import { VirtualPostGrid } from "@/components/social/post/virtual-post-grid";
import { usePostScrollFeed } from "@/components/social/post/use-post-scroll-feed";
import { usePublicProfile } from "./profile-context";
export function PostsGrid({
params,
}: {
params: Promise<{ handle: string }>;
}) {
const { handle } = use(params);
const data = usePublicProfile();
const { feed, loading, hasMore, sentinelRef } = usePostScrollFeed(
(before, limit) =>
profile.feed(handle, { limit, before: before ?? undefined }),
24,
);
return (
<VirtualPostGrid
posts={feed}
loading={loading}
hasMore={hasMore}
sentinelRef={sentinelRef}
hrefFor={(p) => `/u/${data.handle}/posts#post-${p.id}`}
emptyMessage="No posts yet — quotes shared by this user will appear here."
/>
);
}