Build a custom hook that handles loading, error, and success states

type State<T> =
  | { status: "idle" }
  | { status: "loading" }
  | { status: "success"; data: T }
  | { status: "error"; error: Error };

type Action<T> =
  | { type: "start" }
  | { type: "ok"; data: T }
  | { type: "err"; error: Error };

function reducer<T>(_: State<T>, a: Action<T>): State<T> {
  switch (a.type) {
    case "start": return { status: "loading" };
    case "ok":    return { status: "success", data: a.data };
    case "err":   return { status: "error",   error: a.error };
  }
}

export function useFetch<T>(url: string) {
  const [state, dispatch] = useReducer(reducer<T>, { status: "idle" });

  useEffect(() => {
    const ctrl = new AbortController();
    dispatch({ type: "start" });
    fetch(url, { signal: ctrl.signal })
      .then(async (r) => {
        if (!r.ok) throw new Error(`HTTP ${r.status}`);
        return (await r.json()) as T;
      })
      .then((data) => dispatch({ type: "ok", data }))
      .catch((e) => {
        if (e.name === "AbortError") return; // expected on cleanup
        dispatch({ type: "err", error: e });
      });

    return () => ctrl.abort();
  }, [url]);

  return state;
}