crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-18 23:46:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update page.tsx

Browse Source 
Refactor component to conditionally render different JSX and simplify repetitive code.
This commit is contained in:
Harish 2023-12-18 19:43:05 +05:30 committed by GitHub
parent 3a18f9a098
commit e0cdd867f4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 21 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
app/search/page.tsx
View File

@ -19,23 +19,30 @@ export default async function SearchPage({
const { sortKey, reverse } = sorting.find((item) => item.slug === sort) || defaultSort; const { sortKey, reverse } = sorting.find((item) => item.slug === sort) || defaultSort;
const products = await getProducts({ sortKey, reverse, query: searchValue }); const products = await getProducts({ sortKey, reverse, query: searchValue });
const resultsText = products.length > 1 ? 'results' : 'result'; const totalProducts = products.length;
const isProductEmpty = totalProduct === 0;
const resultsText = totalProducts > 1 ? 'results' : 'result';
if(searchValue && isProductEmpty){
return (
<p className="mb-4">
There are no products that match
</p>
)
}
if(searchValue && !isProductEmpty){
return ( return (
<> <>
{searchValue ? (
<p className="mb-4"> <p className="mb-4">
{products.length === 0 {`Showing ${totalProducts} ${resultsText} for `}
? 'There are no products that match '
: `Showing ${products.length} ${resultsText} for `}
<span className="font-bold">&quot;{searchValue}&quot;</span>
</p> </p>
) : null}
{products.length > 0 ? (
<Grid className="grid-cols-1 sm:grid-cols-2 lg:grid-cols-3"> <Grid className="grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
<ProductGridItems products={products} /> <ProductGridItems products={products} />
</Grid> </Grid>
) : null}
</> </>
); )
}
return null;
} }