@riosst100/pwa-marketplace 1.6.2 → 1.6.3

package/src/talons/ArraySearchInput/useArraySearchInput.js

@@ -0,0 +1,58 @@
+import { useCallback, useState } from 'react';
+import { useHistory } from 'react-router-dom';
+
+import { useDropdown } from '@magento/peregrine/lib/hooks/useDropdown';
+
+const initialValues = { search_query: '' };
+
+export const useArraySearchInput = props => {
+    const { active } = props
+    const [valid, setValid] = useState(false);
+    const {
+        elementRef,
+        expanded: isAutoCompleteOpen,
+        setExpanded: setIsAutoCompleteOpen
+    } = useDropdown();
+    const history = useHistory();
+    const { push } = history;
+
+    // expand or collapse on input change
+    const handleChange = useCallback(
+        value => {
+            const hasValue = !!value;
+            const isValid = hasValue && value.length > 2;
+
+            setValid(isValid);
+            setIsAutoCompleteOpen(hasValue);
+        },
+        [setIsAutoCompleteOpen, setValid]
+    );
+
+    // expand on focus
+    const handleFocus = useCallback(() => {
+        setIsAutoCompleteOpen(true);
+    }, [setIsAutoCompleteOpen]);
+
+    // navigate on submit
+    const handleSubmit = useCallback(
+        ({ search_query }) => {
+            if (search_query != null && search_query.trim().length > 0) {
+                push(`/search.html?query=${search_query}`);
+                setIsAutoCompleteOpen(false);
+            }
+        },
+        [push, setIsAutoCompleteOpen]
+    );
+
+    return {
+        containerRef: elementRef,
+        handleChange,
+        handleFocus,
+        handleSubmit,
+        initialValues,
+        isAutoCompleteOpen,
+        setIsAutoCompleteOpen,
+        setValid,
+        valid
+    };
+};

package/src/talons/CollectibleGameSets/useCollectibleGameSets.js

@@ -8,6 +8,10 @@ import DEFAULT_OPERATIONS from './collectibleGameSets.gql';
 
 export const useCollectibleGameSets = props => {
 
+    const { searchQuery, setActive, currentSort } = props
+
+    const { value: sortby } = currentSort
+
     const operations = mergeOperations(DEFAULT_OPERATIONS, null);
     const { getStoreConfigData, getCollectibleGameQuery } = operations;
     const { pathname } = useLocation();
@@ -23,6 +27,8 @@ export const useCollectibleGameSets = props => {
         nextFetchPolicy: 'cache-first'
     });
 
+    // console.log(sortby)
+
     const pathnameArr = pathname.split('/');
 
     const categoryUrlKey = pathnameArr[pathnameArr.length - 2].replace('.html','');
@@ -52,8 +58,74 @@ export const useCollectibleGameSets = props => {
             return null;
         }
 
-        return collectibleGameSets;
-    }, [data, categoryUrlKey]);
+        // console.log(sortby)
+
+        const sortbyData = [];
+        if (sortby != 'all') {
+            collectibleGameSets.map((setRelease, index) => {
+                const { release_type, sets } = setRelease;
+                if (sets.length) {
+                    sets.map((set, index) => {
+                        const { release_year } = set;
+                        if (release_year) {
+                            // groupingSetsByYear.splice(release_year, 0, set);
+                            const result = sortbyData.find(item => item.release_type === release_year);
+
+                            // console.log(result)
+                            // groupingSetsByYear[release_year] = set;
+                            if (result) {
+                                result.sets.push(set)
+                            } else {
+                                if (sortby == "date" || sortby == "newest" && sortbyData.length <= 5) {
+                                    sortbyData.push({
+                                        'release_type': release_year,
+                                        'sets': [set]
+                                    })
+                                }
+                            }
+                        }
+                    })
+                }
+            })
+        }
+
+        return sortby != "all" ? sortbyData && sortbyData.length ? sortbyData.sort((a, b) => b.release_type.toLowerCase().localeCompare(a.release_type.toLowerCase())) : sortbyData : collectibleGameSets.slice().sort((a, b) => a.release_type.toLowerCase().localeCompare(b.release_type.toLowerCase()));
+    }, [data, sortby]);
+
+    // console.log(collectibleGameSets)
+
+    const filteredCollectibleGameSets = useMemo(() => {
+        if (!collectibleGameSets) {
+            return null;
+        }
+
+        const filteredSets = [];
+
+        if (searchQuery) {
+
+            setActive('all')
+
+            collectibleGameSets.map(({ release_type, sets }, index) => {
+
+                // console.log(sets)
+                const newSets = sets.filter(function(set) {
+                    return set.set_name.search(new RegExp(searchQuery, "i")) != -1 || set.set_abbreviation.search(new RegExp(searchQuery, "i")) != -1 || release_type.search(new RegExp(searchQuery, "i")) != -1;
+                    // return set.set_name.includes(searchQuery);
+                });
+
+                if (newSets && newSets.length) {
+                    filteredSets.push({
+                        'release_type': sortby == "date" ? set.release_year : release_type,
+                        'sets': newSets
+                    })
+                }
+            })
+
+            // console.log(filteredSets)
+        }
+
+        return searchQuery ? filteredSets : collectibleGameSets;
+    }, [collectibleGameSets, searchQuery, sortby]);
 
     useEffect(() => {
         setPageLoading(isBackgroundLoading);
@@ -63,6 +135,7 @@ export const useCollectibleGameSets = props => {
         error,
         loading,
         collectibleGameSets,
+        filteredCollectibleGameSets,
         categoryUrlSuffix,
         categoryUrlKey,
         productType

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

@@ -0,0 +1,47 @@
+import { gql } from '@apollo/client';
+
+export const GET_STORE_CONFIG_DATA = gql`
+    query getStoreConfigData {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
+        storeConfig {
+            store_code
+            product_url_suffix
+            category_url_suffix
+        }
+    }
+`;
+
+export const GET_SHOP_BY_DATA_QUERY = gql`
+    query getShopByData($categoryUrlKey: String!, $attributeCode: String) {
+        shopByData(categoryUrlKey: $categoryUrlKey, attributeCode: $attributeCode) {
+            label
+            count
+            attribute_code
+            options {
+                label
+                value
+            }
+            position
+        }
+    }
+`;
+
+export const GET_CATEGORY_CONTENT = gql`
+    query getCategoryData($id: String!) {
+        categories(filters: { category_uid: { in: [$id] } }) {
+            # eslint-disable-next-line @graphql-eslint/require-id-when-available
+            items {
+                uid
+                name
+                url_key
+                url_path
+            }
+        }
+    }
+`;
+
+export default {
+    getStoreConfigData: GET_STORE_CONFIG_DATA,
+    getShopByDataQuery: GET_SHOP_BY_DATA_QUERY,
+    getCategoryContentQuery: GET_CATEGORY_CONTENT
+};

package/src/talons/ShopBy/useShopBy.js

@@ -0,0 +1,171 @@
+import { useQuery } 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';
+
+export const useShopBy = props => {
+
+    const { searchQuery, setActive, currentSort, categoryId, shopby } = props
+
+    const { value: sortby } = currentSort
+
+    const operations = mergeOperations(DEFAULT_OPERATIONS, null);
+    const { getStoreConfigData, getShopByDataQuery, getCategoryContentQuery } = operations;
+    const { pathname } = useLocation();
+    // const [
+    //     ,
+    //     {
+    //         actions: { setPageLoading }
+    //     }
+    // ] = useAppContext();
+
+    const { data: storeConfigData } = useQuery(getStoreConfigData, {
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first'
+    });
+
+    
+
+    // // console.log(sortby)
+
+    const pathnameArr = pathname.split('/');
+    
+    const categoryUrlKey = pathnameArr[pathnameArr.length - 1].replace('.html','');
+    
+    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 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 originalDataResult = useMemo(() => {
+        if (!data) {
+            return null;
+        }
+
+        // console.log(data)
+        
+        const rawData = data.shopByData;
+        if (!rawData) {
+            return null;
+        }
+
+        // console.log(rawData)
+        
+        let options = rawData[0].options;
+
+        const mappingData = options.reduce((acc, item) => {
+            // console.log(item)
+            let firstLetter = item.label.charAt(0).toUpperCase();
+            if (!alpha.includes(firstLetter)) {
+                firstLetter = '#';
+            }
+            acc[firstLetter] = acc[firstLetter] || [];
+            acc[firstLetter].push(item);
+            return acc;
+        }, {});
+
+        
+
+        // console.log(mappingData)
+
+        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]);
+
+    const dataResult = useMemo(() => {
+        if (!data) {
+            return null;
+        }
+
+        // console.log(data)
+        
+        const rawData = data.shopByData;
+        if (!rawData) {
+            return null;
+        }
+
+        // console.log(rawData)
+        
+        let options = rawData[0].options;
+
+        if (searchQuery) {
+            setActive('all')
+            options = options.filter(function(option) {
+                return option.label.search(new RegExp(searchQuery, "i")) != -1;
+            });
+        }
+
+        const mappingData = options.reduce((acc, item) => {
+            // console.log(item)
+            let firstLetter = item.label.charAt(0).toUpperCase();
+            if (!alpha.includes(firstLetter)) {
+                firstLetter = '#';
+            }
+            acc[firstLetter] = acc[firstLetter] || [];
+            acc[firstLetter].push(item);
+            return acc;
+        }, {});
+
+        
+
+        // console.log(mappingData)
+
+        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]);
+
+    const availableGroups = originalDataResult ? Object.keys(originalDataResult).sort() : [];
+
+    const filteredAvailableGroups = dataResult ? Object.keys(dataResult).sort() : [];
+
+
+    const attributeData = data ? data.shopByData[0] : null
+
+    const { data: categoryData, loading: categoryLoading } = useQuery(
+        getCategoryContentQuery,
+        {
+            fetchPolicy: 'cache-and-network',
+            nextFetchPolicy: 'cache-first',
+            skip: !categoryId,
+            variables: {
+                id: categoryId
+            }
+        }
+    );
+
+    const category =
+        categoryData && categoryData.categories.items.length
+            ? categoryData.categories.items[0]
+            : null;
+
+    return {
+        error,
+        loading,
+        dataResult,
+    //     collectibleGameSets,
+        filteredAvailableGroups,
+        categoryUrlSuffix,
+        categoryUrlKey,
+        availableGroups,
+        attributeData,
+        alpha,
+        category
+    //     productType
+    };
+};