@riosst100/pwa-marketplace 1.6.7 → 1.6.8

package/package.json

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

package/src/components/ShopBySets/shopBySets.js

@@ -84,6 +84,14 @@ const ShopBySets = props => {
         }
     // }, [collectibleGameSets])
 
+    const splitToNChunks = (array, n) => {
+        let result = [];
+        for (let i = n; i > 0; i--) {
+            result.push(array.splice(0, Math.ceil(array.length / i)));
+        }
+        return result;
+    }
+
     const setRelases = newCollectibleGameSets.length && newCollectibleGameSets.map((setRelease, index) => {
         const { release_type, sets } = setRelease;
 
@@ -104,16 +112,30 @@ const ShopBySets = props => {
                 </li>)
             })
         }
+
+        // console.log('setsResult: '+setsResult.length);
+        let setsResultSplitted = [];
+        if (active == release_type) {
+            setsResultSplitted = splitToNChunks(setsResult, 3);
+        }
         
         return (
             <>
-                {active == "all" || active == release_type ?
-                <div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>
+                {active == "all" ?
+                <div className={cn('singles_group-wrapper mb-4 px-2 inline-block', classes.singlesGroupWrapper)}>
                     <div className='singles_item_group_letter text-xl font-semibold border-b border-gray-100 pb-1 mb-2' >
                         {release_type}
                     </div>
                     <div className={cn('singles_item-list flex flex-col')}>{setsResult}</div>
                 </div> : ''}
+                {active == release_type ? setsResultSplitted && setsResultSplitted.length && setsResultSplitted.map((setsResult, index) =>
+                    <div key={index} className={cn('singles_group-wrapper mb-4 px-2 inline-block', classes.singlesGroupWrapper)}>
+                        {index == 0 ? <div className='singles_item_group_letter text-xl font-semibold border-b border-gray-100 pb-1 mb-2'>{release_type}</div> : 
+                        <div className='singles_item_group_letter text-xl font-semibold pb-1 mb-2' style={{"marginTop":"35px"}}></div>}
+                        <div className={cn('singles_item-list flex flex-col')}>{setsResult}</div>
+                    </div>
+                )
+                 : ''}
             </>
         );
     });

package/src/components/ShopBySets/shopBySets.module.css

@@ -53,16 +53,24 @@
 
 .singlesWrapper {
     column-count: 1;
+    display: flex;
+    width: 100%;
+    flex-wrap: wrap;
+    flex-direction: row;
+}
+
+.singlesGroupWrapper {
+    width: 100%;
 }
 
 @media screen and (min-width: 768px) {
-    .singlesWrapper {
-        column-count: 2;
+    .singlesGroupWrapper {
+        width: 50%;
     }
 }
 
 @media screen and (min-width: 1023px) {
-    .singlesWrapper {
-        column-count: 3;
+    .singlesGroupWrapper {
+        width: 33.33%;
     }
 }

package/src/overwrites/venia-ui/lib/RootComponents/Category/categoryContent.js

@@ -115,8 +115,6 @@ const CategoryContent = props => {
         [items, activeLetter]
     });
 
-    console.log(galleryItems)
-
     const sidebarRef = useRef(null);
     const classes = useStyle(defaultClasses, props.classes);
     const shouldRenderSidebarContent = useIsInViewport({
@@ -141,7 +139,7 @@ const CategoryContent = props => {
     ) : null;
 
     const sidebar = shouldShowFilterButtons ? (
-        <FilterSidebar children={children} filters={filters} allowedFilters={category ? category.allowed_filters : []} />
+        <FilterSidebar hideFilters={category && category.hide_filters ? true : false} children={children} filters={filters} allowedFilters={category ? category.allowed_filters : []} />
     ) : shouldShowFilterShimmer ? (
         <FilterSidebarShimmer />
     ) : null;

package/src/overwrites/venia-ui/lib/components/FilterSidebar/filterSidebar.js

@@ -21,7 +21,7 @@ const SCROLL_OFFSET = 150;
  * @param {Object} props.filters - filters to display
  */
 const FilterSidebar = props => {
-    const { filters, filterCountToOpen, allowedFilters } = props;
+    const { filters, filterCountToOpen, allowedFilters, hideFilters } = props;
     const talonProps = useFilterSidebar({ filters });
     const {
         filterApi,
@@ -154,14 +154,14 @@ const FilterSidebar = props => {
                         <Filter size={15} className='text-gray-900' />
                     </h2>
                 </div>
+                {hideFilters ? <ul className={classes.blocks}>No filters available.</ul> : <>
                 <CurrentFilters
                     filterApi={filterApi}
                     filterNames={filterNames}
                     filterState={filterState}
                     onRemove={handleApplyFilter}
                 />
-                {/* {clearAll} */}
-                <ul className={classes.blocks}>{filtersList}</ul>
+                <ul className={classes.blocks}>{filtersList}</ul></>}
             </div>
         </aside>
     );