79 lines
2.4 KiB
TypeScript
79 lines
2.4 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; this component only renders
|
|
* the inner scroll column (the Instagram-style feed of full posts).
|
|
*
|
|
* Hash-anchor behaviour: when arriving with `#post-<id>`, we scroll to
|
|
* that post once the feed has loaded. Used by the SharePostSheet flow
|
|
* — share short URL resolves to /u/<handle>/posts#post-<id>, recipient
|
|
* lands here, and we scroll to the post that was actually shared.
|
|
*/
|
|
|
|
import { use, useEffect, useRef, useState } from "react";
|
|
import { notFound } from "next/navigation";
|
|
import { profile, SocialError, type Post } from "@/lib/social";
|
|
import { PostScrollCard } from "@/components/social/post-scroll-card";
|
|
|
|
export function ScrollFeed({
|
|
params,
|
|
}: {
|
|
params: Promise<{ handle: string }>;
|
|
}) {
|
|
const { handle } = use(params);
|
|
const [feed, setFeed] = useState<Post[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [missing, setMissing] = useState(false);
|
|
const scrolledToHashRef = useRef(false);
|
|
|
|
useEffect(() => {
|
|
let cancelled = false;
|
|
setLoading(true);
|
|
profile
|
|
.feed(handle, 60)
|
|
.then((rows) => {
|
|
if (cancelled) return;
|
|
setFeed(rows ?? []);
|
|
})
|
|
.catch((err) => {
|
|
if (err instanceof SocialError && err.status === 404) {
|
|
setMissing(true);
|
|
}
|
|
})
|
|
.finally(() => !cancelled && setLoading(false));
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [handle]);
|
|
|
|
useEffect(() => {
|
|
if (loading || feed.length === 0 || scrolledToHashRef.current) return;
|
|
if (typeof window === "undefined") return;
|
|
const hash = window.location.hash;
|
|
if (!hash) return;
|
|
scrolledToHashRef.current = true;
|
|
requestAnimationFrame(() => {
|
|
const el = document.getElementById(hash.slice(1));
|
|
if (el) el.scrollIntoView({ block: "start", behavior: "auto" });
|
|
});
|
|
}, [loading, feed.length]);
|
|
|
|
if (missing) notFound();
|
|
|
|
return (
|
|
<div className="max-w-xl w-full mx-auto space-y-6">
|
|
{loading ? (
|
|
<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} />)
|
|
)}
|
|
</div>
|
|
);
|
|
}
|