Patrick/add cart page (#11)

* adding removeCart type, action, and reducer

* adding Cart View

Author: patrick-fs

src/actions/cart.ts

@@ -2,15 +2,20 @@ import { Product } from '../types/product';
 import { CartTypes } from '../types/cart';
 import { createAction } from '../types/helpers';
 
-export type CartActionTypes = ReturnType<typeof addToCart>
+export type CartActionTypes = ReturnType<typeof addToCart> | ReturnType<typeof removeFromCart>;
 
 // TODO: update cart in local storage with a cart service
 
 export const addToCart = (product: Product)  => {
-  // NOTE: this will be removed in the next PR
-  console.log(`product added: ${JSON.stringify(product)}`);
   return createAction({
     type: CartTypes.AddToCart,
     product,
   });
 };
+
+export const removeFromCart = (index: number) => {
+  return createAction({
+    type: CartTypes.RemoveFromCart,
+    index,
+  });
+};

src/components/Cart.tsx

@@ -1,12 +1,33 @@
 import React from 'react';
-import { Container } from 'react-bootstrap';
+import { Button } from 'react-bootstrap';
+import { Link } from 'react-router-dom';
+import {
+  Container,
+  Col,
+  Row,
+} from 'react-bootstrap';
+import CartItems from './CartItems';
+import { CartViewModifier } from '../types/cart';
 
 const Cart = () => {
-  return (
+  return(
     <Container>
-      <h1>Cart</h1>
+      <Row>
+        <Col>
+          <span style={{float:'right'}}><Link to="/">Keep shoppe-ing</Link></span>
+          <h4>Your Cart</h4>
+        </Col>
+      </Row>
+      <Row>        
+        <Col>          
+          <CartItems cartView={CartViewModifier.DELETE} />          
+          <Link to="/checkout" style={{float:'right', padding:'1rem 0 0 0'}}>
+            <Button variant="primary">Continue to Checkout</Button>
+          </Link>
+        </Col>
+      </Row>
     </Container>
-  );
+  )
 };
 
 export default Cart;

src/components/CartButton.tsx

@@ -3,7 +3,6 @@ import { Button } from 'react-bootstrap';
 import { useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { AppState } from '../store';
-import { Product } from '../types/product';
 
 const CartButton = () => {
 

src/components/CartItems.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { useSelector, useDispatch } from 'react-redux'
+import { ListGroup } from 'react-bootstrap';
+import { AppDispatch } from '../actions';
+import { AppState } from "../store";
+import { CartViewModifier } from '../types/cart';
+import { removeFromCart } from '../actions/cart';
+
+type Props = {
+  cartView?: CartViewModifier
+}
+
+const CartItems: React.FC<Props> = ({ cartView = CartViewModifier.NONE }) => {
+  const products = useSelector((state: AppState) => state.cartState.products);
+  const dispatch = useDispatch<AppDispatch>();
+  const cartTotal = products.reduce((total, prod) => total + prod.price, 0);
+  return (
+    <ListGroup>
+      { products.map((product, i) => (
+        <ListGroup.Item key={product.id}>
+          {product.title}
+          <span className='cart-price'>${product.price} <span className='text-muted'>{product.unit}</span>
+            {cartView === CartViewModifier.DELETE &&
+              <span className='fa fa-times text-danger remove-item' onClick={() => dispatch(removeFromCart(i))}></span>
+            }
+          </span>                     
+        </ListGroup.Item>
+      ))}
+      <ListGroup.Item>
+        <strong>Total</strong> <span className='cart-price'><strong>${cartTotal.toFixed(2)}</strong></span>
+      </ListGroup.Item>
+    </ListGroup>
+  );
+};
+
+export default CartItems;

src/index.css

@@ -29,4 +29,14 @@ a.header-link {
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
+}
+
+.cart-price {
+  float: right;
+}
+
+.remove-item {
+  display: inline-block;
+  padding-left: 1rem;
+  cursor: pointer;
 }

src/store/reducers/cart.ts

@@ -3,10 +3,16 @@ import { AppActions } from '../../actions';
 import { CartTypes } from '../../types/cart';
 import { Product } from '../../types/product';
 
+const sortByTitle = (prod1: Product, prod2: Product) => {
+  return prod1.title.localeCompare(prod2.title);
+}
+
 const productsReducer = (state: Product[] = [], action: AppActions): Product[] => {
   switch(action.type) {
     case CartTypes.AddToCart:
-      return [...state, action.product];
+      return [...state, action.product].sort(sortByTitle);
+      case CartTypes.RemoveFromCart:
+        return state.filter((_, index) => index !== action.index)
     default:
       return state;
   }

src/types/cart.ts

@@ -1,3 +1,9 @@
 export enum CartTypes {
   AddToCart = 'ADD_TO_CART',
+  RemoveFromCart = 'REMOVE_FROM_CART',
 };
+
+export enum CartViewModifier {
+  NONE,
+  DELETE,
+};