Added useCart hook

src/api/api-hooks.ts

@@ -5,7 +5,7 @@ import { findItemIdInCart } from './cart-helpers';
 import { useEcomAPI } from './ecom-api-context-provider';
 import { AddToCartOptions } from './types';
 
-export const useCart = () => {
+export const useCartData = () => {
     const ecomApi = useEcomAPI();
     return useSwr('cart', async () => {
         const response = await ecomApi.getCart();
@@ -19,7 +19,7 @@ export const useCart = () => {
 
 export const useCartTotals = () => {
     const ecomApi = useEcomAPI();
-    const { data } = useCart();
+    const { data } = useCartData();
 
     const cartTotals = useSwr('cart-totals', async () => {
         const response = await ecomApi.getCartTotals();
@@ -46,7 +46,7 @@ type AddToCartArgs = {
 
 export const useAddToCart = () => {
     const ecomApi = useEcomAPI();
-    const { data: cart } = useCart();
+    const { data: cart } = useCartData();
     return useSWRMutation(
         'cart',
         async (_key: Key, { arg }: { arg: AddToCartArgs }) => {

src/components/cart/cart.tsx

@@ -1,21 +1,16 @@
 import { useState } from 'react';
-import { useCart, useCartTotals, useRemoveItemFromCart, useUpdateCartItemQuantity } from '~/api/api-hooks';
-import { useEcomAPI } from '~/api/ecom-api-context-provider';
 import { Drawer } from '~/components/drawer/drawer';
 import { isCartItemAvailable } from '~/utils';
+import { useCart } from '~/hooks/use-cart';
 import { useCartOpen } from './cart-open-context';
 import { CartView } from './cart-view/cart-view';
 
 export const Cart = () => {
-    const ecomAPI = useEcomAPI();
     const { isOpen, setIsOpen } = useCartOpen();
-    const { data: cart } = useCart();
-    const { data: cartTotals } = useCartTotals();
-    const { trigger: updateQuantity } = useUpdateCartItemQuantity();
-    const { trigger: removeItem } = useRemoveItemFromCart();
+    const { cartData, cartTotals, checkout, removeItem, updateItemQuantity } = useCart();
     const [checkoutAttempted, setCheckoutAttempted] = useState(false);
 
-    const someItemsOutOfStock = cart?.lineItems.some((item) => !isCartItemAvailable(item));
+    const someItemsOutOfStock = cartData?.lineItems.some((item) => !isCartItemAvailable(item));
 
     const handleCheckout = async () => {
         setCheckoutAttempted(true);
@@ -24,29 +19,23 @@ export const Cart = () => {
             return;
         }
 
-        const checkoutResponse = await ecomAPI.checkout();
-
-        if (checkoutResponse.status === 'success') {
-            window.location.href = checkoutResponse.body.checkoutUrl;
-        } else {
-            alert('checkout is not configured');
-        }
+        checkout();
     };
 
     const errorMessage = checkoutAttempted && someItemsOutOfStock ? 'Some items are out of stock' : undefined;
 
     return (
         <Drawer title="Cart" onClose={() => setIsOpen(false)} isOpen={isOpen}>
-            {cart === undefined ? (
+            {cartData === undefined ? (
                 <div>Loading...</div>
             ) : (
                 <CartView
-                    cart={cart}
+                    cart={cartData}
                     cartTotals={cartTotals}
                     errorMessage={errorMessage}
                     onCheckout={handleCheckout}
                     onItemRemove={removeItem}
-                    onItemQuantityChange={updateQuantity}
+                    onItemQuantityChange={updateItemQuantity}
                 />
             )}
         </Drawer>

src/hooks/use-cart.ts

@@ -0,0 +1,28 @@
+import { useCartTotals, useCartData, useUpdateCartItemQuantity, useRemoveItemFromCart } from '~/api/api-hooks';
+import { useEcomAPI } from '~/api/ecom-api-context-provider';
+
+export const useCart = () => {
+    const ecomAPI = useEcomAPI();
+    const { data: cartData } = useCartData();
+    const { data: cartTotals } = useCartTotals();
+    const { trigger: updateItemQuantity } = useUpdateCartItemQuantity();
+    const { trigger: removeItem } = useRemoveItemFromCart();
+
+    const checkout = async () => {
+        const checkoutResponse = await ecomAPI.checkout();
+
+        if (checkoutResponse.status === 'success') {
+            window.location.href = checkoutResponse.body.checkoutUrl;
+        } else {
+            alert('checkout is not configured');
+        }
+    };
+
+    return {
+        cartData,
+        cartTotals,
+        updateItemQuantity,
+        removeItem,
+        checkout,
+    };
+};