crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-23 04:36:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

✨ feat: filter products from menu filter (in header)

Browse Source 
:%s
This commit is contained in:
lytrankieio123
2021-10-06 18:07:11 +07:00
parent fb375ed4e8
commit 721ae9dedc
4 changed files with 55 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/common/MenuFilter/MenuFilter.tsx
View File

@@ -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>

8
src/components/common/MenuFilter/MenuFilterItem/MenuFilterItem.tsx
View File

@@ -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)

44
src/components/common/MenuNavigationProductList/MenuNavigationProductList.tsx
View File

@@ -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,16 +81,24 @@ const MenuNavigationProductList = ({ visible, onClose }: Props) => {
setSortValue(value)
}
const onCategoryChange = (value: string, isSelect: boolean) => {
if (isSelect) {
setCategoryQuery(value)
} else {
setCategoryQuery('')
}
}
const onFilterOptionChange = (value: string, type: string, isSelect: boolean = true) => {
let rs = [...categoryQuery]
let setDataFunction = setCategoryQuery
if (type === QUERY_KEY.CATEGORY) {
onCategoryChange(value, isSelect)
} else {
let rs = [...featuredQuery]
let setDataFunction = setFeaturedQuery
if (type === CODE_FACET_BRAND) {
rs = [...brandQuery]
setDataFunction = setBrandQuery
} else if (type === CODE_FACET_FEATURED) {
rs = [...featuredQuery]
setDataFunction = setFeaturedQuery
}
if (isSelect) {
@@ -93,6 +108,7 @@ const MenuNavigationProductList = ({ visible, onClose }: Props) => {
}
setDataFunction(rs)
}
}
return (
@@ -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>

1
src/components/hooks/product/useSearchProducts.tsx
View File

@@ -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 }
}