Fix image sizes & category filters (#939)

* Fix image height & missing query string

* Update ProductView.tsx

* Update ProductView.tsx

* Update index.tsx

* Remove unused path

packages/commerce/src/api/utils/index.ts

@@ -28,7 +28,7 @@ export const getInput = (req: NextRequest) => req.json().catch(() => ({}))
  * @param req NextApiRequest
  * @param path string
  */
-export const transformRequest = (req: NextApiRequest, path: string) => {
+export const transformRequest = (req: NextApiRequest) => {
   const headers = new Headers()
   let body
 
@@ -44,7 +44,10 @@ export const transformRequest = (req: NextApiRequest, path: string) => {
     body = JSON.stringify(req.body)
   }
 
-  return new NextRequest(`https://${req.headers.host}/api/commerce/${path}`, {
+  // Get the url path & query string
+  const url = new URL(req.url || '/', `https://${req.headers.host}`)
+
+  return new NextRequest(url, {
     headers,
     method: req.method,
     body,

packages/commerce/src/api/utils/node-handler.ts

@@ -44,7 +44,7 @@ export default function nodeHandler<P extends APIProvider>(
         )
       }
 
-      const output = await handlers[path](transformRequest(req, path))
+      const output = await handlers[path](transformRequest(req))
       const { status, errors, data, redirectTo, headers } = output
 
       setHeaders(res, headers)

site/components/product/ProductCard/ProductCard.module.css

@@ -73,7 +73,7 @@
 }
 
 .imageContainer .productImage {
-  @apply transform transition-transform duration-500 object-cover w-auto h-full;
+  @apply transform transition-transform duration-500 object-cover;
 }
 
 .root .wishlistButton {

site/components/product/ProductView/ProductView.tsx

@@ -69,10 +69,7 @@ const ProductView: FC<ProductViewProps> = ({ product, relatedProducts }) => {
           <Text variant="sectionHeading">Related Products</Text>
           <div className={s.relatedProductsGrid}>
             {relatedProducts.map((p) => (
-              <div
-                key={p.path}
-                className="animated fadeIn bg-accent-0 border border-accent-2"
-              >
+              <div key={p.path} className="bg-accent-0 border border-accent-2">
                 <ProductCard
                   noNameTag
                   product={p}
@@ -81,8 +78,7 @@ const ProductView: FC<ProductViewProps> = ({ product, relatedProducts }) => {
                   className="animated fadeIn"
                   imgProps={{
                     alt: p.name,
-                    width: 300,
-                    height: 300,
+                    className: 'w-full h-full object-cover',
                   }}
                 />
               </div>

site/pages/index.tsx

@@ -70,8 +70,8 @@ export default function Home({
             product={product}
             imgProps={{
               alt: product.name,
-              width: i === 0 ? 1080 : 540,
-              height: i === 0 ? 1080 : 540,
+              width: i === 1 ? 1080 : 540,
+              height: i === 1 ? 1080 : 540,
             }}
           />
         ))}