feat: graphql refactor (fixes ndimatteo#125)

jpvalery · Nov 3, 2023 · 1425889 · 1425889
1 parent dac7fc6
commit 1425889
Show file tree

Hide file tree

Showing 4 changed files with 389 additions and 254 deletions.
diff --git a/components/cart-item.js b/components/cart-item.js
@@ -1,11 +1,8 @@
-import React from 'react'
 import Link from 'next/link'
 
-import { hasObject } from '@lib/helpers'
 
-import { useUpdateItem, useRemoveItem, useToggleCart } from '@lib/context'
+import { useRemoveItem, useToggleCart, useUpdateItem } from '@lib/context'
 
-import Photo from '@components/photo'
 import { ProductCounter, ProductPrice } from '@components/product'
 
 function CartItem({ item }) {
@@ -14,51 +11,64 @@ function CartItem({ item }) {
   const toggleCart = useToggleCart()
 
   const changeQuantity = (quantity) => {
-    updateItem(item.lineID, quantity)
+    updateItem(item.id, quantity)
   }
 
-  const defaultPhoto = item.photos.cart?.find((set) => !set.forOption)
-  const variantPhoto = item.photos.cart?.find((set) => {
-    const option = set.forOption
-      ? {
-          name: set.forOption.split(':')[0],
-          value: set.forOption.split(':')[1],
-        }
-      : {}
-    return option.value && hasObject(item.options, option)
-  })
+  /*
+	const defaultPhoto = item.photos.cart?.find((set) => !set.forOption);
+	const variantPhoto = item.photos.cart?.find((set) => {
+		const option = set.forOption
+			? {
+					name: set.forOption.split(':')[0],
+					value: set.forOption.split(':')[1],
+			  }
+			: {};
+		return option.value && hasObject(item.options, option);
+	});
 
-  const photos = variantPhoto ? variantPhoto : defaultPhoto
+	const photos = variantPhoto ? variantPhoto : defaultPhoto;
+	*/
+  const photos = item.merchandise.product.images.edges[0].node.originalSrc
 
   return (
     <div className="cart-item">
+      {/*
       {photos && (
         <Photo
           photo={photos?.default}
           srcSizes={[400]}
           sizes="(min-width: 768px) 400px, 35vw'"
           className="cart-item--photo"
         />
-      )}
+      )} 
+      */}
+      {photos && <img src={photos} className="cart-item--photo" />}
       <div className="cart-item--details">
         <div className="cart-item--header">
           <div className="cart-item--title">
-            <div className="cart-item--variant">{item.title}</div>
+            {/* <div className="cart-item--variant">
+							{item.merchandise.product.title}
+			      </div> */}
             <h2 className="cart-item--name">
               <Link
-                href={`/products/${item.product.slug}?variant=${item.id}`}
+                href={`/products/${
+                  item.merchandise.product.handle
+                }?variant=${item.merchandise.id.replace(
+                  'gid://shopify/ProductVariant/',
+                  '',
+                )}`}
                 scroll={false}
               >
                 <a
                   onClick={() => toggleCart(false)}
                   className="cart-item--link"
                 >
-                  {item.product.title}
+                  {item.merchandise.product.title}
                 </a>
               </Link>
             </h2>
           </div>
-          <ProductPrice price={item.price} />
+          <ProductPrice price={item.cost.totalAmount.amount * 100} />
         </div>
         <div className="cart-item--tools">
           <div className="cart-item--quantity">
@@ -70,11 +80,8 @@ function CartItem({ item }) {
               className="is-small is-inverted"
             />
           </div>
-          <button
-            onClick={() => removeItem(item.lineID)}
-            className="btn is-text"
-          >
-            Remove
+          <button onClick={() => removeItem(item.id)} className="btn is-text">
+            Supprimer
           </button>
         </div>
       </div>

diff --git a/components/cart.js b/components/cart.js
@@ -1,16 +1,19 @@
-import React, { useState, useEffect } from 'react'
+import cx from 'classnames'
 import FocusTrap from 'focus-trap-react'
 import { m } from 'framer-motion'
-import cx from 'classnames'
+import { useEffect, useState } from 'react'
 
 import { centsToPrice } from '@lib/helpers'
 
 import {
-  useSiteContext,
-  useCartTotals,
   useCartCount,
   useCartItems,
+  useCartTotals,
   useCheckout,
+  useCheckoutCount,
+  useCheckoutItems,
+  useCheckoutTotals,
+  useSiteContext,
   useToggleCart,
 } from '@lib/context'
 
@@ -23,8 +26,11 @@ const Cart = ({ data }) => {
 
   const { isCartOpen, isUpdating } = useSiteContext()
   const { subTotal } = useCartTotals()
+  const { subTotalCheckout } = useCheckoutTotals()
+  const checkouttCount = useCheckoutCount()
   const cartCount = useCartCount()
-  const lineItems = useCartItems()
+  const lineItems = useCheckoutItems()
+  const cartLineItems = useCartItems()
   const checkoutURL = useCheckout()
   const toggleCart = useToggleCart()
 
@@ -52,7 +58,7 @@ const Cart = ({ data }) => {
       const buildCheckoutLink = shop.storeURL
         ? checkoutURL.replace(
             /^(?:https?:\/\/)?(?:[^@\/\n]+@)?(?:www\.)?([^:\/?\n]+)/g,
-            shop.storeURL
+            shop.storeURL,
           )
         : checkoutURL
       setCheckoutLink(buildCheckoutLink)
@@ -87,26 +93,26 @@ const Cart = ({ data }) => {
           <div className="cart--inner">
             <div className="cart--header">
               <div className="cart--title">
-                Your Cart <span className="cart--count">{cartCount}</span>
+                Votre panier <span className="cart--count">{cartCount}</span>
               </div>
               <button className="cart-toggle" onClick={() => toggleCart(false)}>
-                Done
+                Fini
               </button>
             </div>
 
             <div className="cart--content">
-              {lineItems?.length ? (
-                <CartItems items={lineItems} />
+              {cartLineItems?.length ? (
+                <CartItems items={cartLineItems} />
               ) : (
                 <EmptyCart />
               )}
             </div>
 
-            {lineItems?.length > 0 && (
+            {cartLineItems?.length > 0 && (
               <div className="cart--footer">
                 <div className="cart--subtotal">
                   <span>Subtotal</span>
-                  <span>${centsToPrice(subTotal)}</span>
+                  <span>{centsToPrice(subTotal * 100)}$</span>
                 </div>
 
                 <a
@@ -140,7 +146,7 @@ const CartItems = ({ items }) => {
   return (
     <div className="cart--items">
       {items.map((item) => {
-        return <CartItem key={item.id} item={item} />
+        return <CartItem key={item.node.id} item={item.node} />
       })}
     </div>
   )

diff --git a/components/header.js b/components/header.js
@@ -1,25 +1,26 @@
-import React, { useState, useRef, useEffect } from 'react'
-import { m } from 'framer-motion'
-import FocusTrap from 'focus-trap-react'
-import { useInView } from 'react-cool-inview'
 import { useRect } from '@reach/rect'
-import { useRouter } from 'next/router'
-import Link from 'next/link'
 import cx from 'classnames'
+import FocusTrap from 'focus-trap-react'
+import { m } from 'framer-motion'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { useEffect, useRef, useState } from 'react'
+import { useInView } from 'react-cool-inview'
 
 import { isBrowser } from '@lib/helpers'
 
 import {
+  useCartCount,
+  useCheckoutCount,
   useSiteContext,
-  useToggleMegaNav,
   useToggleCart,
-  useCartCount,
+  useToggleMegaNav,
 } from '@lib/context'
 
-import PromoBar from '@components/promo-bar'
+import Icon from '@components/icon'
 import Menu from '@components/menu'
 import MegaNavigation from '@components/menu-mega-nav'
-import Icon from '@components/icon'
+import PromoBar from '@components/promo-bar'
 
 const Header = ({ data = {}, isTransparent, onSetup = () => {} }) => {
   // expand our header data
@@ -216,6 +217,7 @@ const Header = ({ data = {}, isTransparent, onSetup = () => {} }) => {
 
 const CartToggle = () => {
   const toggleCart = useToggleCart()
+  const checkoutCount = useCheckoutCount()
   const cartCount = useCartCount()
 
   return (