@replyke/core/dist/esm/hooks/comments/useFetchManyCommentsWrapper.js

Replyke: Build interactive apps with social features like comments, votes, feeds, user lists, notifications, and more.

import { useCallback, useEffect, useRef, useState } from "react";
import useFetchManyComments from "./useFetchManyComments";
import { handleError } from "../../utils/handleError";
function useFetchManyCommentsWrapper(props) {
    const { entityId, userId, parentId, sourceId, limit = 10, defaultSortBy = "new", include, } = props;
    const fetchManyComments = useFetchManyComments();
    const loading = useRef(true);
    const [loadingState, setLoadingState] = useState(true);
    const hasMore = useRef(true);
    const [hasMoreState, setHasMoreState] = useState(true);
    const [sortBy, setSortBy] = useState(defaultSortBy);
    const [page, setPage] = useState(1);
    const [comments, setComments] = useState([]);
    const resetComments = useCallback(async () => {
        if (!userId && !entityId && !parentId) {
            return;
        }
        try {
            loading.current = true;
            setLoadingState(true);
            hasMore.current = true;
            setHasMoreState(true);
            setPage(1);
            const response = await fetchManyComments({
                entityId,
                userId,
                parentId,
                sourceId,
                page: 1,
                sortBy,
                limit,
                include,
            });
            if (response) {
                const { data: newComments, pagination } = response;
                setComments(newComments);
                hasMore.current = pagination.hasMore;
                setHasMoreState(pagination.hasMore);
            }
        }
        catch (err) {
            handleError(err, "Failed to reset comments:");
        }
        finally {
            loading.current = false;
            setLoadingState(false);
        }
    }, [
        fetchManyComments,
        limit,
        sortBy,
        entityId,
        userId,
        parentId,
        sourceId,
        include,
    ]);
    const loadMore = () => {
        if (loading.current || !hasMore.current)
            return;
        setPage((prevPage) => {
            return prevPage + 1;
        });
    };
    useEffect(() => {
        resetComments();
    }, [resetComments]);
    // useEffect to get a new batch of comments
    useEffect(() => {
        const loadMoreComments = async () => {
            loading.current = true;
            setLoadingState(true);
            try {
                const response = await fetchManyComments({
                    entityId,
                    userId,
                    parentId,
                    sourceId,
                    page,
                    sortBy,
                    limit,
                    include,
                });
                if (response) {
                    const { data: newComments, pagination } = response;
                    setComments((prevComments) => [...prevComments, ...newComments]);
                    hasMore.current = pagination.hasMore;
                    setHasMoreState(pagination.hasMore);
                }
            }
            catch (err) {
                handleError(err, "Loading more comments failed:");
            }
            finally {
                loading.current = false;
                setLoadingState(false);
            }
        };
        // We only load more if the page changed
        if (page > 1 && hasMore.current && !loading.current) {
            loadMoreComments();
        }
    }, [
        page,
        fetchManyComments,
        entityId,
        userId,
        parentId,
        sourceId,
        sortBy,
        limit,
        include,
    ]);
    return {
        comments,
        loading: loadingState,
        hasMore: hasMoreState,
        sortBy,
        setSortBy,
        loadMore,
    };
}
export default useFetchManyCommentsWrapper;
//# sourceMappingURL=useFetchManyCommentsWrapper.js.map