Use Collection Projects

1// One collection's header + its projects, by slug. SSR-friendly: pass both `initial*` and no
2// client fetch happens. `notFound` is the real not-found signal (collection stays null while
3// loading too) — route a 404 off it, never off a transient null.
4import { useEffect, useState } from "react";
5import { fetchCollectionBySlug, fetchProjects } from "../../wix/portfolio/portfolio";
6import type { CollectionSummary, ProjectSummary } from "../../wix/portfolio/types";
7
8export interface UseCollectionProjectsOptions {
9  initialCollection?: CollectionSummary;
10  initialProjects?: ProjectSummary[];
11}
12
13export interface UseCollectionProjects {
14  /** null while loading AND when not found — check `notFound` to tell them apart. */
15  collection: CollectionSummary | null;
16  notFound: boolean;
17  /** null while the first load is in flight — render skeletons, not an empty state. */
18  projects: ProjectSummary[] | null;
19  error: string | null;
20}
21
22export function useCollectionProjects(
23  slug: string,
24  { initialCollection, initialProjects }: UseCollectionProjectsOptions = {},
25): UseCollectionProjects {
26  const [collection, setCollection] = useState<CollectionSummary | null>(initialCollection ?? null);
27  const [notFound, setNotFound] = useState(false);
28  const [projects, setProjects] = useState<ProjectSummary[] | null>(initialProjects ?? null);
29  const [error, setError] = useState<string | null>(null);
30
31  useEffect(() => {
32    if (initialCollection && initialProjects) return;
33    let alive = true;
34    (async () => {
35      try {
36        const col = initialCollection ?? (await fetchCollectionBySlug(slug));
37        if (!alive) return;
38        if (!col) {
39          setNotFound(true);
40          setProjects([]);
41          return;
42        }
43        setCollection(col);
44        const projs = await fetchProjects({ collectionId: col.id });
45        if (alive) setProjects(projs);
46      } catch (e) {
47        if (!alive) return;
48        setProjects([]);
49        setError(e instanceof Error ? e.message : String(e));
50      }
51    })();
52    return () => {
53      alive = false;
54    };
55    // eslint-disable-next-line react-hooks/exhaustive-deps
56  }, [slug]);
57
58  return { collection, notFound, projects, error };
59}