uploading cart items, checkout page and using reselect for selectors

src/App.js

@@ -1,16 +1,20 @@
 import React from 'react';
 import { Route,Switch, Redirect } from 'react-router-dom';
 import {connect} from 'react-redux';
+import { createStructuredSelector } from 'reselect';
 
 
 import './App.css';
 
 import HomePage from './pages/homepage/homepage.component';
 import Header from './components/header/header.component';
 import ShopPage from './pages/shop/shop.component';
+import CheckoutPage from './pages/checkout/checkout.component';
 import SignInAndSignUp from './pages/signin-and-singup/signin-and-singup.component';
 import { auth,createUserProfileDocument } from './fireabase/firebase.utils';
 import { setCurrentUser } from './redux/user/user.actions';
+import { selectCurrentUser } from './redux/user/user.selectors';
+
 
 
 
@@ -46,6 +50,7 @@ class App extends React.Component {
         <Switch>
           <Route exact path="/" component={HomePage} />
           <Route path="/shop" component={ShopPage} />
+          <Route exact path="/checkout" component={CheckoutPage} />
           <Route exact path="/signin" 
             render={()=>
                     this.props.currentUser?(
@@ -60,8 +65,8 @@ class App extends React.Component {
       );
   }
 }
-const mapStateToProps = ({user}) => ({
-  currentUser: user.currentUser
+const mapStateToProps = createStructuredSelector ({
+  currentUser: selectCurrentUser
 })
 const mapDispatchProps = dispatch => ({
   setCurrentUser: user => dispatch(setCurrentUser(user))

src/components/cart-dropdown/cart-dropdown.component.jsx

@@ -4,25 +4,31 @@ import { connect } from 'react-redux';
 import CustomButton from '../custom-button/custom-button.component';
 import CartItem from '../cart-item/cart-item-component';
 import { selectCartItems } from '../../redux/cart/cart.selector';
+import { createStructuredSelector } from 'reselect';
+import { withRouter } from 'react-router-dom'
+import { toggleCartHidden } from '../../redux/cart/cart.actions'
 
 import './cart-dropdown.styles.scss';
 
-const CartDropDown = ({cartItems}) => (
+const CartDropDown = ({cartItems, history, dispatch}) => (
     <div className='cart-dropdown'>
         <div className='cart-items'>
             {
-                cartItems.map(cartItem=>(
-                                            <CartItem key={cartItem.id} item={cartItem} />
+                cartItems.length ?
+                                    cartItems.map(cartItem=>(
+                                        <CartItem key={cartItem.id} item={cartItem} />
                                         )
-                            )
+                                    )
+                            :
+                            <span className='empty-message'>Tu carrito esta vacio.</span>
             }
         </div>
-        <CustomButton>GO TO CHECKOUT</CustomButton>
+        <CustomButton onClick={()=> {history.push('/checkout'); dispatch(toggleCartHidden())}}>GO TO CHECKOUT</CustomButton>
     </div>
 )
 
-const mapStateToProps = (state) => ({
-    cartItems: selectCartItems (state)
+const mapStateToProps = createStructuredSelector ({
+    cartItems: selectCartItems
 })
 
-export default connect(mapStateToProps)(CartDropDown);
+export default withRouter(connect(mapStateToProps)(CartDropDown));

src/components/cart-dropdown/cart-dropdown.styles.scss

@@ -11,6 +11,10 @@
   right: 40px;
   z-index: 5;
 
+  .empty-message {
+    font-size: 18px;
+    margin: 50px auto;
+  }
   .cart-items {
     height: 240px;
     display: flex;

src/components/cart-icon/cart-icon.component.jsx

@@ -7,6 +7,8 @@ import { selectCartItemsCount } from '../../redux/cart/cart.selector'
 
 import { ReactComponent as ShoppingIcon } from '../../assets/shopping-bag.svg';
 
+import {createStructuredSelector} from 'reselect';
+
 import './cart-icon.styles.scss';
 
 const CartIcon = ({toggleCartHidden, itemCount}) => (
@@ -19,8 +21,8 @@ const mapDispatchToProps = dispatch =>({
     toggleCartHidden: ()=> dispatch(toggleCartHidden())
 });
 
-const mapStateToProps = state => ({
-    itemCount: selectCartItemsCount(state)
+const mapStateToProps = createStructuredSelector ({
+    itemCount: selectCartItemsCount
 })
 
 export default connect(mapStateToProps, mapDispatchToProps)(CartIcon);

src/components/checkout-item/checkout-item.component.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import './checkout-item.styles.scss';
+
+const CheckoutItem = ({cartItem:{name, imageUrl, price, quantity}}) => (
+    <div className='checkout-item'>
+        <div className='image-container'>
+            <img src={imageUrl} alt='item' />
+        </div>
+        <span className='name'>{name}</span>
+        <span className='quantity'>{quantity}</span>
+        <span className='price'>{price}</span>
+        <div className='remove-button'>&#10005;</div>
+    </div>
+)
+
+export default CheckoutItem;

src/components/checkout-item/checkout-item.styles.scss

@@ -0,0 +1,33 @@
+.checkout-item {
+  width: 100%;
+  display: flex;
+  min-height: 100px;
+  border-bottom: 1px solid darkgrey;
+  padding: 15px 0;
+  font-size: 20px;
+  align-items: center;
+
+  .image-container {
+    width: 23%;
+    padding-right: 15px;
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .name,
+  .quantity,
+  .price {
+    width: 23%;
+  }
+
+  .quantity {
+    padding-left: 20px;
+  }
+
+  .remove-button {
+    padding-left: 12px;
+    cursor: pointer;
+  }
+}

src/components/header/header.component.jsx

@@ -4,9 +4,14 @@ import {ReactComponent as Logo} from '../../assets/crown.svg';
 import CartIcon from '../cart-icon/cart-icon.component';
 import CartDropDown from '../cart-dropdown/cart-dropdown.component';
 
+import {createStructuredSelector} from 'reselect';
+
 import {auth} from '../../fireabase/firebase.utils';
 import './header.styles.scss';
 import { connect } from 'react-redux';
+import { selectCurrentUser } from '../../redux/user/user.selectors'
+import { selectCartHidden } from '../../redux/cart/cart.selector'
+
 
 const Header = ({currentUser, hidden}) => (
     <div className='header'>
@@ -32,8 +37,9 @@ const Header = ({currentUser, hidden}) => (
 
     </div>
 )
-const mapStateToProps = ({user:{currentUser},cart:{hidden}}) => ({
-    currentUser, hidden
+const mapStateToProps = createStructuredSelector ({
+    currentUser: selectCurrentUser,
+    hidden: selectCartHidden
 })
 
 export default connect(mapStateToProps)(Header);

src/pages/checkout/checkout.component.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { createStructuredSelector } from 'reselect'
+
+import { selectCartItems, selectCartTotal } from '../../redux/cart/cart.selector';
+
+import CheckoutItem from '../../components/checkout-item/checkout-item.component'
+
+import './checkout.styles.scss';
+
+const CheckoutPage = ({cartItems, cartTotal}) => (
+    <div className='checkout-page'>
+        <div className='checkout-header'>
+            <div className='header-block'>
+                <span>Producto</span>
+            </div>
+            <div className='header-block'>
+                <span>Descripcion</span>
+            </div>
+            <div className='header-block'>
+                <span>Cantidad</span>
+            </div>
+            <div className='header-block'>
+                <span>Precio</span>
+            </div>
+            <div className='header-block'>
+                <span>Remover</span>
+            </div>
+        </div>
+        {
+            cartItems.map(
+                cartItem=> <CheckoutItem key={cartItem.id} cartItem={cartItem} />
+            )
+        }
+        <div className='total'>
+            <span>TOTAL: ${cartTotal}</span>
+        </div>
+    </div>
+)
+const mapStateToProps = createStructuredSelector({
+    cartItems: selectCartItems,
+    cartTotal: selectCartTotal
+})
+
+export default connect(mapStateToProps)(CheckoutPage);

src/pages/checkout/checkout.styles.scss

@@ -0,0 +1,31 @@
+.checkout-page {
+  width: 55%;
+  min-height: 90vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 50px auto 0;
+
+  .checkout-header {
+    width: 100%;
+    padding: 10px 0;
+    display: flex;
+    justify-content: space-between;
+    border-bottom: 1px solid darkgrey;
+
+    .header-block {
+      text-transform: capitalize;
+      width: 23%;
+
+      &:last-child {
+        width: 8%;
+      }
+    }
+  }
+
+  .total {
+    margin-top: 30px;
+    margin-left: auto;
+    font-size: 36px;
+  }
+}

src/redux/cart/cart.selector.js

@@ -13,4 +13,19 @@ export const selectCartItemsCount = createSelector(
      cartItems.reduce(
         (accumulateQuantity, cartItem) => accumulateQuantity + cartItem.quantity, 0
     )
-);
+);
+
+export const selectCartTotal = createSelector(
+    [selectCartItems],
+    cartItems=>
+        cartItems.reduce(
+            (accumulateQuantity, cartItem) => 
+            accumulateQuantity + cartItem.quantity * cartItem.price,
+            0
+        )
+)
+
+export const selectCartHidden = createSelector(
+    [selectCart],
+    cart=>cart.hidden
+)

src/redux/user/user.selectors.js

@@ -0,0 +1,8 @@
+import { createSelector } from 'reselect';
+
+const selectUser = state => state.user
+
+export const selectCurrentUser = createSelector (
+    [selectUser],
+    user=>user.currentUser
+)