app/components/admin/use-media-search.ts

Functions

Imports

It imports app/lib/error-message.mjs. Imported by app/components/admin/media-palette.tsx.

Source

1import { useEffect, useRef, useState } from "react";
2
3import { errorMessage } from "~/lib/error-message.mjs";
4
5type PalettePayload = { results: PaletteResult[]; hasMore: boolean };
6
7export type PaletteResult = {
8  key: string;
9  url: string;
10  name: string;
11  dir: string;
12  size: number;
13  viewable: boolean;
14};
15
16/**
17 * The palette's search: debounced, and sequenced, because a slow response to a shorter query can
18 * land after a fast one and replace the right answer. `setCursor(0)` runs when fresh results land.
19 */
20export function useMediaSearch(query: string, setCursor: (cursor: number) => void) {
21  const [results, setResults] = useState<PaletteResult[]>([]);
22  const [hasMore, setHasMore] = useState(false);
23  /* A failed search is said as one; an empty list would read as "nothing matches". */
24  const [searchError, setSearchError] = useState<string | null>(null);
25  const seq = useRef(0);
26
27  useEffect(() => {
28    const trimmed = query.trim();
29    if (!trimmed) {
30      setResults([]);
31      setHasMore(false);
32      setSearchError(null);
33      return;
34    }
35    const id = (seq.current += 1);
36    const timer = window.setTimeout(() => {
37      // Answered as JSON by the route's middleware; anything else (an expired session's page) is a failure.
38      fetch(`/admin/media?palette=1&q=${encodeURIComponent(trimmed)}`, {
39        headers: { accept: "application/json" },
40      })
41        .then((r) => {
42          if (!r.ok) throw new Error(`HTTP ${r.status}`);
43          if (!(r.headers.get("content-type") ?? "").includes("application/json")) {
44            throw new Error("the server did not answer with results");
45          }
46          return r.json() as Promise<PalettePayload>;
47        })
48        .then((data) => {
49          if (id !== seq.current) return;
50          setSearchError(null);
51          setResults(data.results ?? []);
52          setHasMore(Boolean(data.hasMore));
53          setCursor(0);
54        })
55        .catch((error: unknown) => {
56          if (id !== seq.current) return;
57          setResults([]);
58          setHasMore(false);
59          setSearchError(errorMessage(error));
60        });
61    }, 130);
62    return () => window.clearTimeout(timer);
63  }, [query, setCursor]);
64
65  return { results, hasMore, searchError };
66}