@riosst100/pwa-marketplace 2.2.5 → 2.2.6

package/package.json

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

package/src/components/SetsData/setsData.js

@@ -27,6 +27,7 @@ const SetsData = props => {
     const [active, setActive] = useState('all');
     const [activeTab, setActiveTab] = useState('all');
     const [activeFilter, setActiveFilter] = useState('');
+    const [activeYear, setActiveYear] = useState('');
     const [searchQuery, setSearchQuery] = useState('');
     
     const shopby = query.get('shopby') || null;
@@ -65,9 +66,9 @@ const SetsData = props => {
 
     const classes = useStyle(defaultClasses);
 
-    const talonProps = useSetsData({ activeFilter, searchQuery, setActive, currentSort, shopby, setType, categoryId, activeTab });
+    const talonProps = useSetsData({ activeFilter, activeYear, searchQuery, setActive, currentSort, shopby, setType, categoryId, activeTab });
 
-    const { error, loading, setsData, categoryUrlSuffix, categoryUrlKey, productType, filteredSetsData, availableGroups, category, attributeData, pageInfo } = talonProps;
+    const { error, loading, setsData, categoryUrlSuffix, categoryUrlKey, productType, filteredSetsData, availableGroups, availableYears, category, attributeData, pageInfo } = talonProps;
 
     if (loading && !setsData)
         return <SetsDataShimmer />;
@@ -79,7 +80,7 @@ const SetsData = props => {
 
     const setsLengthArr = [];
 
-    const newSetsData = searchQuery ? filteredSetsData : setsData;
+    const newSetsData = searchQuery || activeYear ? filteredSetsData : setsData;
 
     // useEffect(() => {
         if (setsData && setsData.length) {
@@ -120,10 +121,10 @@ const SetsData = props => {
     }
 
     const setRelases = newSetsData && newSetsData.length && newSetsData.map((setRelease, index) => {
-        const { group, sets } = setRelease;
+        const { group, release_year, sets } = setRelease;
 
         const setsResult = [];
-
+        
         if (sets.length) {
             sets.map((set, index) => {
                 const { set_name, option_id, release_year } = set;
@@ -141,13 +142,13 @@ const SetsData = props => {
         }
 
         let setsResultSplitted = [];
-        if (active == group || newSetsData.length == 1) {
+        if (active && active == group || newSetsData.length == 1) {
             setsResultSplitted = splitToNChunks(setsResult, 3);
         }
         
         return (
             <>
-                {active == "all" && newSetsData.length > 1 ?
+                {active == "all" && activeYear && activeYear == release_year && newSetsData.length > 1 || active == "all" && !activeYear && newSetsData.length > 1 ?
                 <div className={cn('singles_group-wrapper mb-4 px-2 inline-block', classes.singlesGroupWrapper)}>
                     <div className='singles_item_group_letter text-xl font-medium border-b border-gray-100 pb-1 mb-2' >
                         {group}
@@ -179,8 +180,17 @@ const SetsData = props => {
 
         setSearchQuery('')
     }
+
+    const handleActiveYear = (val) => {
+        setActiveYear(val);
+        setActive('all');
+        setActiveFilter('');
+        setSearchQuery('')
+    }
+
     const handleSearchQuery = (val) => {
         setSearchQuery(val)
+        setActiveYear('');
         setActive('all')
     }
 
@@ -230,28 +240,54 @@ const SetsData = props => {
                     </button>
                 </li>
             </ul> */}
-            {shopby == "lego_set_name" && activeTab == "all" ? <><ul className={classes.nav}>
-                {availableFilters.map((group, index) => (
-                <li key={index} className={classes.nav_item}>
-                    <button
-                        onClick={() => {
-                            handleActiveFilter(group)
-                        }}
-                    >
-                        {activeFilter == group ? <b>{group}</b> : group}
-                    </button>
-                </li>
-            ))}<li className={classes.nav_item}>
-            <button
-                onClick={() => {
-                    handleActiveFilter('')
-                }}
-            >
-                {!activeFilter ? <b>A-Z</b> : 'A-Z'}
-            </button>
-        </li></ul>
-            
-                </> : ''}
+            {shopby == "secret_lair" ? <>
+                <ul className={classes.nav}>
+                    {availableYears.map((group, index) => (
+                    <li key={index} className={classes.nav_item}>
+                        <button
+                            onClick={() => {
+                                handleActiveYear(group)
+                            }}
+                        >
+                            {activeYear == group ? <b>{group}</b> : group}
+                        </button>
+                    </li>
+                    ))}
+                    <li className={classes.nav_item}>
+                        <button
+                            onClick={() => {
+                                handleActiveYear('')
+                            }}
+                        >
+                            {!activeYear ? <b>All Year</b> : 'All Year'}
+                        </button>
+                    </li>
+                </ul>
+            </> : ''}
+            {shopby == "lego_set_name" && activeTab == "all" ? <>
+                <ul className={classes.nav}>
+                    {availableFilters.map((group, index) => (
+                    <li key={index} className={classes.nav_item}>
+                        <button
+                            onClick={() => {
+                                handleActiveFilter(group)
+                            }}
+                        >
+                            {activeFilter == group ? <b>{group}</b> : group}
+                        </button>
+                    </li>
+                    ))}
+                    <li className={classes.nav_item}>
+                        <button
+                            onClick={() => {
+                                handleActiveFilter('')
+                            }}
+                        >
+                            {!activeFilter ? <b>A-Z</b> : 'A-Z'}
+                        </button>
+                    </li>
+                </ul>
+            </> : ''}
             {!pageInfo.hide_title && <h1 className='mx-auto relative block text-xl font-bold text-center pt-10 pb-4'>
                 {title}
             </h1>}
@@ -289,7 +325,7 @@ const SetsData = props => {
                         </button>
                     </li>
                 ))}
-                <li className={classes.nav_item}>
+                {availableGroups && availableGroups.length ? <li className={classes.nav_item}>
                     <button
                         onClick={() => {
                             handleActive('all')
@@ -297,7 +333,7 @@ const SetsData = props => {
                     >
                         {active == 'all' ? <b>All</b> : 'All'}
                     </button>
-                </li>
+                </li> : ''}
             </ul>}
             <div className='border border-gray-100 px-6'>
                 {setsData ? (
@@ -308,8 +344,8 @@ const SetsData = props => {
                         {/* <CustomSortBy sortProps={sortProps} availableSortMethods={availableSortBy} /> */}
                     </div>
                 ) : ''}
-                <section className='single_list-indexing-container relative m-auto pt-5'>
-                    {!activeFilter && activeTab != "year" && <ul className='flex gap-2 justify-center flex-wrap'>
+                {shopby != "secret_lair" && <section className='single_list-indexing-container relative m-auto pt-5'>
+                    {shopby != "secret_lair" && !activeFilter && activeTab != "year" && <ul className='flex gap-2 justify-center flex-wrap'>
                         <li>
                             <button
                                 className={cn(
@@ -341,7 +377,7 @@ const SetsData = props => {
                             </li>
                         ))}
                     </ul>}
-                </section>
+                </section>}
                 <Divider className="mb-5 px-4 mt-5" />
                 <section className='singles-container'>
                     <div className={cn('singles-wrapper block -mx-4', classes.singlesWrapper)}>

package/src/talons/CollectibleGameSets/useCollectibleGameSets.js

@@ -88,6 +88,11 @@ export const useCollectibleGameSets = props => {
     }, [data, sortby]);
 
     const availableGroups = collectibleGameSets && collectibleGameSets.length ? collectibleGameSets.map(({ release_type }) => release_type) : [];
+    // const availableReleaseYears = collectibleGameSets && collectibleGameSets.length ? collectibleGameSets.map(({ data }) => data.release_year) : [];
+    const availableReleaseYears = [];
+
+    console.log('collectibleGameSets')
+    console.log(collectibleGameSets)
 
     const filteredCollectibleGameSets = useMemo(() => {
         if (!collectibleGameSets) {
@@ -129,6 +134,7 @@ export const useCollectibleGameSets = props => {
         categoryUrlSuffix,
         categoryUrlKey,
         productType,
-        availableGroups
+        availableGroups,
+        availableReleaseYears
     };
 };

package/src/talons/SetsData/setsData.gql.js

@@ -25,6 +25,7 @@ export const GET_SETS_DATA_QUERY = gql`
             }
             data {
                 group
+                release_year
                 sets {
                     set_name
                     option_id

package/src/talons/SetsData/useSetsData.js

@@ -8,7 +8,7 @@ import { getFilterInput, getFiltersFromSearch } from '@magento/peregrine/lib/tal
 
 export const useSetsData = props => {
 
-    const { searchQuery, setActive, currentSort, shopby, setType, categoryId, activeTab, activeFilter } = props
+    const { searchQuery, setActive, currentSort, shopby, setType, categoryId, activeTab, activeFilter, activeYear } = props
 
     const { value: sortby } = currentSort
 
@@ -133,7 +133,42 @@ export const useSetsData = props => {
         return setsData;
     }, [queryResponse]);
 
-    const availableGroups = setsData && setsData.length ? setsData.map(({ group }) => group) : [];
+    // const availableGroups = setsData && setsData.length ? setsData.map(({ group }) => group) : [];
+    const availableGroups = useMemo(() => {
+        if (!setsData) {
+            return null;
+        }
+
+        const groups = [];
+
+        setsData.map(({ group, release_year, sets }, index) => {
+            // const newSets = sets.filter(function(set) {
+            //     return set.set_name.search(new RegExp(searchQuery, "i")) != -1 || group.search(new RegExp(searchQuery, "i")) != -1;
+            //     // return set.set_name.includes(searchQuery);
+            // });
+
+            // if (newSets && newSets.length) {
+            //     filteredSets.push({
+            //         'group': group,
+            //         'sets': newSets
+            //     })
+            // }
+            if (activeYear && activeYear == release_year) {
+                groups.push(group)
+            }
+        })
+
+        return groups;
+    }, [setsData, activeYear]);
+    let availableYears = setsData && setsData.length 
+    ? [...new Set(setsData.map(({ release_year }) => release_year))].sort((a, b) => b - a)
+    : [];
+    // let availableYears = setsData && setsData.length ? setsData.map(({ release_year }) => release_year) : [];
+    // availableYears = availableYears && availableYears.length ? availableYears.slice().sort((a, b) =>a.group.toLowerCase().localeCompare(b.group.toLowerCase())) : [];
+    // const groupByYears = setsData && setsData.length ? setsData.map(({ group,release_year }) => release_year) : [];
+
+    console.log('availableYears')
+    console.log(availableYears)
 
     // const availableLeagues = setsData && setsData.length ? setsData.map(({ sets }) => setsData.map(({ sc_league }) => sc_league)) : [];
 // console.log(availableLeagues)
@@ -167,23 +202,36 @@ export const useSetsData = props => {
             //     setActive('all')
             // }, [active]);
 
-            setsData.map(({ group, sets }, index) => {
+            setsData.map(({ group, release_year, sets }, index) => {
                 const newSets = sets.filter(function(set) {
-                    return set.set_name.search(new RegExp(searchQuery, "i")) != -1 || group.search(new RegExp(searchQuery, "i")) != -1;
+                    return set.set_name && set.set_name.search(new RegExp(searchQuery, "i")) != -1 || group && group.search(new RegExp(searchQuery, "i")) != -1;
                     // return set.set_name.includes(searchQuery);
                 });
 
                 if (newSets && newSets.length) {
                     filteredSets.push({
                         'group': group,
+                        'release_year': release_year,
                         'sets': newSets
                     })
                 }
             })
         }
 
-        return searchQuery ? filteredSets : setsData;
-    }, [setsData, searchQuery]);
+        if (!searchQuery && activeYear) {
+            setsData.map(({ group, release_year, sets }, index) => {
+                if (activeYear == release_year) {
+                    filteredSets.push({
+                        'group': group,
+                        'release_year': release_year,
+                        'sets': sets
+                    })
+                }
+            })
+        }
+
+        return searchQuery || activeYear ? filteredSets : setsData;
+    }, [setsData, searchQuery, activeYear]);
 
     // useEffect(() => {
     //     setPageLoading(isBackgroundLoading);
@@ -218,6 +266,7 @@ export const useSetsData = props => {
         categoryUrlKey,
         productType,
         availableGroups,
+        availableYears,
         category,
         attributeData,
         pageInfo