import { GetStaticPropsContext, InferGetStaticPropsType } from 'next' import { useRouter } from 'next/router' import Link from 'next/link' import cn from 'classnames' import getSiteInfo from '@lib/bigcommerce/api/operations/get-site-info' import useSearch from '@lib/bigcommerce/products/use-search' import { Layout } from '@components/core' import { Container, Grid } from '@components/ui' import { ProductCard } from '@components/product' import { filterQuery, getCategoryPath, getDesignerPath, getSlug, useSearchMeta, } from '@utils/search' export async function getStaticProps({ preview }: GetStaticPropsContext) { const { categories, brands } = await getSiteInfo() return { props: { categories, brands }, } } const SORT = Object.entries({ 'latest-desc': 'Latest arrivals', 'trending-desc': 'Trending', 'price-asc': 'Price: Low to high', 'price-desc': 'Price: High to low', }) export default function Search({ categories, brands, }: InferGetStaticPropsType) { const router = useRouter() const { asPath } = router const { q, sort } = router.query const query = filterQuery({ q, sort }) const { pathname, category, brand } = useSearchMeta(asPath) const activeCategory = categories.find( (cat) => getSlug(cat.path) === category ) const activeBrand = brands.find( (b) => getSlug(b.node.path) === `brands/${brand}` )?.node const { data } = useSearch({ search: typeof q === 'string' ? q : '', categoryId: activeCategory?.entityId, brandId: activeBrand?.entityId, sort: typeof sort === 'string' ? sort : '', }) return (
{data ? ( <> {q && (
{data.found ? ( <>Showing {data.products.length} results for ) : ( <>There are no products that match )}{' '} "{q}"
)} ) : ( // TODO: add a proper loading state
Searching...
)}
) } Search.Layout = Layout