@riosst100/pwa-marketplace 1.7.9 → 1.8.0

package/src/talons/ShopBy/useShopBy.js

@@ -9,7 +9,7 @@ import { getFilterInput, getFiltersFromSearch } from '@magento/peregrine/lib/tal
 
 export const useShopBy = props => {
 
-    const { searchQuery, setActive, currentSort, categoryId, shopby } = props
+    const { searchQuery, active, setActive, currentSort, categoryId, shopby } = props
 
     const { value: sortby } = currentSort
 
@@ -59,7 +59,7 @@ export const useShopBy = props => {
 
     const filters = getFiltersFromSearch(search);
 
-    console.log(search)
+    // console.log(search)
 
     // Construct the filter arg object.
     const newFilters = {};
@@ -151,7 +151,7 @@ export const useShopBy = props => {
         return sortby != "all" ? sortbyData && sortbyData.length ? sortbyData.sort((a, b) => b.release_type.toLowerCase().localeCompare(a.release_type.toLowerCase())) : sortbyData : mappingData;
     }, [queryResponse, sortby]);
 
-    const dataResult = useMemo(() => {
+    const filteredOptions = useMemo(() => {
         if (!queryResponse) {
             return null;
         }
@@ -163,25 +163,21 @@ export const useShopBy = props => {
         
         let options = rawData[0].options;
 
-        const filteredSets = [];
+        // const filteredSets = [];
 
-        let filteredOptions = [];
+        // let filteredOptions = [];
 
         // let mappingData = [];
 
-        // if (searchQuery) {
-        //     setActive('all')
-        //     mappingData = options.filter(function(option) {
-        //         return option.label.search(new RegExp(searchQuery, "i")) != -1;
-        //     }).reduce((acc, item) => {
-        //         let firstLetter = item.label.charAt(0).toUpperCase();
-        //         if (!alpha.includes(firstLetter)) {
-        //             firstLetter = '#';
-        //         }
-        //         acc[firstLetter] = acc[firstLetter] || [];
-        //         acc[firstLetter].push(item);
-        //         return acc;
-        //     }, {});
+        if (searchQuery) {
+            if (active != "all") {
+                setActive('all');
+            }
+
+            return options.filter(function(option) {
+                return option.label.search(new RegExp(searchQuery, "i")) != -1;
+            });
+        }
         // } else {
 
         //     console.log(filteredOptions)
@@ -189,20 +185,30 @@ export const useShopBy = props => {
            
         // }
 
-        const mappingData = options.reduce((acc, item) => {
-            let firstLetter = item.label.charAt(0).toUpperCase();
-            if (!alpha.includes(firstLetter)) {
-                firstLetter = '#';
-            }
-            acc[firstLetter] = acc[firstLetter] || [];
-            acc[firstLetter].push(item);
-            return acc;
-        }, {});
+        
 
-        const sortbyData = [];
+        // const sortbyData = [];
 
-        return sortby != "all" ? sortbyData && sortbyData.length ? sortbyData.sort((a, b) => b.release_type.toLowerCase().localeCompare(a.release_type.toLowerCase())) : sortbyData : mappingData;
-    }, [queryResponse, sortby, searchQuery]);
+        return options;
+    }, [queryResponse, searchQuery]);
+
+    const dataResult = useMemo(() => {
+        if (filteredOptions) {
+            return filteredOptions.reduce((acc, item) => {
+                let firstLetter = item.label.charAt(0).toUpperCase();
+                if (!alpha.includes(firstLetter)) {
+                    firstLetter = '#';
+                }
+                acc[firstLetter] = acc[firstLetter] || [];
+                acc[firstLetter].push(item);
+                return acc;
+            }, {});
+        }
+
+        return filteredOptions;
+    }, [filteredOptions])
+
+    // console.log(dataResult)
 
     const availableGroups = originalDataResult ? Object.keys(originalDataResult).sort() : [];
 

package/src/talons/SportCardsSets/sportCardsSets.gql.js

@@ -12,14 +12,15 @@ export const GET_STORE_CONFIG_DATA = gql`
 `;
 
 export const GET_SPORT_CARDS_SETS_QUERY = gql`
-    query getSportCardsSets($categoryUrlKey: String!, $setType: String) {
-        sportCardsSets(categoryUrlKey: $categoryUrlKey, setType: $setType) {
+    query getSportCardsSets($categoryUrlKey: String!, $setType: String, $filters: ProductAttributeFilterInput!) {
+        sportCardsSets(categoryUrlKey: $categoryUrlKey, setType: $setType, filters: $filters) {
             group
             sets {
                 set_name
                 option_id
                 release_year
                 sc_league
+                sc_brands
             }
         }
     }
@@ -39,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,
     getSportCardsSetsQuery: GET_SPORT_CARDS_SETS_QUERY,
-    getCategoryContentQuery: GET_CATEGORY_CONTENT
+    getCategoryContentQuery: GET_CATEGORY_CONTENT,
+    getFilterInputsQuery: GET_FILTER_INPUTS,
 };

package/src/talons/SportCardsSets/useSportCardsSets.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 './sportCardsSets.gql';
+import { getFilterInput, getFiltersFromSearch } from '@magento/peregrine/lib/talons/FilterModal/helpers';
 
 export const useSportCardsSets = props => {
 
@@ -13,16 +14,9 @@ export const useSportCardsSets = props => {
     const { value: sortby } = currentSort
 
     const operations = mergeOperations(DEFAULT_OPERATIONS, null);
-    const { getStoreConfigData, getSportCardsSetsQuery, getCategoryContentQuery } = operations;
-    const { pathname } = useLocation();
-    const [
-        ,
-        {
-            actions: { setPageLoading }
-        }
-    ] = useAppContext();
-
-    const { data: storeConfigData } = useQuery(getStoreConfigData, {
+    const { getStoreConfigData, getSportCardsSetsQuery, getCategoryContentQuery, getFilterInputsQuery } = operations;
+    const { pathname, search } = useLocation();
+    const [runQuery, queryResponse] = useLazyQuery(getSportCardsSetsQuery, {
         fetchPolicy: 'cache-and-network',
         nextFetchPolicy: 'cache-first'
     });
@@ -33,30 +27,112 @@ export const useSportCardsSets = props => {
     const parentCategoryUrlKey = pathnameArr[pathnameArr.length - 2].replace('.html','');
     const productType = shopby;
     
-    const categoryUrlSuffix = storeConfigData?.storeConfig?.category_url_suffix;
+    
 
-    const { error, loading, data } = useQuery(getSportCardsSetsQuery, {
-        fetchPolicy: 'cache-and-network',
-        nextFetchPolicy: 'cache-first',
-        skip: !storeConfigData,
-        variables: {
-            categoryUrlKey: categoryUrlKey,
-            setType: setType
+    // const { error, loading, data } = useQuery(getSportCardsSetsQuery, {
+    //     fetchPolicy: 'cache-and-network',
+    //     nextFetchPolicy: 'cache-first',
+    //     skip: !storeConfigData,
+    //     variables: {
+    //         categoryUrlKey: categoryUrlKey,
+    //         setType: setType
+    //     }
+    // });
+    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 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(() => {
+        // console.log("MASUK")
+
+        // if (queryResponse.data) {
+
+        
+
+        // 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,
+                setType: setType
+            }
+        });
+    // }
+    }, [
+        runQuery,
+        // queryResponse
+        // filterTypeMap,
+        // search,
+        // newFilters,
+        // shopby,
+        // categoryUrlKey
+    ]);
+
+    const { data: storeConfigData } = useQuery(getStoreConfigData, {
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first'
+    });
+
+    const categoryUrlSuffix = storeConfigData?.storeConfig?.category_url_suffix;
+
+    // { data: queryResponse, error, loading }
+
+    
+
     // console.log(data)
 
-    const isBackgroundLoading = !!data && loading;
+    // const isBackgroundLoading = !!data && loading;
 
     const availableLeagues = [];
 
+    // console.log(queryResponse.data)
+
     const sportCardsSets = useMemo(() => {
-        if (!data) {
+        if (!queryResponse) {
             return null;
         }
+
+        // console.log(data)
         
-        const sportCardsSets = data.sportCardsSets;
+        const sportCardsSets = queryResponse?.data?.sportCardsSets;
         if (!sportCardsSets) {
             return null;
         }
@@ -64,7 +140,8 @@ export const useSportCardsSets = props => {
         const sortbyData = [];
         // if (activeTab == 'year') {
 
-        //     console.log(activeTab)
+            // console.log(sportCardsSets)
+            if (sportCardsSets) {
             sportCardsSets.map((setRelease, index) => {
                 const { group, sets } = setRelease;
                 if (sets.length) {
@@ -94,10 +171,10 @@ export const useSportCardsSets = props => {
                     })
                 }
             })
-        // }
+        }
 
         return sportCardsSets.slice().sort((a, b) => b.group.toLowerCase().localeCompare(a.group.toLowerCase()));
-    }, [data, activeTab]);
+    }, [queryResponse, activeTab]);
 
     const availableGroups = sportCardsSets && sportCardsSets.length ? sportCardsSets.map(({ group }) => group) : [];
 
@@ -145,16 +222,14 @@ export const useSportCardsSets = props => {
                     })
                 }
             })
-            console.log(activeFilter)
-            console.log(filteredSets)
         }
 
         return searchQuery || activeFilter ? filteredSets : sportCardsSets;
     }, [sportCardsSets, searchQuery, sortby, activeFilter]);
 
-    useEffect(() => {
-        setPageLoading(isBackgroundLoading);
-    }, [isBackgroundLoading, setPageLoading]);
+    // useEffect(() => {
+    //     setPageLoading(isBackgroundLoading);
+    // }, [isBackgroundLoading, setPageLoading]);
 
     const { data: categoryData, loading: categoryLoading } = useQuery(
         getCategoryContentQuery,
@@ -173,6 +248,9 @@ export const useSportCardsSets = props => {
             ? categoryData.categories.items[0]
             : null;
 
+    const error = queryResponse?.error;
+    const loading = queryResponse?.loading;
+
     return {
         error,
         loading,