@jetshop/core/hooks/useInfinitePagination.js

import { useCallback, useContext, useEffect, useReducer, useMemo, useRef } from 'react';
import PaginationContext from '@jetshop/core/components/Pagination/PaginationContext';
import { useApolloClient } from 'react-apollo';
import get from 'lodash.get';
function getProductsFromPreviousPages(products, client, query, variables) {
    const nextVariables = Object.assign(Object.assign({}, variables), { offset: variables.offset - variables.first });
    try {
        const res = client.readQuery({
            query,
            variables: nextVariables
        });
        return getProductsFromPreviousPages(res.route.object.products.result.concat(products), client, query, nextVariables);
    }
    catch (e) {
        return { prevOffset: nextVariables.offset, products };
    }
}
function getProductsFromNextPages(products, client, query, variables) {
    const nextVariables = Object.assign(Object.assign({}, variables), { offset: variables.offset + variables.first });
    try {
        const res = client.readQuery({
            query,
            variables: nextVariables
        });
        return getProductsFromNextPages(products.concat(res.route.object.products.result), client, query, nextVariables);
    }
    catch (e) {
        return { nextOffset: nextVariables.offset, products };
    }
}
function getAdjacentProducts(products, client, query, variables) {
    const { prevOffset, products: prevProducts } = getProductsFromPreviousPages(products, client, query, variables);
    const { nextOffset, products: allProducts } = getProductsFromNextPages(prevProducts, client, query, variables);
    return {
        prevOffset,
        nextOffset,
        products: allProducts
    };
}
const initialState = {
    previous: false,
    next: false
};
function reducer(state, action) {
    switch (action.type) {
        case 'SUCCESS':
        case 'ERROR':
            return Object.assign(Object.assign({}, state), { [action.payload]: false });
        case 'FETCHING':
            return Object.assign(Object.assign({}, state), { [action.payload]: true });
        default:
            return state;
    }
}
const useInfinitePagination = ({ result, query }) => {
    const category = get(result, 'data.route.object', {});
    const [loading, dispatch] = useReducer(reducer, initialState);
    const { perPage, offset, goToPage } = useContext(PaginationContext);
    const totalResults = get(category, 'products.totalResults', 0);
    const client = useApolloClient();
    // When load more is clicked, the new offset for the query is changed
    const fetchProductsByOffset = useCallback(newOffset => {
        const payload = newOffset < offset ? 'previous' : 'next';
        dispatch({
            type: 'FETCHING',
            payload
        });
        client
            .query({
            query,
            variables: Object.assign(Object.assign({}, result.variables), { offset: newOffset }),
            errorPolicy: 'all',
            fetchPolicy: 'network-only'
        })
            .then(() => dispatch({
            type: 'SUCCESS',
            payload
        }), () => dispatch({
            type: 'ERROR',
            payload
        }));
    }, [offset, client, result, query]);
    // If entered page number is too big, this navigate to the highest page number
    useEffect(() => {
        if (totalResults > 0 && totalResults < offset) {
            const lastPage = Math.ceil(totalResults / perPage);
            goToPage(lastPage);
        }
    }, [totalResults, perPage, offset, goToPage]);
    const { prevOffset, nextOffset, products } = getAdjacentProducts(get(category, 'products.result', []), client, query, Object.assign(Object.assign({}, result.variables), { offset }));
    // getAdjacentProducts will always return a new array, since we concatenate multiple queries
    // To avoid unnecessary re-renders, we memoize this in a ref
    const prevProducts = useRef([]);
    const memoizedProducts = useMemo(() => {
        const productsLength = products.length;
        if (productsLength === prevProducts.current.length) {
            let hasMismatch = false;
            for (let i = 0; i < productsLength; i++) {
                if (products[i] !== prevProducts.current[i]) {
                    hasMismatch = true;
                    break;
                }
            }
            if (!hasMismatch) {
                return prevProducts.current;
            }
        }
        prevProducts.current = products;
        return prevProducts.current;
    }, [products]);
    return {
        previous: {
            loadingProducts: loading.previous,
            hasProducts: prevOffset >= 0,
            fetchProducts: () => fetchProductsByOffset(prevOffset),
            offset: prevOffset,
            page: prevOffset / perPage + 1
        },
        next: {
            loadingProducts: loading.next,
            hasProducts: nextOffset <= totalResults,
            fetchProducts: () => fetchProductsByOffset(nextOffset),
            offset: nextOffset,
            page: nextOffset / perPage
        },
        products: memoizedProducts
    };
};
export default useInfinitePagination;
//# sourceMappingURL=useInfinitePagination.js.map