UIKit/lib/hooks/useTickets.ts

import { useState, useEffect, useRef, useLayoutEffect } from "react";
import { GetTicketsResponse, GetTicketsRequest } from "../model";
import { devlog } from "../utils";
import { makeRequest } from "../api";


export function useTickets({ url, ticketsPerPage, ticketApiPage, onNewTickets, onError }: {
    url: string;
    ticketsPerPage: number;
    ticketApiPage: number;
    onNewTickets: (response: GetTicketsResponse) => void;
    onError: (error: Error) => void;
}) {
    const [fetchState, setFetchState] = useState<"fetching" | "idle" | "all fetched">("idle");
    const onNewTicketsRef = useRef(onNewTickets);
    const onErrorRef = useRef(onError);

    useLayoutEffect(() => {
        onNewTicketsRef.current = onNewTickets;
        onErrorRef.current = onError;
    }, [onNewTickets, onError]);

    useEffect(function fetchTickets() {
        const controller = new AbortController();

        setFetchState("fetching");
        makeRequest<GetTicketsRequest, GetTicketsResponse>({
            url,
            method: "POST",
            useToken: true,
            body: {
                amt: ticketsPerPage,
                page: ticketApiPage,
                status: "open",
            },
            signal: controller.signal,
        }).then((result) => {
            devlog("GetTicketsResponse", result);
            if (result.data) {
                onNewTicketsRef.current(result);
                setFetchState("idle");
            } else setFetchState("all fetched");
        }).catch(error => {
            devlog("Error fetching tickets", error);
            onErrorRef.current(error);
        });

        return () => controller.abort();
    }, [ticketApiPage, ticketsPerPage, url]);

    return fetchState;
}