Merge remote-tracking branch 'origin/feature/#16-cart-page' into main

components/cart/CartItemRow.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import Image from "next/image";
+import { LineItem } from "shopify-buy";
+
+type Props = {
+  item: any;
+};
+
+const CartItemRow: React.FC<Props> = ({ item }) => {
+  console.log("CartItemRow rendered");
+  console.log(JSON.stringify(item));
+  const { handle, quantity, title } = item;
+  const price = Number(item.variant.price);
+  const subtotal = price * quantity;
+  const imgSrc = item.variant.image.src;
+
+  return (
+    <tr>
+      <td>
+        <figure style={{ margin: 0 }}>
+          <a href={`/products/${handle}`}>
+            <Image priority src={imgSrc} height={150} width={150} />
+          </a>
+        </figure>
+        {title}
+      </td>
+      <td>¥{price.toLocaleString("ja-JP")}</td>
+      <td>{quantity}</td>
+      <td>¥{subtotal.toLocaleString("ja-JP")}</td>
+    </tr>
+  );
+};
+
+export default CartItemRow;

components/cart/CartItemTable.tsx

@@ -0,0 +1,30 @@
+import React, { useContext } from "react";
+import { CheckoutContext } from "pages/cart";
+import CartItemRow from "components/cart/CartItemRow";
+
+const CartItemTable = () => {
+  console.log("CartItemTable rendered");
+
+  const checkout = useContext(CheckoutContext);
+  console.log(checkout?.lineItems?.length);
+
+  return (
+    <table>
+      <thead>
+        <tr>
+          <th>商品名</th>
+          <th>価格</th>
+          <th>数量</th>
+          <th>合計</th>
+        </tr>
+      </thead>
+      <tbody>
+        {checkout?.lineItems?.map((item, idx) => (
+          <CartItemRow item={item} key={idx} />
+        ))}
+      </tbody>
+    </table>
+  );
+};
+
+export default CartItemTable;

components/product/CartDrawer.tsx

@@ -22,12 +22,11 @@ const CartDrawer: React.FC<Props> = ({ isOpen, setIsOpen, checkout }) => {
   const { product, imageId, variant } = useContext(ProductContext);
   const selectedImage = product.images.find((image) => image.id === imageId);
 
-  const { lineItems } = checkout;
   const reducer = (accumulator, currentValue) => {
     accumulator += currentValue.quantity;
     return accumulator;
   }
-  const totalQuqntity = lineItems?.reduce(reducer, 0);
+  const totalQuqntity = checkout?.lineItems?.reduce(reducer, 0);
 
   return (
     <Drawer classes={{ paper: "border border-gray-400 left-auto w-full md:w-96" }} anchor="top" open={isOpen} onClose={closeDrawer}>

lib/useCheckout.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import React, { useState, useEffect } from "react";
 import { Cart } from "shopify-buy";
 import client from "lib/client";
 
@@ -12,22 +12,23 @@ import client from "lib/client";
 const useCheckout = () => {
   console.log('useCheckout')
   const [loading, setLoading] = useState<boolean>(false);
-  const [checkout, setCheckout] = useState({});
+  const [checkout, setCheckout] = useState<Cart | null>(null);
   const [checkoutId, setCheckoutId] = useState<string>("");
 
 
   const initializeCart = () => {
-    console.log('initializeCart')
-
     const id: string | null = localStorage.getItem("checkoutId") || null;
+
     if (id) {
       client.checkout.fetch(id).then((checkout) => {
         setCheckoutId(checkout.id as string);
+        setCheckout(checkout);
       });
     } else {
       client.checkout.create().then((checkout) => {
         localStorage.setItem("checkoutId", checkout.id as string);
         setCheckoutId(checkout.id as string);
+        setCheckout(checkout);
       });
     }
   };
@@ -38,16 +39,13 @@ const useCheckout = () => {
   }, []);
 
   const addVariant = async (variantId: string, quantity: number) => {
-    console.log('addVariant関数の中')
     setLoading(true);
     const lineItemsToAdd = [{ variantId: variantId, quantity: quantity }];
     const checkout = await client.checkout.addLineItems(
       checkoutId,
       lineItemsToAdd
     );
-    console.log("addVariant関数の中でのaddLineItemsのあと");
     setCheckout(checkout);
-    console.log("addVariant関数の中でのsetCheckoutのあと");
     setLoading(false)
   }
 

pages/cart.tsx

@@ -1,5 +1,60 @@
-import React from "react";
+import React, { createContext } from "react";
+import { GetServerSideProps } from "next";
+import { Cart } from "shopify-buy";
+import { CircularProgress } from "@material-ui/core";
+import Layout from "components/common/Layout";
+import CartItemTable from "components/cart/CartItemTable";
+import useCheckout from 'lib/useCheckout';
 
-const Cart: React.FC = () => <div>カートページです</div>;
+export const CheckoutContext = createContext<Cart | null>(null);
 
-export default Cart;
+const CartPage: React.FC = () => {
+
+  const { checkout } = useCheckout();
+
+  return (
+    <CheckoutContext.Provider value={checkout}>
+      <Layout>
+        <article className="collections-all">
+          <header>
+            <h1 className="font-semibold mb-9 md:mb-14 text-center text-gray-700 text-4xl">
+              ショッピングカート
+            </h1>
+          </header>
+          <section>
+            <div className="container">
+              {checkout ? (
+                checkout.lineItems.length > 0 ? (
+                  <CartItemTable />
+                ) : (
+                  <>
+                    <div>カート内に商品がありません</div>
+                    <div>
+                      <a
+                        className="bg-gray-700 flex-grow inline-block px-4 py-3 text-sm text-white"
+                        href="/collections/all"
+                      >
+                        買い物を続ける
+                      </a>
+                    </div>
+                  </>
+                )
+              ) : (
+                <div className="flex items-center justify-center">
+                  <CircularProgress
+                    classes={{ svg: "font-bold text-gray-400" }}
+                    size="1.25rem"
+                    thickness={6}
+                  />
+                </div>
+              )}
+              {}
+            </div>
+          </section>
+        </article>
+      </Layout>
+    </CheckoutContext.Provider>
+  );
+};
+
+export default CartPage;

pages/collections/all.tsx

@@ -2,9 +2,8 @@ import React from "react";
 import { GetServerSideProps } from "next";
 import client from "lib/client";
 import { Product } from "shopify-buy";
-import { fetchCollectionWithProducts } from 'lib/graphql/collection'
+import { fetchCollectionWithProducts } from "lib/graphql/collection";
 import Layout from "components/common/Layout";
-import CollectionTitle from "components/collections/CollectionTitle"
 import FilterToolbar from "components/collections/FilterToolbar";
 import ProductList from "components/collections/ProductList";
 import Pagination from "components/utils/Pagination";
@@ -26,7 +25,9 @@ const collectionAll: React.FC<Props> = ({
   <Layout>
     <article className="collections-all">
       <header>
-        <CollectionTitle title="商品"/>
+        <h1 className="font-semibold mb-9 md:mb-14 text-center text-gray-700 text-4xl">
+          商品
+        </h1>
         <FilterToolbar total={total} />
       </header>
       <section>
@@ -39,13 +40,9 @@ const collectionAll: React.FC<Props> = ({
   </Layout>
 );
 
-
-
-
 export const getServerSideProps: GetServerSideProps = async (context) => {
+
   // サーバーサイドでこれを実行するとIP単位のコスト計算→すぐにコスト超過してしまうと思われる。。。
-  // const collection = await fetchCollectionWithProducts();
-
   const products: Product[] = await client.product.fetchAll();
   const total = products.length;
 
@@ -65,6 +62,6 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
       totalPage,
     },
   };
-};;
+};
 
 export default collectionAll;