@riosst100/pwa-marketplace 1.7.2 → 1.7.3

package/package.json

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

package/src/components/SportCardsSets/sportCardsSets.js

@@ -19,7 +19,7 @@ const SportCardsSets = props => {
 
     const [active, setActive] = useState('all');
     const [activeTab, setActiveTab] = useState('leagues');
-    const [activeFilter, setActiveFilter] = useState('all');
+    const [activeFilter, setActiveFilter] = useState('Major Baseball League');
 
     const [searchQuery, setSearchQuery] = useState('');
 
@@ -62,7 +62,7 @@ const SportCardsSets = props => {
 
     const classes = useStyle(defaultClasses);
 
-    const talonProps = useSportCardsSets({ searchQuery, setActive, currentSort, shopby, setType, categoryId, activeTab });
+    const talonProps = useSportCardsSets({ searchQuery, setActive, currentSort, shopby, setType, categoryId, activeTab, activeFilter });
 
     const { error, loading, sportCardsSets, categoryUrlSuffix, categoryUrlKey, productType, filteredSportCardsSets, availableGroups, category } = talonProps;
 
@@ -76,13 +76,33 @@ const SportCardsSets = props => {
 
     const setsLengthArr = [];
 
-    const newSportCardsSets = searchQuery ? filteredSportCardsSets : sportCardsSets;
+    const newSportCardsSets = searchQuery || activeFilter != "all" ? filteredSportCardsSets : sportCardsSets;
 
     // useEffect(() => {
         if (sportCardsSets && sportCardsSets.length) {
             sportCardsSets.map((setRelease, index) => {
                 const { group, sets } = setRelease;
 
+                // if (sets.length) {
+                //     sets.map((set, index) => {
+                //         // console.log(set)
+                //         if (set.sc_league) {
+                //             if (!availableLeagues.includes(set.sc_league)) {
+                //                 availableLeagues.push(set.sc_league)
+                //             }
+                //         }
+                //     })
+                // }
+
+                setsLengthArr[group] = sets.length
+            })
+        }
+    // }, [sportCardsSets])
+
+    if (sportCardsSets && sportCardsSets.length) {
+        sportCardsSets.map((setRelease, index) => {
+            const { group, sets } = setRelease;
+            if (active == 'all' || active != "all" && active == group) {
                 if (sets.length) {
                     sets.map((set, index) => {
                         // console.log(set)
@@ -93,11 +113,9 @@ const SportCardsSets = props => {
                         }
                     })
                 }
-
-                setsLengthArr[group] = sets.length
-            })
-        }
-    // }, [sportCardsSets])
+            }
+        })
+    }
 
     const splitToNChunks = (array, n) => {
         let result = [];
@@ -109,7 +127,7 @@ const SportCardsSets = props => {
 
     // console.log(category)
 
-    const setRelases = newSportCardsSets.length && newSportCardsSets.map((setRelease, index) => {
+    const setRelases = newSportCardsSets && newSportCardsSets.length && newSportCardsSets.map((setRelease, index) => {
         const { group, sets } = setRelease;
 
         const setsResult = [];
@@ -160,7 +178,8 @@ const SportCardsSets = props => {
         setActive(val);
 
         availableLeagues = [];
-        // 
+
+        setActiveFilter('Major Baseball League')
 
 
         setSearchQuery('')
@@ -232,6 +251,8 @@ const SportCardsSets = props => {
 
     // console.log(availableLeagues)
 
+    availableLeagues.sort();
+
 
     return (
         <Fragment>
@@ -291,7 +312,7 @@ const SportCardsSets = props => {
                 </button>
             </li>
             </ul> : ''}
-            {availableLeagues ? <ul className={classes.nav}>
+            {activeTab == "leagues" && availableLeagues ? <ul className={classes.nav}>
                 {availableLeagues.map((group, index) => (
                 <li key={index} className={classes.nav_item}>
                     <button
@@ -303,15 +324,6 @@ const SportCardsSets = props => {
                     </button>
                 </li>
             ))}
-            <li className={classes.nav_item}>
-                <button
-                    onClick={() => {
-                        handleActiveFilter('all')
-                    }}
-                >
-                    {activeFilter == 'all' ? <b>All</b> : 'All'}
-                </button>
-            </li>
             </ul> : ''}
             <div className='border border-gray-100 px-6'>
                 {sportCardsSets ? (

package/src/talons/SportCardsSets/useSportCardsSets.js

@@ -8,7 +8,7 @@ import DEFAULT_OPERATIONS from './sportCardsSets.gql';
 
 export const useSportCardsSets = props => {
 
-    const { searchQuery, setActive, currentSort, shopby, setType, categoryId, activeTab } = props
+    const { searchQuery, setActive, currentSort, shopby, setType, categoryId, activeTab, activeFilter } = props
 
     const { value: sortby } = currentSort
 
@@ -77,7 +77,7 @@ export const useSportCardsSets = props => {
                         }
                         // if (release_year) {
                         //     // groupingSetsByYear.splice(release_year, 0, set);
-                        //     const result = sortbyData.find(item => item.group === release_year);
+                            // const result = sortbyData.find(item => item.group === release_year);
 
                         //     // groupingSetsByYear[release_year] = set;
                         //     if (result) {
@@ -96,7 +96,7 @@ export const useSportCardsSets = props => {
             })
         // }
 
-        return activeTab == "year" ? sortbyData && sortbyData.length ? sortbyData.sort((a, b) => b.group.toLowerCase().localeCompare(a.group.toLowerCase())) : sortbyData : sportCardsSets.slice().sort((a, b) => a.group.toLowerCase().localeCompare(b.group.toLowerCase()));
+        return sportCardsSets;
     }, [data, activeTab]);
 
     const availableGroups = sportCardsSets && sportCardsSets.length ? sportCardsSets.map(({ group }) => group) : [];
@@ -105,7 +105,7 @@ export const useSportCardsSets = props => {
 // console.log(availableLeagues)
     // sc_league
 
-    const filteredsportCardsSets = useMemo(() => {
+    const filteredSportCardsSets = useMemo(() => {
         if (!sportCardsSets) {
             return null;
         }
@@ -131,8 +131,26 @@ export const useSportCardsSets = props => {
             })
         }
 
-        return searchQuery ? filteredSets : sportCardsSets;
-    }, [sportCardsSets, searchQuery, sortby]);
+        if (activeFilter && activeFilter  != "all") {
+            sportCardsSets.map(({ group, sets }, index) => {
+                const newSets = sets.filter(function(set) {
+                    return set.sc_league == activeFilter;
+                    // return set.set_name.includes(searchQuery);
+                });
+
+                if (newSets && newSets.length) {
+                    filteredSets.push({
+                        'group': group,
+                        'sets': newSets
+                    })
+                }
+            })
+            console.log(activeFilter)
+            console.log(filteredSets)
+        }
+
+        return searchQuery || activeFilter ? filteredSets : sportCardsSets;
+    }, [sportCardsSets, searchQuery, sortby, activeFilter]);
 
     useEffect(() => {
         setPageLoading(isBackgroundLoading);
@@ -159,7 +177,7 @@ export const useSportCardsSets = props => {
         error,
         loading,
         sportCardsSets,
-        filteredsportCardsSets,
+        filteredSportCardsSets,
         categoryUrlSuffix,
         categoryUrlKey,
         productType,