92 lines
2.7 KiB
TypeScript
92 lines
2.7 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* /u/me/collections/[id] — single-collection view.
|
|
*
|
|
* The whole page is the collection's CollectionScrollCard (carousel of
|
|
* cover + posts) and an Edit button below it. All editing — title,
|
|
* description, cover, member posts, delete — lives in the EditCollectionDrawer
|
|
* so the page itself stays focused on the carousel preview.
|
|
*/
|
|
|
|
import { use, useEffect, useState } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import { ArrowLeft } from "lucide-react";
|
|
import {
|
|
collections,
|
|
SocialError,
|
|
type Collection,
|
|
type Post,
|
|
} from "@/lib/social";
|
|
import { CollectionScrollCard } from "@/components/social/collection-scroll-card";
|
|
import { EditCollectionDrawer } from "@/components/social/edit-collection-drawer";
|
|
|
|
export default function CollectionDetailPage(props: {
|
|
params: Promise<{ id: string }>;
|
|
}) {
|
|
const { id } = use(props.params);
|
|
const router = useRouter();
|
|
|
|
const [c, setC] = useState<Collection | null>(null);
|
|
const [posts, setPosts] = useState<Post[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [editOpen, setEditOpen] = useState(false);
|
|
|
|
useEffect(() => {
|
|
let cancelled = false;
|
|
setLoading(true);
|
|
collections
|
|
.get(id)
|
|
.then(({ collection, posts }) => {
|
|
if (cancelled) return;
|
|
setC(collection);
|
|
setPosts(posts ?? []);
|
|
})
|
|
.catch((err) => {
|
|
setError(
|
|
err instanceof SocialError ? err.message : "Could not load collection.",
|
|
);
|
|
})
|
|
.finally(() => !cancelled && setLoading(false));
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [id]);
|
|
|
|
if (loading) return <p className="text-sm text-muted-foreground">Loading…</p>;
|
|
if (error && !c) return <p className="text-sm text-destructive">{error}</p>;
|
|
if (!c) return null;
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<button
|
|
type="button"
|
|
onClick={() => router.push("/u/me/collections")}
|
|
className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground"
|
|
>
|
|
<ArrowLeft className="size-4" /> All collections
|
|
</button>
|
|
|
|
<CollectionScrollCard
|
|
collection={c}
|
|
href={`/u/me/collections/${c.id}`}
|
|
initialPosts={posts}
|
|
onEdit={() => setEditOpen(true)}
|
|
/>
|
|
|
|
<EditCollectionDrawer
|
|
open={editOpen}
|
|
onClose={() => setEditOpen(false)}
|
|
collection={c}
|
|
currentPostIds={posts.map((p) => p.id)}
|
|
onSaved={({ collection, posts: rows }) => {
|
|
setC(collection);
|
|
setPosts(rows);
|
|
}}
|
|
onDeleted={() => router.push("/u/me/collections")}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|