@riosst100/pwa-marketplace 1.7.5 → 1.7.7

package/package.json

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

package/src/components/FilterTop/FilterBlockList/filterTopItem.js

@@ -27,7 +27,7 @@ const FilterTopItem = props => {
         [group, item, onApply, removeGroup, toggleItem]
     );
 
-    const element = group == "shopby" ? (
+    const element = group == "shopby" || group == "shopby_with_all" ? (
         <Link className={classes.item} to={search ? search + '&shopby=' + value : '?shopby=' + value}>{title}</Link>
     ) : (
         activeFilters.includes(value) ? (

package/src/components/FilterTop/FilterBlockList/filterTopItemGroup.js

@@ -84,6 +84,7 @@ const FilterTopItemGroup = props => {
     return (
         <div className={classes.root}>
             {radioItems}
+            {filterElements && filterElements.length > 10 ? <span className={classes.item}><b>More Item</b></span> : ''}
             {filterElements && filterElements.length ? filterElements : group != "shopby" ? (<span className={classes.item}><b>All</b></span>) : ''}
         </div>
     );

package/src/components/ShopBy/shopBy.js

@@ -89,6 +89,7 @@ const ShopBy = props => {
 
     const [searchQuery, setSearchQuery] = useState('');
 
+    const { search } = useLocation();
     
     const sortProps = useCustomSort({ sortFromSearch: false, defaultSort: {
         sortText: 'All (A-Z)',
@@ -107,7 +108,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 />;
@@ -127,6 +128,10 @@ const ShopBy = props => {
         return result;
     }
 
+    const filterSearchArr = search ? search.split('&') : [];
+    filterSearchArr.pop();
+    const filterSearch = filterSearchArr.join('&')
+
     const setRelases = newAvailableGroups.map((group, index) => {
         const optionsResult = [];
 
@@ -134,8 +139,11 @@ const ShopBy = props => {
             dataResult[group].map((option, index) => {
                 const { label, value } = option;
 
+                const filter = attributeData.attribute_code + '[filter]=' + label + ',' + value;
+                const params = filterSearch ? filterSearch + '&' + filter : '?' + filter;
+
                 const categoryUrl = resourceUrl(
-                    `/${category.url_path}${categoryUrlSuffix || ''}?${attributeData.attribute_code}[filter]=${label},${value}`
+                    `/${category.url_path}${categoryUrlSuffix || ''}${params}`
                 );
 
                 optionsResult.push(<li className='list-none'>
@@ -143,7 +151,7 @@ const ShopBy = props => {
                         {label}
                     </Link>
                 </li>)
-            })
+            });
 
             let optionsResultSplitted = [];
             if (active == group) {
@@ -190,10 +198,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
     };
 };