@riosst100/pwa-marketplace 2.9.0 → 2.9.1

package/package.json

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

package/src/components/SubCategory/subCategory.js

@@ -22,14 +22,20 @@ const SubCategory = props => {
     
     normalizedData && normalizedData.length && normalizedData.map(({ text, path }, index) => {
         if (index < maxSubCategory) {
-            subCategory.push(
+            const isActive = index == 0 ? true : false;
+
+            const item = isActive ? (
+                <span className={classes.item}><b>{text}</b></span>
+            ) : (
                 <Link
                     key={index}
                     to={resourceUrl(path)}
                 >
                     <li className={classes.item}>{text}</li>
                 </Link>
-            )
+            );
+
+            subCategory.push(item)
         }
     });
 

package/src/overwrites/peregrine/lib/talons/RootComponents/Category/categoryContent.gql.js

@@ -29,6 +29,11 @@ export const GET_CATEGORY_CONTENT = gql`
                 name
                 description
                 url_key
+                default_top_filter {
+                    attribute_code
+                    label
+                    value
+                }
                 url_path
                 hide_filters
                 allowed_filters {

package/src/overwrites/peregrine/lib/talons/RootComponents/Category/useCategoryContent.js

@@ -1,9 +1,9 @@
-import { useEffect, useMemo } from 'react';
+import { useCallback, useMemo, useRef, useState, useEffect } from 'react';
 import { useLazyQuery, useQuery } from '@apollo/client';
 
 import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
 import { useEventingContext } from '@magento/peregrine/lib/context/eventing';
-import { useLocation } from 'react-router-dom';
+import { useLocation, useHistory } from 'react-router-dom';
 import DEFAULT_OPERATIONS from './categoryContent.gql';
 import {
     getFiltersFromSearch,
@@ -177,6 +177,57 @@ export const useCategoryContent = props => {
 
     const filters = [];
 
+    const history = useHistory();
+    const location = useLocation();
+
+    const setQueryParam = ({ history, location, parameter, replace, value }) => {
+        const { search } = location;
+        const queryParams = new URLSearchParams(search);
+
+        queryParams.set(parameter, value);
+        const destination = { search: queryParams.toString() };
+
+        if (replace) {
+            history.replace(destination);
+        } else {
+            history.push(destination);
+        }
+    };
+
+    const setDefaultSubcategoryAndTopFilter = useCallback(
+        (value, searchParam, replace = false) => {
+            // Update the query parameter.
+            setQueryParam({
+                history,
+                location,
+                parameter: searchParam,
+                replace,
+                value: value
+            });
+        },
+        [history, location]
+    );
+
+    useEffect(() => {
+        const { search } = location;
+
+        if (category && category.default_top_filter) {
+            const defaultTopFilter = category.default_top_filter;
+
+            const attrCode = defaultTopFilter.attribute_code;
+            const label = defaultTopFilter.label;
+            const value = defaultTopFilter.value;
+
+            if (!search.includes(attrCode)) {
+                setDefaultSubcategoryAndTopFilter(
+                    label + ',' + value, 
+                    attrCode + '[filter]', 
+                    true
+                );
+            }
+        }
+    }, [category, location, setDefaultSubcategoryAndTopFilter]);
+
     // console.log('rawFilters')
     // console.log(rawFilters)
 

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

@@ -163,12 +163,6 @@ const CategoryContent = props => {
         <FilterModal filters={filters} />
     ) : null;
 
-    // console.log('filters')
-    // console.log(filters)
-
-    // console.log('shouldShowFilterButtons')
-    // console.log(shouldShowFilterButtons)
-
     const sidebar = shouldShowFilterButtons ? (
         <FilterSidebar hideFilters={category && category.hide_filters ? true : false} children={children} filters={filters} allowedFilters={category ? category.allowed_filters : []} />
     ) : shouldShowFilterShimmer ? (
@@ -289,7 +283,7 @@ const CategoryContent = props => {
 
     const currentFilter = activeFilters && activeFilters.length ? activeFilters[activeFilters.length - 1].label : '';
 
-    let title = activeFilters && activeFilters.length ? (
+    let title = category && !category.children.length && activeFilters && activeFilters.length ? (
         activeFilters.length > 1 ? 
             activeFilters[activeFilters.length - 1].label
          : currentFilter