import cn from 'classnames' import type { GetStaticPropsContext, InferGetStaticPropsType } from 'next' import Link from 'next/link' import { useRouter } from 'next/router' import { Layout } from '@components/core' import { ProductCard } from '@components/product' import { Container, Grid, Skeleton } from '@components/ui' import useSearch from '@lib/bigcommerce/products/use-search' import getAllPages from '@lib/bigcommerce/api/operations/get-all-pages' import getSiteInfo from '@lib/bigcommerce/api/operations/get-site-info' import rangeMap from '@lib/range-map' import getSlug from '@utils/get-slug' import { filterQuery, getCategoryPath, getDesignerPath, useSearchMeta, } from '@utils/search' export async function getStaticProps({ preview }: GetStaticPropsContext) { const { pages } = await getAllPages() const { categories, brands } = await getSiteInfo() return { props: { pages, 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 (
{q && (
{data ? ( <> Showing {data.products.length} results for " {q}" There are no products that match "{q}" ) : ( <> Searching for: "{q}" )}
)} {data ? ( {data.products.map(({ node }) => ( ))} ) : ( {rangeMap(12, (i) => ( ))} )}
) } Search.Layout = Layout