@swissup/pwa-highlight/lib/talons/HighlightContent/useHighlightContent.js

Highlight integration into venia-ui (pwa-studio)

import { useCallback, useEffect, useState } from 'react';
import { useLazyQuery } from '@apollo/client';

export const useHighlightContent = props => {
    const {
        collectionType,
        pageSize,
        currentPage,
        order,
        dir,
        period,
        queries: {
            getHighlightProductsQuery
        }
    } = props;

    const [getProducts, { data, error: errorMessage }] = useLazyQuery(
        getHighlightProductsQuery
    );

    useEffect(() => {
        if (errorMessage) {
            console.error(errorMessage);
        }
    }, [errorMessage]);

    const [isLoading, setIsLoading] = useState(false);

    useEffect(() => {
        setIsLoading(true);
        getProducts({
            fetchPolicy: 'no-cache',
            variables: {
                collectionType,
                pageSize,
                currentPage,
                order,
                dir,
                period
            }
        });
    }, [
        collectionType,
        pageSize,
        currentPage,
        order,
        dir,
        period,
        getProducts,
        setIsLoading
    ]);


    const [products, setProducts] = useState(
        data && typeof data.getHighlightProducts !== 'undefined' ?
            data.getHighlightProducts.items : []
    );
    // let products = data ? data.getHighlightProducts.items : []/*placeholderItems*/;

    useEffect(() => {
        if (data && typeof data.getHighlightProducts !== 'undefined') {
            setProducts(data.getHighlightProducts.items);
            // products = data.getHighlightProducts.items;
        }
    }, [data, setProducts, products]);

    const [total_pages, setTotalPages] = useState(1);

    useEffect(() => {
        if (data && typeof data.getHighlightProducts !== 'undefined'
            && typeof data.getHighlightProducts.page_info !== 'undefined'
            && typeof data.getHighlightProducts.page_info.total_pages !== 'undefined'
        ) {
            setTotalPages(parseInt(data.getHighlightProducts.page_info.total_pages));
            setIsLoading(false);
        }
    }, [data, setTotalPages, setIsLoading]);


    const [total_count, setTotalCount] = useState(pageSize);

    useEffect(() => {
        if (data && typeof data.getHighlightProducts !== 'undefined'
            && typeof data.getHighlightProducts.total_count !== 'undefined'
        ) {
            setTotalCount(parseInt(data.getHighlightProducts.total_count));
        }
    }, [data, setTotalCount]);

    ////////////////////////////////////////////////////////////////////////////

    return {
        products,
        isLoading,
        page_info: {
            total_pages
        },
        total_count
    };
}