46 lines
1.5 KiB
TypeScript
46 lines
1.5 KiB
TypeScript
|
import { useState, useEffect } from "react";
|
||
|
|
import { createMakeRequest } from "../api";
|
||
|
|
import { GetTicketsResponse, GetTicketsRequest } from "../model";
|
||
|
|
import { devlog } from "../utils";
|
||
|
|
|
||
|
|
|
||
|
|
export function useTickets({ makeRequest, url, ticketsPerPage, ticketApiPage, onNewTickets, onError }: {
|
||
|
|
makeRequest: ReturnType<typeof createMakeRequest>;
|
||
|
|
url: string;
|
||
|
|
ticketsPerPage: number;
|
||
|
|
ticketApiPage: number;
|
||
|
|
onNewTickets: (response: GetTicketsResponse) => void;
|
||
|
|
onError: (error: Error) => void;
|
||
|
|
}) {
|
||
|
|
const [fetchState, setFetchState] = useState<"fetching" | "idle" | "all fetched">("idle");
|
||
|
|
|
||
|
|
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) {
|
||
|
|
onNewTickets(result);
|
||
|
|
setFetchState("idle");
|
||
|
|
} else setFetchState("all fetched");
|
||
|
|
}).catch(error => {
|
||
|
|
console.log("Error fetching tickets", error);
|
||
|
|
onError(error);
|
||
|
|
});
|
||
|
|
|
||
|
|
return () => controller.abort();
|
||
|
|
}, [makeRequest, onError, onNewTickets, ticketApiPage, ticketsPerPage, url]);
|
||
|
|
|
||
|
|
return fetchState;
|
||
|
|
}
|