Loading...
;
+ }
+ if (error) {
+ return Error!
;
+ }
+
+ const onAddToCart = (product: Product) => {
+ const findProductItem = cartItems.find(
+ (item) => item.product.id === product.id
+ );
+
+ if (findProductItem) {
+ const newItems = cartItems.map((item) => {
+ if (item.product.id === product.id) {
+ return {
+ product: findProductItem.product,
+ quantity: item.quantity + 1,
+ };
+ }
+
+ return item;
+ });
+ setCartItems(newItems);
+ } else {
+ const newItem = {
+ product: product,
+ quantity: 1,
+ };
+ setCartItems([...cartItems, newItem]);
+ }
+ };
+
+ const onRemoveFromCart = (product: Product) => {
+ const findProductItem = cartItems.find(
+ (item) => item.product.id === product.id
+ );
+
+ if (findProductItem?.quantity === 1) {
+ const deleteItem = cartItems.filter((item) => item.product.id !== product.id)
+ setCartItems(deleteItem);
+ } else {
+ if (findProductItem) {
+ const newItem = cartItems.map((item) => {
+ if (item.product.id === product.id) {
+ return {
+ product: findProductItem.product,
+ quantity: item.quantity - 1,
+ };
+ }
+
+ return item;
+ });
+ setCartItems(newItem);
+ }
+ }
+ };
+
+ const clearCart = () => setCartItems([]);
+
+ return (
+ <>
+
+
+
+ );
+};
+
+export default App;
diff --git a/e-commerce/client/src/components/Cart.tsx b/e-commerce/client/src/components/Cart.tsx
new file mode 100644
index 0000000..bb7db88
--- /dev/null
+++ b/e-commerce/client/src/components/Cart.tsx
@@ -0,0 +1,97 @@
+import React from "react";
+
+import { Link } from "react-router-dom";
+import { CartItem } from "../App";
+import { Product } from "../generated";
+
+import CartItems from "./CartItems";
+
+type CartProps = {
+ cartItems: CartItem[];
+ onAddToCart: (product: Product) => void;
+ onRemoveFromCart: (product: Product) => void;
+};
+
+const Cart: React.FunctionComponent
+
+ {/*
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {data?.products?.map((product) => {
+ if (!product) {
+ return null;
+ }
+ return (
+
+
+
+ {cartItems.length === 0 ? (
+
+
+ {" "}
+ Continue shopping
+
+
+ Cart summary
+Your Cart is Empty!
+ ) : null} +
+
+
+
+
+ {cartItems.map((item) => (
+
+
+ {cartItems.length === 0 ? null : (
+
+
+
+ {cartItems.length === 0 ? null : ( + + +
+
+ );
+};
+
+export default Cart;
diff --git a/e-commerce/client/src/components/CartItems.tsx b/e-commerce/client/src/components/CartItems.tsx
new file mode 100644
index 0000000..5c8224f
--- /dev/null
+++ b/e-commerce/client/src/components/CartItems.tsx
@@ -0,0 +1,86 @@
+import React from "react";
+
+import { CartItem } from "../App";
+import { Product } from "../generated";
+
+type CartItemProps = {
+ cartItem: CartItem;
+ onAddToCart: (product: Product) => void;
+ onRemoveFromCart: (product: Product) => void;
+};
+
+const CartItems: React.FunctionComponent
+
+ )}
+ + Total +
++ {" "} + ${getTotal(cartItems)} +
++
+
+ {cartItems.length === 0 ? null : ( + + +
+
+
+
+ )}
+ Checkout
+ +
+
+
+ );
+};
+
+export default CartItems;
diff --git a/e-commerce/client/src/components/Checkout.tsx b/e-commerce/client/src/components/Checkout.tsx
new file mode 100644
index 0000000..383d444
--- /dev/null
+++ b/e-commerce/client/src/components/Checkout.tsx
@@ -0,0 +1,103 @@
+import { useHistory } from "react-router-dom";
+
+import {
+ FunctionComponent,
+ FormEventHandler,
+ useEffect,
+ useState,
+} from "react";
+import { CardElement, useStripe, useElements } from "@stripe/react-stripe-js";
+import { CartItem } from "../App";
+import { useCreatePaymentIntentMutation } from "../generated";
+
+interface CheckoutProps {
+ cartItems: CartItem[];
+ clearCart: () => void;
+}
+
+export const Checkout: FunctionComponent
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+ + {cartItem.product.name} +
+
+ {cartItem.product.description}
+
+ + ${cartItem.product.price} +
+
+
+
+
+
+
+
+
+ Quantity
+
+
+
+ {cartItem.quantity}
+ ++ ${getCartItemPrice} +
++
+
+
+
Payment Failed!
+ ) : null}
+
+ );
+};
diff --git a/e-commerce/client/src/components/Navbar.tsx b/e-commerce/client/src/components/Navbar.tsx
new file mode 100644
index 0000000..7d300ee
--- /dev/null
+++ b/e-commerce/client/src/components/Navbar.tsx
@@ -0,0 +1,32 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { CartItem } from "../App";
+
+import logo from "../images/logo.png"
+
+type NavbarProp = {
+ cartItems: CartItem[];
+};
+
+const Navbar: React.FunctionComponent
+ 
+
+ );
+};
+
+export default Navbar;
diff --git a/e-commerce/client/src/components/PaymentSuccessful.tsx b/e-commerce/client/src/components/PaymentSuccessful.tsx
new file mode 100644
index 0000000..8e067c8
--- /dev/null
+++ b/e-commerce/client/src/components/PaymentSuccessful.tsx
@@ -0,0 +1,36 @@
+import React from "react";
+
+import { Link } from "react-router-dom";
+
+import logo from "../images/logo.png"
+
+const PaymentSuccessful = () => {
+ return (
+ <>
+
+
+
+ {getCartTotal(cartItems)}
+
+
+
+
+
+
+ );
+};
+
+export default PaymentSuccessful;
diff --git a/e-commerce/client/src/components/ProductCard.tsx b/e-commerce/client/src/components/ProductCard.tsx
new file mode 100644
index 0000000..5bf6fc3
--- /dev/null
+++ b/e-commerce/client/src/components/ProductCard.tsx
@@ -0,0 +1,52 @@
+import React from "react";
+
+import { Link } from "react-router-dom";
+
+import { Product } from "../generated";
+
+type ProductCardProps = {
+ product: Product;
+ onAddToCart: (product: Product) => void;
+};
+
+const ProductCard: React.FunctionComponent
+
+
+
+
+
+ + Payment Successful! +
+ + +
+ {" "}
+ Back to store
+
+
+
+
+
+ );
+};
+
+export default ProductCard;
diff --git a/e-commerce/client/src/generated/index.ts b/e-commerce/client/src/generated/index.ts
new file mode 100644
index 0000000..7e16a0c
--- /dev/null
+++ b/e-commerce/client/src/generated/index.ts
@@ -0,0 +1,469 @@
+import { useQuery, UseQueryOptions, useMutation, UseMutationOptions } from 'react-query';
+export type Maybe
+
+
+
+
+ 
+
+
+
+ + {product?.name} +
+
+ {product?.description}
+
+
+
+