Add add-cart functionality

gh-18

shop-ui/ui/src/App.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useEffect, useState} from "react";
 import {BrowserRouter as Router, Link, Route, Switch} from "react-router-dom";
 import {Cart} from "./routes/Cart";
 import {Sock} from "./routes/Sock";
@@ -8,18 +8,23 @@ import {CartSummary} from "./components/CartSummary";
 import {UserInfo} from "./components/UserInfo";
 
 export default function App() {
+    const [cart, setCart] = useState({
+        items: []
+    });
+    const refreshCart = () => fetchCart().then(setCart);
+    useEffect(refreshCart, []);
     return (
         <Router>
             <div>
                 <h1><Link to="/">Spring Socks</Link></h1>
                 <UserInfo/>
-                <CartSummary/>
+                <CartSummary cart={cart}/>
                 <Switch>
                     <Route path="/cart">
                         <Cart/>
                     </Route>
                     <Route exact path="/details/:id">
-                        <Sock/>
+                        <Sock refreshCart={refreshCart}/>
                     </Route>
                     <Route exact path="/tags/:tag">
                         <Tag/>
@@ -33,3 +38,13 @@ export default function App() {
     );
 }
 
+function fetchCart() {
+    return fetch('/cart', {
+        method: 'GET',
+        headers: {
+            'Accept': 'application/json'
+        },
+    })
+        .then(res => res.json());
+}
+

shop-ui/ui/src/components/CartSummary.js

@@ -1,22 +1,6 @@
-import React, {useEffect, useState} from "react";
+import React from "react";
 import {Link} from "react-router-dom";
 
-export function CartSummary() {
-    const [cart, setCart] = useState({
-        items: []
-    });
-    useEffect(() => {
-        fetchCart().then(setCart);
-    }, []);
+export function CartSummary({cart}) {
     return <p><Link to="/cart">Cart</Link> {cart.itemSize} items : ${cart.total}</p>;
-}
-
-function fetchCart() {
-    return fetch('/cart', {
-        method: 'GET',
-        headers: {
-            'Accept': 'application/json'
-        },
-    })
-        .then(res => res.json());
 }

shop-ui/ui/src/routes/Sock.js

@@ -1,23 +1,41 @@
-import {Link, useParams} from "react-router-dom";
+import {Link, Redirect, useParams} from "react-router-dom";
 import React, {useEffect, useState} from "react";
 import {Tags} from "../components/Tags";
 
-export function Sock() {
+export function Sock({refreshCart}) {
     const {id} = useParams();
     const [sock, setSock] = useState({});
+    const [isSubmitting, setIsSubmitting] = useState(false);
     const [relatedProducts, setRelatedProducts] = useState([]);
-
+    const [quantity, setQuantity] = useState(1);
+    const [redirectToCart, setRedirectToCart] = useState(false);
     useEffect(() => {
         fetchSock(id).then(body => {
             setSock(body.sock);
             setRelatedProducts(body.relatedProducts)
         });
     }, [id]);
+    const onChangeQuantity = e => setQuantity(e.target.value);
+    const onClickAddCartItem = e => {
+        e.preventDefault();
+        setIsSubmitting(true);
+        addCartItem(id, quantity)
+            .then(refreshCart)
+            .then(() => setRedirectToCart(true))
+            .finally(() => setIsSubmitting(false));
+    };
     return <div>
+        {redirectToCart && <Redirect to={{pathname: "/cart"}}/>}
         <h2>{sock.name}</h2>
         <img alt={sock.name} src={sock.imageUrl && sock.imageUrl[0]} width={'450px'}/>
         <p>${sock.price}</p>
         <p>{sock.description}</p>
+        <form>
+            <input type={"number"} value={quantity} onChange={onChangeQuantity}
+                   disabled={isSubmitting}/>
+            <button onClick={onClickAddCartItem} disabled={isSubmitting}>Add To Cart
+            </button>
+        </form>
         <h3>Related Products</h3>
         <ul>
             {relatedProducts.map(sock => <li key={sock.id}><Link
@@ -27,6 +45,21 @@ export function Sock() {
     </div>;
 }
 
+function addCartItem(id, quantity) {
+    return fetch(`/cart`, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            'Accept': 'application/json'
+        },
+        body: JSON.stringify({
+            id: id,
+            quantity: quantity
+        })
+    })
+        .then(res => res.json());
+}
+
 function fetchSock(id) {
     return fetch(`/details/${id}`, {
         method: 'GET',