Changes

pages/search.tsx

@@ -3,16 +3,29 @@ import type { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
 import Link from 'next/link'
 import { useState } from 'react'
 import { useRouter } from 'next/router'
-import { getConfig } from '@framework/api'
-import getAllPages from '@framework/api/operations/get-all-pages'
-import getSiteInfo from '@framework/api/operations/get-site-info'
-import useSearch from '@framework/product/use-search'
+
 import { Layout } from '@components/common'
 import { ProductCard } from '@components/product'
 import { Container, Grid, Skeleton } from '@components/ui'
 
+import { getConfig } from '@framework/api'
+import getAllPages from '@framework/api/operations/get-all-pages'
+import getSiteInfo from '@framework/api/operations/get-site-info'
+import useSearch from '@framework/product/use-search'
+
 import rangeMap from '@lib/range-map'
+
+// TODO(bc) Remove this. This should come from the API
 import getSlug from '@lib/get-slug'
+
+// TODO (bc) : Remove or standarize this.
+const SORT = Object.entries({
+  'latest-desc': 'Latest arrivals',
+  'trending-desc': 'Trending',
+  'price-asc': 'Price: Low to high',
+  'price-desc': 'Price: High to low',
+})
+
 import {
   filterQuery,
   getCategoryPath,
@@ -27,19 +40,11 @@ export async function getStaticProps({
   const config = getConfig({ locale })
   const { pages } = await getAllPages({ config, preview })
   const { categories, brands } = await getSiteInfo({ config, preview })
-
   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,
@@ -76,7 +81,6 @@ export default function Search({
     } else {
       setToggleFilter(!toggleFilter)
     }
-
     setActiveFilter(filter)
   }
 
@@ -333,14 +337,16 @@ export default function Search({
 
           {data ? (
             <Grid layout="normal">
-              {data.products.map(({ node }) => (
+              {data.products.map((product) => (
                 <ProductCard
                   variant="simple"
-                  key={node.path}
+                  key={product.path}
                   className="animated fadeIn"
-                  product={node}
-                  imgWidth={480}
-                  imgHeight={480}
+                  product={product}
+                  imgProps={{
+                    width: 480,
+                    height: 480,
+                  }}
                 />
               ))}
             </Grid>