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, Skeleton } from '@components/ui' import { ProductCard } from '@components/product' import getSlug from '@utils/get-slug' import { filterQuery, getCategoryPath, getDesignerPath, useSearchMeta, } from '@utils/search' import { range } from 'lodash' 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 ? ( <> Showing {data.products.length} results for " {q}" There are no products that match "{q}" ) : ( <> Searching for: "{q}" )}
( ) : () => ( ) } />
) } Search.Layout = Layout