1- import { useEffect } from 'react' ;
2- import { useLazyQuery , useQuery } from '@apollo/client' ;
1+ import { useEffect , useState } from 'react' ;
2+ import { useLazyQuery , useQuery , gql } from '@apollo/client' ;
33
44import mergeOperations from '../../../util/shallowMerge' ;
55import { useEventingContext } from '../../../context/eventing' ;
@@ -29,15 +29,98 @@ export const useCategoryContent = props => {
2929 getCategoryAvailableSortMethodsQuery
3030 } = operations ;
3131
32- const placeholderItems = Array . from ( { length : pageSize } ) . fill ( null ) ;
32+ const [
33+ getFiltersAttributeCode ,
34+ { data : filterAttributeData }
35+ ] = useLazyQuery ( getProductFiltersByCategoryQuery , {
36+ fetchPolicy : 'cache-and-network' ,
37+ nextFetchPolicy : 'cache-first'
38+ } ) ;
3339
34- const [ getFilters , { data : filterData } ] = useLazyQuery (
35- getProductFiltersByCategoryQuery ,
36- {
37- fetchPolicy : 'cache-and-network' ,
38- nextFetchPolicy : 'cache-first'
40+ useEffect ( ( ) => {
41+ if ( categoryId ) {
42+ getFiltersAttributeCode ( {
43+ variables : {
44+ categoryIdFilter : {
45+ eq : categoryId
46+ }
47+ }
48+ } ) ;
3949 }
40- ) ;
50+ } , [ categoryId , getFiltersAttributeCode ] ) ;
51+
52+ const availableFilterData = filterAttributeData
53+ ? filterAttributeData . products ?. aggregations
54+ : null ;
55+ const availableFilters = availableFilterData
56+ ?. map ( eachitem => eachitem . attribute_code )
57+ ?. sort ( ) ;
58+
59+ // Function to generate the dynamic query based on filter parameters
60+ const generateDynamicFiltersQuery = filterParams => {
61+ const categoryUid = `category_uid:{eq:"${ categoryId } ;
62+ let filterConditions = Object . keys ( filterParams )
63+ . map ( key => {
64+ const condition = Array . isArray ( filterParams [ key ] )
65+ ? 'in'
66+ : 'eq' ;
67+ const value = Array . isArray ( filterParams [ key ] )
68+ ? JSON . stringify ( filterParams [ key ] )
69+ : `"${ filterParams [ key ] } ;
70+ return `${ key } ${ condition } ${ value } ;
71+ } )
72+ . join ( ',' ) ;
73+
74+ filterConditions = [ categoryUid , filterConditions ] . join ( ',' ) ;
75+
76+ return gql `
77+ query getProductFiltersByCategory{
78+ products(
79+ filter: {
80+ ${ filterConditions }
81+ }
82+ ) {
83+ aggregations {
84+ label
85+ attribute_code
86+ count
87+ options {
88+ label
89+ value
90+ count
91+ }
92+ }
93+ }
94+ }
95+ ` ;
96+ } ;
97+
98+ const [ filterOptions , setFilterOptions ] = useState ( ) ;
99+
100+ const selectedFilters = { } ;
101+
102+ if ( filterOptions ) {
103+ for ( const [ group , items ] of filterOptions ) {
104+ availableFilters ?. map ( eachitem => {
105+ if ( eachitem === group && eachitem !== 'price' ) {
106+ const sampleArray = [ ] ;
107+ for ( const item of items ) {
108+ sampleArray . push ( item . value ) ;
109+ }
110+ selectedFilters [ group ] = sampleArray ;
111+ }
112+ } ) ;
113+ }
114+ }
115+
116+ const dynamicQuery = generateDynamicFiltersQuery ( selectedFilters ) ;
117+
118+ const placeholderItems = Array . from ( { length : pageSize } ) . fill ( null ) ;
119+
120+ const [ getFilters , { data : filterData } ] = useLazyQuery ( dynamicQuery , {
121+ fetchPolicy : 'cache-and-network' ,
122+ nextFetchPolicy : 'cache-first'
123+ } ) ;
41124
42125 const [ getSortMethods , { data : sortData } ] = useLazyQuery (
43126 getCategoryAvailableSortMethodsQuery ,
@@ -58,20 +141,13 @@ export const useCategoryContent = props => {
58141 }
59142 }
60143 ) ;
61-
62144 const [ , { dispatch } ] = useEventingContext ( ) ;
63145
64146 useEffect ( ( ) => {
65147 if ( categoryId ) {
66- getFilters ( {
67- variables : {
68- categoryIdFilter : {
69- eq : categoryId
70- }
71- }
72- } ) ;
148+ getFilters ( ) ;
73149 }
74- } , [ categoryId , getFilters ] ) ;
150+ } , [ categoryId , filterOptions , getFilters ] ) ;
75151
76152 useEffect ( ( ) => {
77153 if ( categoryId ) {
@@ -85,7 +161,7 @@ export const useCategoryContent = props => {
85161 }
86162 } , [ categoryId , getSortMethods ] ) ;
87163
88- const filters = filterData ? filterData . products . aggregations : null ;
164+ const filters = filterData ? filterData . products ? .aggregations : null ;
89165 const items = data ? data . products . items : placeholderItems ;
90166 const totalPagesFromData = data
91167 ? data . products . page_info . total_pages
@@ -122,6 +198,8 @@ export const useCategoryContent = props => {
122198 categoryName,
123199 categoryDescription,
124200 filters,
201+ filterOptions,
202+ setFilterOptions,
125203 items,
126204 totalCount,
127205 totalPagesFromData
0 commit comments