77 lines
2.4 KiB
TypeScript
77 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* /u/[handle]/posts — public Instagram-style scroll feed.
|
|
*
|
|
* Mirrors /u/me/posts but read-only (no Delete / Update background). The
|
|
* grid thumbnail on /u/[handle] links here with a `#post-<id>` hash so
|
|
* the feed scrolls to the tapped post on mount.
|
|
*
|
|
* The parent /u/[handle]/layout owns the ProfileHeader + tab strip + the
|
|
* outer max-w-3xl container, so this page only needs the inner scroll
|
|
* column. The max-w-xl cap matches /u/me/posts so the column reads at
|
|
* the same width on desktop; on mobile both pages fall back to viewport
|
|
* width with the layout-supplied gutters.
|
|
*/
|
|
|
|
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 default function PublicPostsFeedPage(props: {
|
|
params: Promise<{ handle: string }>;
|
|
}) {
|
|
const { handle } = use(props.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>
|
|
);
|
|
}
|