61 lines
2.2 KiB
TypeScript
61 lines
2.2 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* ScrollFeed — client body for /u/[handle]/posts (public scroll feed).
|
|
*
|
|
* Split out from page.tsx so the page itself can be a server component
|
|
* exporting `generateMetadata` for the OG card. The layout owns the
|
|
* ProfileHeader + tabs + outer container (and 404s for unknown handles);
|
|
* this component only renders the inner scroll column.
|
|
*
|
|
* Anchor-first + keyset infinite scroll via usePostScrollFeed: arriving with
|
|
* `#post-<id>` (from a grid thumbnail or a shared link) fetches that post
|
|
* directly so it lands at the top instantly — even for very old posts — then
|
|
* pages older posts beneath it as you scroll.
|
|
*/
|
|
|
|
import { use } from "react";
|
|
import { Loader2 } from "lucide-react";
|
|
import { profile, type Post } from "@/lib/social";
|
|
import { PostScrollCard } from "@/components/social/post/post-scroll-card";
|
|
import { usePostScrollFeed } from "@/components/social/post/use-post-scroll-feed";
|
|
|
|
export function ScrollFeed({
|
|
params,
|
|
}: {
|
|
params: Promise<{ handle: string }>;
|
|
}) {
|
|
const { handle } = use(params);
|
|
const { feed, setFeed, loading, hasMore, sentinelRef } = usePostScrollFeed(
|
|
(before, limit) =>
|
|
profile.feed(handle, { limit, before: before ?? undefined }),
|
|
);
|
|
|
|
// When the owner views their own profile here and hides a post, drop it
|
|
// from the feed immediately (it moves to their Hidden tab). No-op for
|
|
// other viewers, who never see the Hide control.
|
|
function onHiddenChange(id: string, hidden: boolean) {
|
|
if (hidden) setFeed((rows: Post[]) => rows.filter((p) => p.id !== id));
|
|
}
|
|
|
|
return (
|
|
<div className="max-w-xl w-full mx-auto space-y-6">
|
|
{loading && feed.length === 0 ? (
|
|
<p className="text-sm text-muted-foreground">Loading…</p>
|
|
) : feed.length === 0 ? (
|
|
<p className="text-sm text-muted-foreground">No posts yet.</p>
|
|
) : (
|
|
feed.map((p) => (
|
|
<PostScrollCard key={p.id} post={p} onHiddenChange={onHiddenChange} />
|
|
))
|
|
)}
|
|
|
|
{hasMore && feed.length > 0 ? (
|
|
<div ref={sentinelRef} className="flex justify-center py-6">
|
|
<Loader2 className="size-5 animate-spin text-muted-foreground" />
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|