BUG#PWA-3180

magento · Oct 11, 2023 · 01089dd · 01089dd
1 parent 8b48551
commit 01089dd
Show file tree

Hide file tree

Showing 4 changed files with 95 additions and 94 deletions.
diff --git a/packages/peregrine/lib/talons/RootComponents/Category/categoryContent.gql.js b/packages/peregrine/lib/talons/RootComponents/Category/categoryContent.gql.js
@@ -7,16 +7,20 @@ export const GET_PRODUCT_FILTERS_BY_CATEGORY = gql`
         $fashionMaterialFilter: FilterEqualTypeInput!
         $fashionSizeFilter: FilterEqualTypeInput!
         $fashionStyleFilter: FilterEqualTypeInput!
-        $hasVideoFilter:FilterEqualTypeInput!
+        $hasVideoFilter: FilterEqualTypeInput!
+        $fashionPriceFilter: FilterRangeTypeInput!
     ) {
-        products(filter: { 
-            category_uid: $categoryIdFilter,
-            fashion_color:$fashionColorFilter,
-            fashion_material:$fashionMaterialFilter,
-            fashion_size:$fashionSizeFilter,
-            fashion_style:$fashionStyleFilter,
-            has_video:$hasVideoFilter
-         }) {
+        products(
+            filter: {
+                category_uid: $categoryIdFilter
+                fashion_color: $fashionColorFilter
+                fashion_material: $fashionMaterialFilter
+                fashion_size: $fashionSizeFilter
+                fashion_style: $fashionStyleFilter
+                has_video: $hasVideoFilter
+                price: $fashionPriceFilter
+            }
+        ) {
             aggregations {
                 label
                 count

diff --git a/packages/peregrine/lib/talons/RootComponents/Category/useCategoryContent.js b/packages/peregrine/lib/talons/RootComponents/Category/useCategoryContent.js
@@ -1,4 +1,4 @@
-import { useEffect,useState,createContext } from 'react';
+import { useEffect, useState, createContext } from 'react';
 import { useLazyQuery, useQuery } from '@apollo/client';
 
 import mergeOperations from '../../../util/shallowMerge';
@@ -7,7 +7,7 @@ import { useFilterState } from '../../FilterModal/useFilterState';
 // pwa-studio/packages/peregrine/lib/talons/FilterModal/useFilterState.js
 //pwa-studio/packages/peregrine/lib/talons/RootComponents/FilterModal/useFilterState
 import DEFAULT_OPERATIONS from './categoryContent.gql';
-
+import { logMissingFieldErrors } from '@apollo/client/core/ObservableQuery';
 
 /**
  * Returns props necessary to render the categoryContent component.
@@ -25,24 +25,17 @@ export const useCategoryContent = props => {
     const { categoryId, data, pageSize = 6 } = props;
 
     const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
-
-    //console.log(state);
+
     const {
         getCategoryContentQuery,
         getProductFiltersByCategoryQuery,
         getCategoryAvailableSortMethodsQuery
     } = operations;
 
     const placeholderItems = Array.from({ length: pageSize }).fill(null);
-
-    const [filterOptions, setFilterOptions] = useState();
-    // const [queryData,setQueryData]=useState([]);
-
-
-    console.log(filterOptions  ,"final options");
 
+    const [filterOptions, setFilterOptions] = useState();
 
-
     const [getFilters, { data: filterData }] = useLazyQuery(
         getProductFiltersByCategoryQuery,
         {
@@ -51,7 +44,6 @@ export const useCategoryContent = props => {
         }
     );
 
-    //console.log(filterData);
     const [getSortMethods, { data: sortData }] = useLazyQuery(
         getCategoryAvailableSortMethodsQuery,
         {
@@ -74,90 +66,87 @@ export const useCategoryContent = props => {
 
     const [, { dispatch }] = useEventingContext();
 
-
-    // useEffect(()=>{
-
-    //     console.log("only when it was working");
-    // },[filterState])
-
     useEffect(() => {
-        let fashionColor='';
-        let fashionMaterial='';
-        let fashionSize='';
-        let fashionStyle='';
-        let hasVideo='';
-        let priceValue="";
+        let fashionColor = '';
+        let fashionMaterial = '';
+        let fashionSize = '';
+        let fashionStyle = '';
+        let hasVideo = '';
+        let priceValue = {
+            from: '',
+            to: ''
+        };
+        let filterIteration = true;
+
         //{from: "40" to: "59"}
-        if (filterOptions){
-            for (const [group, items] of filterOptions) {
 
-                if (group==="fashion_color"){
-                    const[item]=items
-                    // console.log(items,"items");
-                    // console.log(item,"item");
-                    fashionColor=item.value;
+        if (filterOptions) {
+            for (const [group, items] of filterOptions) {
+                if (group === 'fashion_color') {
+                    const [item] = items;
+                    fashionColor = item.value;
                 }
-                if (group==="fashion_material"){
-                    const[item]=items
-                    fashionMaterial=item.value;
+                if (group === 'fashion_material') {
+                    const [item] = items;
+                    fashionMaterial = item.value;
                 }
-                if (group==="fashion_size"){
-                    const[item]=items
-                    fashionSize=item.value;
+                if (group === 'fashion_size') {
+                    const [item] = items;
+                    fashionSize = item.value;
                 }
-                if (group==="fashion_style"){
-                    const[item]=items
-                    fashionStyle=item.value;
+                if (group === 'fashion_style') {
+                    const [item] = items;
+                    fashionStyle = item.value;
                 }
-                
-                if (group==="has_video"){
-                    const[item]=items
-                    hasVideo=item.value;
+
+                if (group === 'has_video') {
+                    const [item] = items;
+                    hasVideo = item.value;
                 }
-                if (group==="price"){
-                    const[item]=items
-                    priceValue=item.value;
+                if (group === 'price') {
+                    const [item] = items;
+                    filterIteration = item;
+                    const valueAdd = item?.value?.split('_');
+
+                    if (valueAdd) {
+                        priceValue.from = valueAdd[0];
+                        priceValue.to = valueAdd[1];
+                    }
                 }
-
+            }
         }
-        //console.log(priceValue);
-    }
-    console.log(fashionColor);
-        if (categoryId) {
+
+        if (categoryId && filterIteration) {
             getFilters({
                 variables: {
                     categoryIdFilter: {
                         eq: categoryId
-                    }
-                   ,
-                    fashionColorFilter:{
-                        eq:fashionColor
                     },
-                    fashionMaterialFilter:{
-                        eq:fashionMaterial
+                    fashionColorFilter: {
+                        eq: fashionColor
                     },
-                    fashionSizeFilter:{
-                        eq:fashionSize
+                    fashionMaterialFilter: {
+                        eq: fashionMaterial
                     },
-                    fashionStyleFilter:{
-                        eq:fashionStyle
+                    fashionSizeFilter: {
+                        eq: fashionSize
                     },
-                    hasVideoFilter:{
-                        eq:hasVideo
+                    fashionStyleFilter: {
+                        eq: fashionStyle
                     },
-                    hasVideoFilter:{
-                        eq:priceValue
-                    }
+                    hasVideoFilter: {
+                        eq: hasVideo
+                    },
+                    fashionPriceFilter: priceValue
                 }
             });
         }
-
     }, [categoryId, filterOptions, getFilters]);
 
     useEffect(() => {
         if (categoryId) {
             getSortMethods({
-                variables: { 
+                variables: {
                     categoryIdFilter: {
                         in: categoryId
                     }

diff --git a/packages/venia-ui/lib/RootComponents/Category/categoryContent.js b/packages/venia-ui/lib/RootComponents/Category/categoryContent.js
@@ -1,4 +1,10 @@
-import React, { Fragment, Suspense, useMemo, useRef,createContext } from 'react';
+import React, {
+    Fragment,
+    Suspense,
+    useMemo,
+    useRef,
+    createContext
+} from 'react';
 import { FormattedMessage } from 'react-intl';
 import { array, number, shape, string } from 'prop-types';
 
@@ -38,7 +44,7 @@ const CategoryContent = props => {
         pageSize
     } = props;
     const [currentSort] = sortProps;
-    
+
     const talonProps = useCategoryContent({
         categoryId,
         data,
@@ -81,9 +87,11 @@ const CategoryContent = props => {
     ) : null;
 
     const sidebar = shouldShowFilterButtons ? (
-        <FilterContext.Provider value={[filterOptions,setFilterOptions]}>
-        <FilterSidebar filters={filters} />
-         </FilterContext.Provider>
+        <FilterSidebar
+            filters={filters}
+            setFilterOptions={setFilterOptions}
+            filterOptions
+        />
     ) : shouldShowFilterShimmer ? (
         <FilterSidebarShimmer />
     ) : null;

diff --git a/packages/venia-ui/lib/components/FilterSidebar/filterSidebar.js b/packages/venia-ui/lib/components/FilterSidebar/filterSidebar.js
@@ -1,9 +1,9 @@
-import React, { useMemo, useCallback, useRef,useContext } from 'react';
+import React, { useMemo, useCallback, useRef, useContext } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { array, arrayOf, shape, string, number } from 'prop-types';
 import { useFilterSidebar } from '@magento/peregrine/lib/talons/FilterSidebar';
 
-import { FilterContext } from "../../RootComponents/Category/categoryContent";
+import { FilterContext } from '../../RootComponents/Category/categoryContent';
 import { useStyle } from '../../classify';
 import LinkButton from '../LinkButton';
 import CurrentFilters from '../FilterModal/CurrentFilters';
@@ -18,7 +18,12 @@ const SCROLL_OFFSET = 150;
  * @param {Object} props.filters - filters to display
  */
 const FilterSidebar = props => {
-    const { filters, filterCountToOpen } = props;
+    const {
+        filters,
+        filterCountToOpen,
+        setFilterOptions,
+        filterOptions
+    } = props;
     const talonProps = useFilterSidebar({ filters });
     const {
         filterApi,
@@ -33,11 +38,6 @@ const FilterSidebar = props => {
     const filterRef = useRef();
     const classes = useStyle(defaultClasses, props.classes);
 
-    const filterValue= useContext(FilterContext);
-
-    const[filterOptions,setFilterOptions]=filterValue;
-    //console.log(setFilterOptions,"Filter option should be function");
-
     const handleApplyFilter = useCallback(
         (...args) => {
             const filterElement = filterRef.current;
@@ -60,12 +60,12 @@ const FilterSidebar = props => {
         () =>
             Array.from(filterItems, ([group, items], iteration) => {
                 const blockState = filterState.get(group);
-                console.log(filterState);
+
                 const groupName = filterNames.get(group);
-                if(setFilterOptions){
+                if (filterState) {
                     setFilterOptions(filterState);
                 }
-                
+
                 const frontendInput = filterFrontendInput.get(group);
                 return (
                     <FilterBlock