UIKit/lib/hooks/useTicketMessages.ts
2023-08-29 14:16:10 +03:00

59 lines
2.1 KiB
TypeScript

import { useEffect, useRef, useLayoutEffect } from "react";
import { TicketMessage, GetMessagesRequest, GetMessagesResponse } from "../model";
import { devlog } from "../utils";
import { makeRequest } from "../api";
import { FetchState } from "../model/fetchState";
export function useTicketMessages({ url, messageApiPage, messagesPerPage, ticketId, isUnauth = false, onSuccess, onError, onFetchStateChange }: {
url: string;
ticketId: string | undefined;
messagesPerPage: number;
messageApiPage: number;
isUnauth?: boolean;
onSuccess: (messages: TicketMessage[]) => void;
onError?: (error: Error) => void;
onFetchStateChange?: (state: FetchState) => void;
}) {
const onNewMessagesRef = useRef(onSuccess);
const onErrorRef = useRef(onError);
const onFetchStateChangeRef = useRef(onFetchStateChange);
useLayoutEffect(() => {
onNewMessagesRef.current = onSuccess;
onErrorRef.current = onError;
onFetchStateChangeRef.current = onFetchStateChange;
}, [onSuccess, onError, onFetchStateChange]);
useEffect(function fetchTicketMessages() {
if (!ticketId) return;
const controller = new AbortController();
onFetchStateChangeRef.current?.("fetching");
makeRequest<GetMessagesRequest, GetMessagesResponse>({
url,
method: "POST",
useToken: !isUnauth,
body: {
amt: messagesPerPage,
page: messageApiPage,
ticket: ticketId,
},
signal: controller.signal,
withCredentials: isUnauth,
}).then(result => {
devlog("GetMessagesResponse", result);
if (result?.length > 0) {
onNewMessagesRef.current(result);
onFetchStateChangeRef.current?.("idle");
} else onFetchStateChangeRef.current?.("all fetched");
}).catch(error => {
devlog("Error fetching messages", error);
onErrorRef.current?.(error);
});
return () => controller.abort();
}, [isUnauth, messageApiPage, messagesPerPage, ticketId, url]);
}