UIKit/lib/hooks/useTicketMessages.ts

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]);
}