@riosst100/pwa-marketplace 2.3.2 → 2.3.4

package/src/talons/SellerProducts/useProductContent.js

@@ -0,0 +1,194 @@
+import React, { useEffect, useMemo } from 'react';
+import { useLazyQuery, useQuery } from '@apollo/client';
+
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+import { useEventingContext } from '@magento/peregrine/lib/context/eventing';
+
+import DEFAULT_OPERATIONS from './productContent.gql';
+
+export const useProductContent = props => {
+    const { sellerId, data, pageSize = 6 } = props;
+
+    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
+
+    const {
+        getCategoryContentQuery,
+        getProductFiltersByCategoryQuery,
+        getCategoryAvailableSortMethodsQuery,
+        getStoreConfigQuery
+    } = operations;
+
+    const placeholderItems = Array.from({ length: pageSize }).fill(null);
+
+    // console.log(getStoreConfigQuery)
+    
+    const { data: storeConfigData } = useQuery(getStoreConfigQuery, {
+        fetchPolicy: 'cache-and-network'
+    });
+
+    // return '';
+
+    const virtualCategoryFilters = useMemo(() => {
+        if (storeConfigData) {
+            const data = storeConfigData.storeConfig.custommarketplace_plp_filters_virtualcategory;
+            return data ? data.split(',') : [];
+        }
+    }, [storeConfigData]);
+
+    const [getFilters, { data: filterData }] = useLazyQuery(
+        getProductFiltersByCategoryQuery,
+        {
+            fetchPolicy: 'cache-and-network',
+            nextFetchPolicy: 'cache-first'
+        }
+    );
+
+    const [getSortMethods, { data: sortData }] = useLazyQuery(
+        getCategoryAvailableSortMethodsQuery,
+        {
+            fetchPolicy: 'cache-and-network',
+            nextFetchPolicy: 'cache-first'
+        }
+    );
+
+    const { data: categoryData, loading: categoryLoading } = useQuery(
+        getCategoryContentQuery,
+        {
+            fetchPolicy: 'cache-and-network',
+            nextFetchPolicy: 'cache-first',
+            skip: !sellerId,
+            variables: {
+                id: sellerId
+            }
+        }
+    );
+
+    const [, { dispatch }] = useEventingContext();
+
+    useEffect(() => {
+        if (sellerId) {
+            getFilters({
+                variables: {
+                    categoryIdFilter: {
+                        eq: sellerId
+                    }
+                }
+            });
+        }
+    }, [sellerId, getFilters]);
+
+    useEffect(() => {
+        if (sellerId) {
+            getSortMethods({
+                variables: {
+                    categoryIdFilter: {
+                        in: sellerId
+                    }
+                }
+            });
+        }
+    }, [sellerId, getSortMethods]);
+
+    console.log('data')
+    console.log(data)
+
+    const rawFilters = filterData ? filterData.products.aggregations : null;
+    const items = data ? data.items : placeholderItems;
+    const category = null;
+    const children = null;
+    // const category =
+    //     categoryData && categoryData.categories.items.length
+    //         ? categoryData.categories.items[0]
+    //         : null;
+    // const children =
+    //     categoryData && categoryData.categories.items.length
+    //         ? categoryData.categories.items[0].children
+    //         : null;
+
+    const filters = [];
+
+    rawFilters && rawFilters.map((filter, index) => {
+
+        const filterOptions = [];
+        let label = filter.label;
+        if (filter.attribute_code == "category_uid") {
+            children && children.map((category, index) => {
+                filterOptions.push({
+                    'label': category.name,
+                    'value': category.uid,
+                    'path': category.url_path
+                });
+            });
+
+            label = category ? category.name : label;
+        }
+
+        const newFilter = {
+            attribute_code: filter.attribute_code,
+            count: filter.count,
+            label: label,
+            position: filter.position,
+            options: filterOptions.length ? filterOptions : filter.options
+        };
+
+        filters.push(newFilter);
+    });
+
+    const attributesBlock = null;
+    const parent = null;
+    const categoryName = null;
+    const categoryDescription = null;
+    
+    // const attributesBlock = categoryData && categoryData.categories.items.length
+    // ? categoryData.categories.items[0].attributes_block
+    // : null;
+    // const parent =
+    // categoryData && categoryData.categories.items.length
+    //     ? categoryData.categories.items[0].parent
+    //     : null;
+    const totalPagesFromData = data
+        ? data.page_info.total_pages
+        : null;
+    const totalCount = data ? data.total_count : null;
+    
+    // const categoryName =
+    //     categoryData && categoryData.categories.items.length
+    //         ? categoryData.categories.items[0].name
+    //         : null;
+    // const categoryDescription =
+    //     categoryData && categoryData.categories.items.length
+    //         ? categoryData.categories.items[0].description
+    //         : null;
+    const availableSortMethods = sortData
+        ? sortData.products.sort_fields.options
+        : null;
+
+    // useEffect(() => {
+    //     if (!categoryLoading && categoryData.categories.items.length > 0) {
+    //         dispatch({
+    //             type: 'CATEGORY_PAGE_VIEW',
+    //             payload: {
+    //                 id: categoryData.categories.items[0].uid,
+    //                 name: categoryData.categories.items[0].name,
+    //                 url_key: categoryData.categories.items[0].url_key,
+    //                 url_path: categoryData.categories.items[0].url_path
+    //             }
+    //         });
+    //     }
+    // }, [categoryData, dispatch, categoryLoading]);
+
+    return {
+        availableSortMethods,
+        categoryName,
+        categoryDescription,
+        filters,
+        items,
+        totalCount,
+        totalPagesFromData,
+        children,
+        parent,
+        attributesBlock,
+        category,
+        virtualCategoryFilters
+    };
+};

package/src/talons/SellerProducts/useSellerProducts.js

@@ -0,0 +1,264 @@
+import React, { useEffect, useMemo, useRef } from 'react';
+import { useLocation } from 'react-router-dom';
+import { useLazyQuery, useQuery } from '@apollo/client';
+
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+import { useAppContext } from '@magento/peregrine/lib/context/app';
+import { usePagination } from '@magento/peregrine/lib/hooks/usePagination';
+import { useScrollTopOnChange } from '@magento/peregrine/lib/hooks/useScrollTopOnChange';
+import { useSort } from '@magento/peregrine/lib/hooks/useSort';
+import {
+    getFiltersFromSearch,
+    getFilterInput
+} from '@magento/peregrine/lib/talons/FilterModal/helpers';
+
+import DEFAULT_OPERATIONS from './sellerProducts.gql';
+
+export const useSellerProducts = props => {
+    const {
+        sellerId,
+        queries: { getPageSize }
+    } = props;
+
+    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
+    const { getProductsQuery, getFilterInputsQuery, getCategoryDataQuery } = operations;
+
+    const { data: pageSizeData } = useQuery(getPageSize, {
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first'
+    });
+    const pageSize = pageSizeData && pageSizeData.storeConfig.grid_per_page;
+
+    const [paginationValues, paginationApi] = usePagination();
+    const { currentPage, totalPages } = paginationValues;
+    const { setCurrentPage, setTotalPages } = paginationApi;
+
+    const sortProps = useSort({ sortFromSearch: false });
+    const [currentSort] = sortProps;
+    
+    // const { pathname } = useLocation();
+
+    // const pathnameArr = pathname.split('/');
+    // const categoryUrlKey = pathnameArr[pathnameArr.length - 1].replace('.html','');
+
+    // return <><span>useSellerProducts</span></>;
+
+    // Keep track of the sort criteria so we can tell when they change.
+    const previousSort = useRef(currentSort);
+
+    const pageControl = {
+        currentPage,
+        setPage: setCurrentPage,
+        totalPages
+    };
+
+    const [
+        ,
+        {
+            actions: { setPageLoading }
+        }
+    ] = useAppContext();
+
+    const [runQuery, queryResponse] = useLazyQuery(getProductsQuery, {
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first'
+    });
+
+    const [runGetCategoriesQuery, queryGetCategoriesResponse] = useLazyQuery(getCategoryDataQuery, {
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first'
+    });
+
+    const {
+        called: productCalled,
+        loading: productLoading,
+        error,
+        data
+    } = queryResponse;
+
+    console.log('===data===')
+    console.log(data)
+    console.log('======')
+
+    const {
+        called: categoryCalled,
+        loading: categoryLoading,
+        error: categoryError,
+        data: categoryData
+    } = queryGetCategoriesResponse;
+
+    const { search } = useLocation();
+
+    const isBackgroundLoading = !!data && productLoading;
+
+    // Update the page indicator if the GraphQL query is in flight.
+    useEffect(() => {
+        setPageLoading(isBackgroundLoading);
+    }, [isBackgroundLoading, setPageLoading]);
+
+    // Keep track of the search terms so we can tell when they change.
+    const previousSearch = useRef(search);
+
+    // Get "allowed" filters by intersection of schema and aggregations
+    const {
+        called: introspectionCalled,
+        data: introspectionData,
+        loading: introspectionLoading
+    } = useQuery(getFilterInputsQuery);
+
+    // const {
+    //     data: categoryData
+    // } = useQuery(getCategoryDataQuery);
+
+    useEffect(() => {
+        // const filters = getFiltersFromSearch(search);
+
+        // Construct the filter arg object.
+        const newFilters = {};
+        newFilters['url_key'] = { eq: "lego" };
+
+        runGetCategoriesQuery({
+            variables: {
+                currentPage: Number(1),
+                filters: newFilters,
+                pageSize: Number(1)
+            }
+        });
+    }, [
+        runGetCategoriesQuery,
+        search
+    ]);
+
+    const categoryId = useMemo(() => {
+        let uid = null;
+        if (categoryData) {
+            uid = categoryData.categories.items[0].id;
+        }
+        return uid;
+    }, [categoryData]);
+
+    
+
+    // Create a type map we can reference later to ensure we pass valid args
+    // to the graphql query.
+    // For example: { category_id: 'FilterEqualTypeInput', price: 'FilterRangeTypeInput' }
+    const filterTypeMap = useMemo(() => {
+        const typeMap = new Map();
+        if (introspectionData) {
+            introspectionData.__type.inputFields.forEach(({ name, type }) => {
+                typeMap.set(name, type.name);
+            });
+        }
+        return typeMap;
+    }, [introspectionData]);
+
+    // Run the category query immediately and whenever its variable values change.
+    useEffect(() => {
+        console.log('=categoryData=')
+        console.log(categoryData)
+        if (!categoryData) {
+            return;
+        }
+        // Wait until we have the type map to fetch product data.
+        if (!filterTypeMap.size || !pageSize) {
+            return;
+        }
+
+        const filters = getFiltersFromSearch(search);
+
+        // Construct the filter arg object.
+        const newFilters = {};
+        filters.forEach((values, key) => {
+            newFilters[key] = getFilterInput(values, filterTypeMap.get(key));
+        });
+
+        // Use the category uid for the current category page regardless of the
+        // applied filters. Follow-up in PWA-404.
+        if (categoryId) {
+            newFilters['category_id'] = { eq: categoryId };
+        }
+
+        runQuery({
+            variables: {
+                currentPage: Number(currentPage),
+                sellerId: sellerId,
+                filter: newFilters,
+                pageSize: Number(pageSize),
+                sort: { [currentSort.sortAttribute]: currentSort.sortDirection }
+            }
+        });
+    }, [
+        currentPage,
+        currentSort,
+        filterTypeMap,
+        categoryId,
+        pageSize,
+        runQuery,
+        search,
+        categoryData
+    ]);
+
+    const totalPagesFromData = data
+        ? data.productsBySellerId.page_info.total_pages
+        : null;
+
+    useEffect(() => {
+        setTotalPages(totalPagesFromData);
+        return () => {
+            setTotalPages(null);
+        };
+    }, [setTotalPages, totalPagesFromData]);
+
+    // If we get an error after loading we should try to reset to page 1.
+    // If we continue to have errors after that, render an error message.
+    useEffect(() => {
+        if (error && !productLoading && !data && currentPage !== 1) {
+            setCurrentPage(1);
+        }
+    }, [currentPage, error, productLoading, setCurrentPage, data]);
+
+    // Reset the current page back to one (1) when the search string, filters
+    // or sort criteria change.
+    useEffect(() => {
+        // We don't want to compare page value.
+        const prevSearch = new URLSearchParams(previousSearch.current);
+        const nextSearch = new URLSearchParams(search);
+        prevSearch.delete('page');
+        nextSearch.delete('page');
+
+        if (
+            prevSearch.toString() !== nextSearch.toString() ||
+            previousSort.current.sortAttribute.toString() !==
+                currentSort.sortAttribute.toString() ||
+            previousSort.current.sortDirection.toString() !==
+                currentSort.sortDirection.toString()
+        ) {
+            // The search term changed.
+            setCurrentPage(1, true);
+            // And update the ref.
+            previousSearch.current = search;
+            previousSort.current = currentSort;
+        }
+    }, [currentSort, previousSearch, search, setCurrentPage]);
+
+    const productData = productLoading && !data ? null : data;
+    const categoryNotFound = false;
+
+    // When only productLoading is involved, noProductsFound component flashes for a moment
+    const loading =
+        (introspectionCalled && !categoryCalled) ||
+        (productLoading && !data) ||
+        introspectionLoading;
+
+    useScrollTopOnChange(currentPage);
+
+    return {
+        error,
+        productData,
+        loading,
+        pageControl,
+        sortProps,
+        pageSize,
+        categoryNotFound
+    };
+};