UIKit/lib/hooks/useTicketMessages.ts

import { useState, useEffect, useRef, useLayoutEffect } from "react";
import { TicketMessage, GetMessagesRequest, GetMessagesResponse } from "../model";
import { devlog } from "../utils";
import { makeRequest } from "../api";


export function useTicketMessages({ url, messageApiPage, messagesPerPage, ticketId, onNewMessages, onError, isUnauth = false }: {
    url: string;
    ticketId: string | undefined;
    messagesPerPage: number;
    messageApiPage: number;
    onNewMessages: (messages: TicketMessage[]) => void;
    onError?: (error: Error) => void;
    isUnauth?: boolean;
}) {
    const [fetchState, setFetchState] = useState<"fetching" | "idle" | "all fetched">("idle");
    const onNewMessagesRef = useRef(onNewMessages);
    const onErrorRef = useRef(onError);

    useLayoutEffect(() => {
        onNewMessagesRef.current = onNewMessages;
        onErrorRef.current = onError;
    }, [onNewMessages, onError]);

    useEffect(function fetchTicketMessages() {
        if (!ticketId) return;

        const controller = new AbortController();

        setFetchState("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);
                setFetchState("idle");
            } else setFetchState("all fetched");
        }).catch(error => {
            devlog("Error fetching messages", error);
            onErrorRef.current?.(error);
        });

        return () => controller.abort();
    }, [isUnauth, messageApiPage, messagesPerPage, ticketId, url]);

    return fetchState;
}