From a02f58bbf25df871a73c37e6187760d3acc3c3cb Mon Sep 17 00:00:00 2001
From: Luis Alvarez <luis@vercel.com>
Date: Wed, 21 Oct 2020 21:41:06 -0500
Subject: [PATCH] Add image component to cart items

---
 components/cart/CartItem/CartItem.tsx          |  6 ++++--
 components/product/ProductCard/ProductCard.tsx | 10 +++-------
 lib/get-pathname.ts                            |  3 +++
 3 files changed, 10 insertions(+), 9 deletions(-)
 create mode 100644 lib/get-pathname.ts

diff --git a/components/cart/CartItem/CartItem.tsx b/components/cart/CartItem/CartItem.tsx
index 622001e8d..e1bb25db4 100644
--- a/components/cart/CartItem/CartItem.tsx
+++ b/components/cart/CartItem/CartItem.tsx
@@ -1,8 +1,10 @@
+import { ChangeEvent, useEffect, useState } from 'react'
+import Image from 'next/image'
 import { Trash, Plus, Minus } from '@components/icon'
 import usePrice from '@lib/bigcommerce/use-price'
 import useUpdateItem from '@lib/bigcommerce/cart/use-update-item'
 import useRemoveItem from '@lib/bigcommerce/cart/use-remove-item'
-import { ChangeEvent, useEffect, useState } from 'react'
+import getPathname from '@lib/get-pathname'
 import s from './CartItem.module.css'
 
 const CartItem = ({
@@ -56,7 +58,7 @@ const CartItem = ({
   return (
     <li className="flex flex-row space-x-8 py-6">
       <div className="w-12 h-12 bg-violet relative overflow-hidden">
-        <img className={s.productImage} src={item.image_url} />
+        <Image src={getPathname(item.image_url)} width={60} height={60} />
       </div>
       <div className="flex-1 flex flex-col justify-between text-base">
         <span className="font-bold mb-3">{item.name}</span>
diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx
index ceb664e6e..6b387ffeb 100644
--- a/components/product/ProductCard/ProductCard.tsx
+++ b/components/product/ProductCard/ProductCard.tsx
@@ -2,9 +2,10 @@ import { FC, ReactNode, Component } from 'react'
 import cn from 'classnames'
 import Image from 'next/image'
 import Link from 'next/link'
-import s from './ProductCard.module.css'
 import type { ProductNode } from '@lib/bigcommerce/api/operations/get-all-products'
+import getPathname from '@lib/get-pathname'
 import { Heart } from '@components/icon'
+import s from './ProductCard.module.css'
 
 interface Props {
   className?: string
@@ -16,11 +17,6 @@ interface Props {
   priority?: boolean
 }
 
-function getImagePath(imageUrl: string) {
-  const url = new URL(imageUrl)
-  return url.pathname
-}
-
 const ProductCard: FC<Props> = ({
   className,
   product: p,
@@ -29,7 +25,7 @@ const ProductCard: FC<Props> = ({
   imgHeight,
   priority,
 }) => {
-  const src = getImagePath(p.images.edges?.[0]?.node.urlOriginal!)
+  const src = getPathname(p.images.edges?.[0]?.node.urlOriginal!)
 
   if (variant === 'slim') {
     return (
diff --git a/lib/get-pathname.ts b/lib/get-pathname.ts
new file mode 100644
index 000000000..dbf7734ad
--- /dev/null
+++ b/lib/get-pathname.ts
@@ -0,0 +1,3 @@
+export default function getPathname(url: string) {
+  return new URL(url).pathname
+}