Fixed bugs and updated hooks

components/product/ProductView/ProductView.tsx

@@ -36,8 +36,6 @@ const ProductView: FC<Props> = ({ product, productData, className }) => {
     })
   }
 
-  console.log('PRODUCT', product)
-
   return (
     <div className={cn(s.root, className)}>
       <div className="absolute">

lib/bigcommerce/cart/use-add-item.tsx

@@ -1,7 +1,7 @@
 import type { Fetcher } from '@lib/commerce'
 import { default as useCartAddItem } from '@lib/commerce/cart/use-add-item'
 import type { Item } from '../api/cart'
-import { Cart } from '.'
+import { Cart, useCart } from '.'
 
 export type { Item }
 
@@ -19,5 +19,13 @@ function fetcher(fetch: Fetcher<Cart>, { item }: { item: Item }) {
 }
 
 export default function useAddItem() {
-  return useCartAddItem<Cart, { item: Item }>(fetcher)
+  const { mutate } = useCart()
+  const fn = useCartAddItem<Cart, { item: Item }>(fetcher)
+  const addItem: typeof fn = async (input) => {
+    const data = await fn(input)
+    mutate(data)
+    return data
+  }
+
+  return addItem
 }

lib/bigcommerce/index.tsx

@@ -34,7 +34,6 @@ export const bigcommerceConfig: CommerceConfig = {
 
     if (res.ok) {
       const { data } = await res.json()
-      console.log('DATA', data)
       return data
     }
 

lib/commerce/cart/index.tsx

@@ -1,4 +1,4 @@
-import { createContext, useContext, FC } from 'react'
+import { createContext, useContext, FC, useCallback } from 'react'
 import useSWR, { responseInterface } from 'swr'
 import Cookies from 'js-cookie'
 import { useCommerce } from '..'
@@ -17,10 +17,13 @@ const CartProvider: FC<CartProviderProps> = ({ children, query, url }) => {
   const { fetcher: fetch, cartCookie } = useCommerce()
   const fetcher = (url?: string, query?: string) => fetch({ url, query })
   const cartId = Cookies.get(cartCookie)
-  const response = useSWR(() => (cartId ? [url, query] : null), fetcher)
+  const response = useSWR(() => (cartId ? [url, query] : null), fetcher, {
+    revalidateOnFocus: false,
+  })
 
   return (
-    <CartContext.Provider value={{ ...response, isEmpty: true }}>
+    // Avoid destructuring in `response` so we don't trigger the getters early
+    <CartContext.Provider value={Object.assign(response, { isEmpty: true })}>
       {children}
     </CartContext.Provider>
   )

lib/commerce/cart/use-add-item.tsx

@@ -6,11 +6,6 @@ export default function useAddItem<T, Input>(
   const { fetcher: fetch } = useCommerce()
 
   return async function addItem(input: Input) {
-    const data = fetcher(fetch, input)
-
-    // TODO: Using the state of the cart provider, update the saved cart
-    // return mutate('/api/cart')
-
-    return data
+    return fetcher(fetch, input)
   }
 }