From 721ae9dedc4ccc4a4fd7c4677e89aa6bfe4cb932 Mon Sep 17 00:00:00 2001
From: lytrankieio123 <lytran@kie.io>
Date: Wed, 6 Oct 2021 18:07:11 +0700
Subject: [PATCH] :sparkles: feat: filter products from menu filter (in header)

:%s
---
 .../common/MenuFilter/MenuFilter.tsx          |  5 +-
 .../MenuFilterItem/MenuFilterItem.tsx         |  8 ++-
 .../MenuNavigationProductList.tsx             | 64 +++++++++++++------
 .../hooks/product/useSearchProducts.tsx       |  1 -
 4 files changed, 55 insertions(+), 23 deletions(-)

diff --git a/src/components/common/MenuFilter/MenuFilter.tsx b/src/components/common/MenuFilter/MenuFilter.tsx
index b23816aff..72f5a8302 100644
--- a/src/components/common/MenuFilter/MenuFilter.tsx
+++ b/src/components/common/MenuFilter/MenuFilter.tsx
@@ -7,9 +7,11 @@ interface Props {
     categories: { name: string, slug?: string, code?: string }[],
     type: string,
     onChange: (value: string, type: string, isSellect?: boolean) => void
+    isSingleSelect?: boolean
+    singleSelectedValue?: string
 }
 
-const MenuFilter = ({ heading, categories, type, onChange }: Props) => {
+const MenuFilter = ({ heading, categories, type, onChange, singleSelectedValue, isSingleSelect }: Props) => {
     function handleChange(value: string, isSellect: boolean) {
         onChange(value, type, isSellect)
     }
@@ -25,6 +27,7 @@ const MenuFilter = ({ heading, categories, type, onChange }: Props) => {
                         type={type}
                         value={item.slug || item.code || ''}
                         onChange={handleChange}
+                        isActive={isSingleSelect && (item.slug || item.code) === singleSelectedValue}
                     />)
                 }
             </ul>
diff --git a/src/components/common/MenuFilter/MenuFilterItem/MenuFilterItem.tsx b/src/components/common/MenuFilter/MenuFilterItem/MenuFilterItem.tsx
index e247bfe93..eeb96fae1 100644
--- a/src/components/common/MenuFilter/MenuFilterItem/MenuFilterItem.tsx
+++ b/src/components/common/MenuFilter/MenuFilterItem/MenuFilterItem.tsx
@@ -8,12 +8,18 @@ interface Props {
     name: string,
     value: string,
     type: string,
+    isActive?: boolean
     onChange: (value: string, isSellect: boolean) => void
 }
 
-const MenuFilterItem = ({ name, value, type, onChange }: Props) => {
+const MenuFilterItem = ({ name, value, type, isActive, onChange }: Props) => {
     const router = useRouter()
     const [isSelected, setIsSelected] = useState<boolean>()
+
+    useEffect(() => {
+        setIsSelected(isActive)
+    }, [isActive])
+
     useEffect(() => {
         const rs = (router.query[type] || []).includes(value)
         setIsSelected(rs)
diff --git a/src/components/common/MenuNavigationProductList/MenuNavigationProductList.tsx b/src/components/common/MenuNavigationProductList/MenuNavigationProductList.tsx
index af3d4c9f9..122e8e3f8 100644
--- a/src/components/common/MenuNavigationProductList/MenuNavigationProductList.tsx
+++ b/src/components/common/MenuNavigationProductList/MenuNavigationProductList.tsx
@@ -38,7 +38,7 @@ const MenuNavigationProductList = ({ visible, onClose }: Props) => {
     const { collections, loading: collectionLoading } = useGetAllCollection()
     const [brandQuery, setBrandQuery] = useState<string[]>([])
     const [featuredQuery, setFeaturedQuery] = useState<string[]>([])
-    const [categoryQuery, setCategoryQuery] = useState<string[]>([])
+    const [categoryQuery, setCategoryQuery] = useState<string>()
     const [sortValue, setSortValue] = useState<string>();
 
     useEffect(() => {
@@ -48,11 +48,18 @@ const MenuNavigationProductList = ({ visible, onClose }: Props) => {
         }
     }, [router.query])
 
+    useEffect(() => {
+        const rs = router.query[QUERY_KEY.CATEGORY] as string
+        if (rs) {
+            setCategoryQuery(rs)
+        }
+    }, [router.query])
+
     function onSubmit() {
         let newURL = `${ROUTE.PRODUCTS}?`
 
-        if (categoryQuery.length > 0) {
-            newURL += `&${QUERY_KEY.CATEGORY}=${categoryQuery.join(",")}`
+        if (categoryQuery) {
+            newURL += `&${QUERY_KEY.CATEGORY}=${categoryQuery}`
         }
 
         if (brandQuery.length > 0) {
@@ -74,24 +81,33 @@ const MenuNavigationProductList = ({ visible, onClose }: Props) => {
         setSortValue(value)
     }
 
-    const onFilterOptionChange = (value: string, type: string, isSelect: boolean = true) => {
-        let rs = [...categoryQuery]
-        let setDataFunction = setCategoryQuery
-
-        if (type === CODE_FACET_BRAND) {
-            rs = [...brandQuery]
-            setDataFunction = setBrandQuery
-        } else if (type === CODE_FACET_FEATURED) {
-            rs = [...featuredQuery]
-            setDataFunction = setFeaturedQuery
-        }
-
+    const onCategoryChange = (value: string, isSelect: boolean) => {
         if (isSelect) {
-            rs.push(value)
+            setCategoryQuery(value)
         } else {
-            rs = rs.filter(item => item !== value)
+            setCategoryQuery('')
+        }
+    }
+
+    const onFilterOptionChange = (value: string, type: string, isSelect: boolean = true) => {
+        if (type === QUERY_KEY.CATEGORY) {
+            onCategoryChange(value, isSelect)
+        } else {
+            let rs = [...featuredQuery]
+            let setDataFunction = setFeaturedQuery
+
+            if (type === CODE_FACET_BRAND) {
+                rs = [...brandQuery]
+                setDataFunction = setBrandQuery
+            }
+
+            if (isSelect) {
+                rs.push(value)
+            } else {
+                rs = rs.filter(item => item !== value)
+            }
+            setDataFunction(rs)
         }
-        setDataFunction(rs)
     }
 
 
@@ -103,8 +119,16 @@ const MenuNavigationProductList = ({ visible, onClose }: Props) => {
                         <h3>FILTER</h3>
                         <div onClick={onClose}><IconHide /></div>
                     </div>
+
                     {collectionLoading && <SkeletonParagraph rows={5} />}
-                    <MenuFilter categories={collections} heading="Categories" type={QUERY_KEY.CATEGORY} onChange={onFilterOptionChange} />
+                    <MenuFilter categories={collections}
+                        heading="Categories"
+                        type={QUERY_KEY.CATEGORY}
+                        onChange={onFilterOptionChange} 
+                        singleSelectedValue={categoryQuery}
+                        isSingleSelect={true}
+                        />
+
                     {facetsLoading && <>
                         <SkeletonParagraph rows={5} />
                         <SkeletonParagraph rows={5} />
@@ -118,7 +142,7 @@ const MenuNavigationProductList = ({ visible, onClose }: Props) => {
                             onChange={onFilterOptionChange}
                         />)
                     }
-                    <MenuSort heading="SORT BY" onChange={onSortChange} value={sortValue} options={OPTIONS_SORT_PRODUCT}/>
+                    <MenuSort heading="SORT BY" onChange={onSortChange} value={sortValue} options={OPTIONS_SORT_PRODUCT} />
                     <div className={s.foot}>
                         <ButtonCommon size="large" onClick={onSubmit}>{LANGUAGE.BUTTON_LABEL.CONFIRM}</ButtonCommon>
                     </div>
diff --git a/src/components/hooks/product/useSearchProducts.tsx b/src/components/hooks/product/useSearchProducts.tsx
index e9d2ca127..78acb7cf3 100644
--- a/src/components/hooks/product/useSearchProducts.tsx
+++ b/src/components/hooks/product/useSearchProducts.tsx
@@ -6,7 +6,6 @@ import useSWR from 'swr'
 
 const useSearchProducts = (options?: QuerySearchArgs) => {
   const { data, isValidating, ...rest } = useSWR<GetAllProductsQuery>([getAllProductsQuery, options], gglFetcher)
-  console.log("on search ", data?.search.totalItems, options,  data?.search.items)
 
   return { products: data?.search.items.map((item) => normalizeSearchResult(item)), totalItems: data?.search.totalItems, loading: isValidating, ...rest }
 }