react-firehooks/lib/internal/useMultiLoadingValue.js

Lightweight dependency-free collection of React hooks for Firebase

import { useCallback, useEffect, useMemo, useState } from "react";
const DEFAULT_STATE = {
    error: undefined,
    loading: true,
    value: undefined,
};
/**
 * @internal
 */
export function useMultiLoadingValue(size) {
    const [states, setState] = useState(() => Array.from({ length: size }).map(() => DEFAULT_STATE));
    const setValue = useCallback((index, value) => {
        setState((curStates) => curStates.map((state, stateIndex) => stateIndex === index
            ? {
                value: value,
                loading: false,
                error: undefined,
            }
            : state));
    }, []);
    const setLoading = useCallback((index) => {
        setState((curStates) => curStates.map((state, stateIndex) => stateIndex === index
            ? {
                value: undefined,
                loading: true,
                error: undefined,
            }
            : state));
    }, []);
    const setError = useCallback((index, error) => {
        setState((curStates) => curStates.map((state, stateIndex) => stateIndex === index
            ? {
                value: undefined,
                loading: false,
                error,
            }
            : state));
    }, []);
    useEffect(() => {
        if (states.length === size) {
            return;
        }
        setState((curStates) => {
            if (curStates.length > size) {
                return curStates.slice(0, size);
            }
            else if (curStates.length < size) {
                return [...curStates, ...Array.from({ length: size - curStates.length }).map(() => DEFAULT_STATE)];
                /* c8 ignore next 3 */
            }
            else {
                return curStates;
            }
        });
    }, [size, states.length]);
    return useMemo(() => ({ states, setValue, setLoading, setError }), [states, setValue, setLoading, setError]);
}