@riosst100/pwa-marketplace 1.7.5 → 1.7.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@riosst100/pwa-marketplace",
   "author": "riosst100@gmail.com",
-  "version": "1.7.5",
+  "version": "1.7.6",
   "main": "src/index.js",
   "pwa-studio": {
     "targets": {

package/src/components/ShopBy/shopBy.js

@@ -107,7 +107,7 @@ const ShopBy = props => {
 
     const talonProps = useShopBy({ searchQuery, setActive, currentSort, categoryId, shopby });
 
-    const { error, loading, dataResult, categoryUrlSuffix, categoryUrlKey, productType, filteredAvailableGroups, availableGroups, attributeData, alpha, category } = talonProps;
+    const { error, loading, dataResult, categoryUrlSuffix, categoryUrlKey, productType, filteredAvailableGroups, availableGroups, attributeData, alpha, category, activeFilters } = talonProps;
 
     if (loading && !dataResult)
         return <ShopByShimmer />;
@@ -190,10 +190,12 @@ const ShopBy = props => {
         }
     ];
 
+    console.log(activeFilters)
+
     return (
         <Fragment>
             <StoreTitle>{attributeData ? 'By ' + attributeData.label : 'Shop By'}</StoreTitle>
-            <Breadcrumbs categoryId={categoryId} customPage={'By ' + attributeData.label} />
+            <Breadcrumbs categoryId={categoryId} customPage={'By ' + attributeData.label} currentFilter={activeFilters} />
             <h1 className='mx-auto relative block text-xl font-bold text-center pt-10 pb-4'>
                 {attributeData ? 'By ' + attributeData.label : 'Shop By'}
             </h1>

package/src/overwrites/venia-ui/lib/components/Breadcrumbs/breadcrumbs.js

@@ -70,23 +70,30 @@ const Breadcrumbs = props => {
         );
     }
 
+    // console.log(currentFilter)
+
     const filterBreadcrumbsElement = [];
     
     currentFilter && currentFilter.length && currentFilter.map((filter, index) => {
         currentProduct ? (
             filterBreadcrumbsElement.push(
+                <>
+                <span className={classes.divider}>{DELIMITER}</span>
                 <Link
                     key={index}
                     className={classes.link}
-                    to={resourceUrl(currentCategoryPath)}
+                    to={filter.path}
                     onClick={handleClick}
                 >
                     {filter.label}
                 </Link>
+                </>
             )
         ) : (
             customPage ? (
                 filterBreadcrumbsElement.push(
+                    <>
+                    <span className={classes.divider}>{DELIMITER}</span>
                     <Link
                         key={index}
                         className={classes.link}
@@ -95,6 +102,7 @@ const Breadcrumbs = props => {
                     >
                         {filter.label}
                     </Link>
+                    </>
                 )
             ) : filterBreadcrumbsElement.push(
                 <span key={index}>

package/src/talons/ShopBy/shopBy.gql.js

@@ -12,8 +12,8 @@ export const GET_STORE_CONFIG_DATA = gql`
 `;
 
 export const GET_SHOP_BY_DATA_QUERY = gql`
-    query getShopByData($categoryUrlKey: String!, $attributeCode: String) {
-        shopByData(categoryUrlKey: $categoryUrlKey, attributeCode: $attributeCode) {
+    query getShopByData($categoryUrlKey: String!, $attributeCode: String, $filters: ProductAttributeFilterInput!) {
+        shopByData(categoryUrlKey: $categoryUrlKey, attributeCode: $attributeCode, filters: $filters) {
             label
             count
             attribute_code
@@ -40,8 +40,22 @@ export const GET_CATEGORY_CONTENT = gql`
     }
 `;
 
+export const GET_FILTER_INPUTS = gql`
+    query GetFilterInputsForCategory {
+        __type(name: "ProductAttributeFilterInput") {
+            inputFields {
+                name
+                type {
+                    name
+                }
+            }
+        }
+    }
+`;
+
 export default {
     getStoreConfigData: GET_STORE_CONFIG_DATA,
     getShopByDataQuery: GET_SHOP_BY_DATA_QUERY,
-    getCategoryContentQuery: GET_CATEGORY_CONTENT
+    getCategoryContentQuery: GET_CATEGORY_CONTENT,
+    getFilterInputsQuery: GET_FILTER_INPUTS,
 };

package/src/talons/ShopBy/useShopBy.js

@@ -1,10 +1,11 @@
-import { useQuery } from '@apollo/client';
+import { useQuery, useLazyQuery } from '@apollo/client';
 import { useEffect, useMemo } from 'react';
 import { useLocation } from 'react-router-dom';
 import { useAppContext } from '@magento/peregrine/lib/context/app';
 
 import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
 import DEFAULT_OPERATIONS from './shopBy.gql';
+import { getFilterInput, getFiltersFromSearch } from '@magento/peregrine/lib/talons/FilterModal/helpers';
 
 export const useShopBy = props => {
 
@@ -13,8 +14,8 @@ export const useShopBy = props => {
     const { value: sortby } = currentSort
 
     const operations = mergeOperations(DEFAULT_OPERATIONS, null);
-    const { getStoreConfigData, getShopByDataQuery, getCategoryContentQuery } = operations;
-    const { pathname } = useLocation();
+    const { getStoreConfigData, getShopByDataQuery, getCategoryContentQuery, getFilterInputsQuery } = operations;
+    const { pathname, search } = useLocation();
     // const [
     //     ,
     //     {
@@ -22,6 +23,11 @@ export const useShopBy = props => {
     //     }
     // ] = useAppContext();
 
+    const [runQuery, queryResponse] = useLazyQuery(getShopByDataQuery, {
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first'
+    });
+
     const { data: storeConfigData } = useQuery(getStoreConfigData, {
         fetchPolicy: 'cache-and-network',
         nextFetchPolicy: 'cache-first'
@@ -33,26 +39,97 @@ export const useShopBy = props => {
     
     const categoryUrlSuffix = storeConfigData?.storeConfig?.category_url_suffix;
 
-    const { error, loading, data } = useQuery(getShopByDataQuery, {
-        fetchPolicy: 'cache-and-network',
-        nextFetchPolicy: 'cache-first',
-        skip: !storeConfigData,
-        variables: {
-            categoryUrlKey: categoryUrlKey,
-            attributeCode: shopby
+    const { data: introspectionData } = useQuery(getFilterInputsQuery);
+
+    const filterTypeMap = useMemo(() => {
+        const typeMap = new Map();
+        if (introspectionData) {
+            introspectionData.__type.inputFields.forEach(({ name, type }) => {
+                typeMap.set(name, type.name);
+            });
+        }
+        return typeMap;
+    }, [introspectionData]);
+
+    const activeFilters = [];
+
+    // if (!filterTypeMap.size) {
+    //     return;
+    // }
+
+    const filters = getFiltersFromSearch(search);
+
+    console.log(search)
+
+    // Construct the filter arg object.
+    const newFilters = {};
+    filters.forEach((values, key) => {
+        newFilters[key] = getFilterInput(values, filterTypeMap.get(key));
+// console.log(key)
+// console.log(values)
+        
+        if (key == "sc_baseball_release") {
+            for(let item of values) {
+                if(item) {
+                    // console.log(item.split(',')[0])
+                    const data = search.split('&');
+                    data.pop();
+                    activeFilters.push(
+                        {
+                            'label': item.split(',')[0],
+                            'path': data
+                        }
+                    )
+                }   
+            }
         }
     });
 
+    useEffect(() => {
+
+        
+
+        // Use the category uid for the current category page regardless of the
+        // applied filters. Follow-up in PWA-404.
+        // newFilters['category_uid'] = { eq: id };
+
+        runQuery({
+            variables: {
+                filters: newFilters,
+                categoryUrlKey: categoryUrlKey,
+                attributeCode: shopby
+            }
+        });
+    }, [
+        runQuery,
+        // filterTypeMap,
+        // search
+    ]);
+
+    // console.log(activeFilters)
+
+    
+
+    // const { error, loading, data } = useQuery(getShopByDataQuery, {
+    //     fetchPolicy: 'cache-and-network',
+    //     nextFetchPolicy: 'cache-first',
+    //     skip: !storeConfigData,
+    //     variables: {
+    //         categoryUrlKey: categoryUrlKey,
+    //         attributeCode: shopby
+    //     }
+    // });
+
     const alpha = ['#', 'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
 
-    // const isBackgroundLoading = !!data && loading;
+    // const isBackgroundLoading = !!queryResponse && loading;
 
     const originalDataResult = useMemo(() => {
-        if (!data) {
+        if (!queryResponse) {
             return null;
         }
         
-        const rawData = data.shopByData;
+        const rawData = queryResponse?.data?.shopByData;
         if (!rawData) {
             return null;
         }
@@ -72,14 +149,14 @@ export const useShopBy = props => {
         const sortbyData = [];
 
         return sortby != "all" ? sortbyData && sortbyData.length ? sortbyData.sort((a, b) => b.release_type.toLowerCase().localeCompare(a.release_type.toLowerCase())) : sortbyData : mappingData;
-    }, [data, sortby, searchQuery]);
+    }, [queryResponse, sortby, searchQuery]);
 
     const dataResult = useMemo(() => {
-        if (!data) {
+        if (!queryResponse) {
             return null;
         }
         
-        const rawData = data.shopByData;
+        const rawData = queryResponse?.data?.shopByData;
         if (!rawData) {
             return null;
         }
@@ -106,14 +183,14 @@ export const useShopBy = props => {
         const sortbyData = [];
 
         return sortby != "all" ? sortbyData && sortbyData.length ? sortbyData.sort((a, b) => b.release_type.toLowerCase().localeCompare(a.release_type.toLowerCase())) : sortbyData : mappingData;
-    }, [data, sortby, searchQuery]);
+    }, [queryResponse, sortby, searchQuery]);
 
     const availableGroups = originalDataResult ? Object.keys(originalDataResult).sort() : [];
 
     const filteredAvailableGroups = dataResult ? Object.keys(dataResult).sort() : [];
 
 
-    const attributeData = data ? data.shopByData[0] : null
+    const attributeData = queryResponse?.data?.shopByData && queryResponse?.data?.shopByData.length ? queryResponse.data.shopByData[0] : null
 
     const { data: categoryData, loading: categoryLoading } = useQuery(
         getCategoryContentQuery,
@@ -133,8 +210,8 @@ export const useShopBy = props => {
             : null;
 
     return {
-        error,
-        loading,
+        // error,
+        // loading,
         dataResult,
     //     collectibleGameSets,
         filteredAvailableGroups,
@@ -143,7 +220,8 @@ export const useShopBy = props => {
         availableGroups,
         attributeData,
         alpha,
-        category
+        category,
+        activeFilters
     //     productType
     };
 };