From e61f60fa2f25c82ae02b72b5806b20ea2ce89d34 Mon Sep 17 00:00:00 2001 From: Imran Date: Sat, 8 Jan 2022 11:05:24 +0530 Subject: [PATCH 01/16] Add cart items --- pages/cart.js | 33 ++++- pages/checkout.js | 29 +++++ src/components/cart/cart-item.js | 3 + src/components/cart/cart-items-container.js | 128 ++++++++++++++++++++ src/components/layout/index.js | 4 +- tailwind.config.js | 3 + 6 files changed, 195 insertions(+), 5 deletions(-) create mode 100644 pages/checkout.js create mode 100644 src/components/cart/cart-item.js create mode 100644 src/components/cart/cart-items-container.js diff --git a/pages/cart.js b/pages/cart.js index 560f340..507f0e5 100644 --- a/pages/cart.js +++ b/pages/cart.js @@ -1,5 +1,32 @@ -const Cart = () => { - return

Cart

; +import {useContext} from 'react'; +import Layout from '../src/components/layout'; +import { HEADER_FOOTER_ENDPOINT } from '../src/utils/constants/endpoints'; +import axios from 'axios'; +import CartItemsContainer from '../src/components/cart/cart-items-container'; + +export default function Cart({ headerFooter }) { + return ( + +

Cart

+ + + ); } -export default Cart +export async function getStaticProps() { + + const { data: headerFooterData } = await axios.get( HEADER_FOOTER_ENDPOINT ); + + return { + props: { + headerFooter: headerFooterData?.data ?? {}, + }, + + /** + * Revalidate means that if a new request comes to server, then every 1 sec it will check + * if the data is changed, if it is changed then it will update the + * static file inside .next folder with the new data, so that any 'SUBSEQUENT' requests should have updated data. + */ + revalidate: 1, + }; +} diff --git a/pages/checkout.js b/pages/checkout.js new file mode 100644 index 0000000..f612bdc --- /dev/null +++ b/pages/checkout.js @@ -0,0 +1,29 @@ +import Layout from '../src/components/layout'; +import { HEADER_FOOTER_ENDPOINT } from '../src/utils/constants/endpoints'; +import axios from 'axios'; + +export default function Checkout({ headerFooter }) { + return ( + +

Checkout

+ + ); +} + +export async function getStaticProps() { + + const { data: headerFooterData } = await axios.get( HEADER_FOOTER_ENDPOINT ); + + return { + props: { + headerFooter: headerFooterData?.data ?? {}, + }, + + /** + * Revalidate means that if a new request comes to server, then every 1 sec it will check + * if the data is changed, if it is changed then it will update the + * static file inside .next folder with the new data, so that any 'SUBSEQUENT' requests should have updated data. + */ + revalidate: 1, + }; +} diff --git a/src/components/cart/cart-item.js b/src/components/cart/cart-item.js new file mode 100644 index 0000000..d530d5a --- /dev/null +++ b/src/components/cart/cart-item.js @@ -0,0 +1,3 @@ +const CartItem = () => 'hello'; + +export default CartItem; diff --git a/src/components/cart/cart-items-container.js b/src/components/cart/cart-items-container.js new file mode 100644 index 0000000..6d21559 --- /dev/null +++ b/src/components/cart/cart-items-container.js @@ -0,0 +1,128 @@ +import React, { useContext, useState } from "react"; +import { AppContext } from '../context'; +import CartItem from './cart-item'; + +import Link from 'next/link'; + +const CartItemsContainer = () => { + const [cart, setCart] = useContext(AppContext); + const { cartItems, totalPrice, totalQty } = cart || {}; + const [ isUpdateCartProcessing, setUpdateCartProcessing ] = useState(false); + const [ isClearCartProcessing, setClearCartProcessing ] = useState(false); + console.log( 'cartItems', cartItems ); + /* + * Handle remove product click. + * + * @param {Object} event event + * @param {Integer} Product Id. + * + * @return {void} + */ + const handleRemoveProductClick = (event, cartKey, products) => { + event.stopPropagation(); + if (products.length) { + // By passing the newQty to 0 in updateCart Mutation, it will remove the item. + const newQty = 0; + // const updatedItems = getUpdatedItems(products, newQty, cartKey); + // + // updateCart({ + // variables: { + // input: { + // clientMutationId: v4(), + // items: updatedItems, + // }, + // }, + // }); + } + }; + + // Clear the entire cart. + const handleClearCart = (event) => { + event.stopPropagation(); + + // if (isClearCartProcessing) { + // return; + // } + // + // clearCart({ + // variables: { + // input: { + // clientMutationId: v4(), + // all: true, + // }, + // }, + // }); + }; + + return ( +
+ {cart ? ( +
+

Cart

+
+
+ {cartItems.length && + cartItems.map((item) => ( + + ))} + + {/*Clear entire cart*/} +
+ + {isClearCartProcessing ?

Clearing...

: ""} +
+
+ + {/*Cart Total*/} +
+

Cart Total

+ + + + + + + +
Total{totalPrice}
+ + + +
+
+
+ ) : ( +
+

No items in the cart

+ + + +
+ )} +
+ ); +}; + +export default CartItemsContainer; diff --git a/src/components/layout/index.js b/src/components/layout/index.js index 28b3a35..4b0e244 100644 --- a/src/components/layout/index.js +++ b/src/components/layout/index.js @@ -6,9 +6,9 @@ const Layout = ({children, headerFooter}) => { const { header, footer } = headerFooter || {}; return ( -
+
-
+
{children}