bug: fix bug useGetAllCollection

This commit is contained in:
Quangnhankie 2021-09-30 11:13:46 +07:00
parent 8a952c1d27
commit 748456dbbb
4 changed files with 27 additions and 24 deletions

View File

@ -19,3 +19,13 @@ export const getCollectionsQuery = /* GraphQL */ `
}
}
`
export const getCollectionsNameQuery = /* GraphQL */ `
query getCollections {
collections{
items{
name
link:slug
}
}
}
`

View File

@ -3,6 +3,7 @@ import Link from 'next/link'
import { useRouter } from 'next/router'
import { memo } from 'react'
import MenuDropdown from 'src/components/common/MenuDropdown/MenuDropdown'
import { useGetAllCollection } from 'src/components/hooks/collection'
import { ProductFeature, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils'
import HeaderNoti from './HeaderNoti/HeaderNoti'
import s from './HeaderSubMenu.module.scss'
@ -30,39 +31,18 @@ const MENU = [
},
]
// note: hard code, remove later
const CATEGORY = [
{
name: 'Veggie',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`,
},
{
name: 'Seafood',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=seafood`,
},
{
name: 'Frozen',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=frozen`,
},
{
name: 'Coffee Bean',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=coffee-bean`,
},
{
name: 'Sauce',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=sauce`,
},
]
const HeaderSubMenu = memo(() => {
const router = useRouter()
const {collections} = useGetAllCollection();
return (
<section className={s.headerSubMenu}>
<ul className={s.menu}>
{/* todo: handle active item */}
<li>
<MenuDropdown options={CATEGORY} align="left">Categories</MenuDropdown>
<MenuDropdown options={collections?.items ?? []} align="left">Categories</MenuDropdown>
</li>
{
MENU.map(item => <li key={item.name}

View File

@ -0,0 +1 @@
export {default as useGetAllCollection} from "./useGetAllCollection"

View File

@ -0,0 +1,12 @@
import { GetCollectionsQuery } from '@framework/schema';
import { getCollectionsNameQuery } from '@framework/utils/queries/get-collections-query';
import gglFetcher from 'src/utils/gglFetcher';
import useSWR from 'swr';
const useGetAllCollection = () => {
const { data, ...rest } = useSWR<GetCollectionsQuery>([getCollectionsNameQuery], gglFetcher)
return { collections: data?.collections, ...rest }
}
export default useGetAllCollection;