From e88af087e4af426ece6b7a54a067cf46744c1db2 Mon Sep 17 00:00:00 2001
From: Tahuana <tahuana@gmail.com>
Date: Sat, 10 Mar 2018 20:17:00 -0500
Subject: [PATCH] removing an item from the list

---
 src/App.js            | 12 ++++++++----
 src/actions/index.js  | 11 +++++++++++
 src/reducers/index.js |  3 +++
 3 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/App.js b/src/App.js
index f54312b..f2b666f 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,17 +1,19 @@
 import React, {Component} from 'react';
 import './App.css';
 import {connect} from 'react-redux';
-import {addProduct} from './actions/index';
+import {addProduct, removeProduct} from './actions/index';
 import Chance from 'chance';
 
 export const chance = Chance();
 
-const Product = (props) => <div>{props.name}</div>;
+const Product = (props) => <div>{props.name} <RemoverButton remove={props.remove} id={props.id} /></div>;
 
 const DaBest = ({name}) => <h1>The Best: {name}</h1>;
 
 const AdderButton = ({add}) => <button onClick={() => add({name: 'Sofa'})}>Add Sofa</button>
 
+const RemoverButton = ({remove, id}) => <button onClick={() => remove({id: id})}>Remove item</button>
+
 class App extends Component {
 
 
@@ -30,12 +32,12 @@ class App extends Component {
   }
 
   render() {
-    const {productList, add, whoIsTheBest} = this.props;
+    const {productList, add, remove, whoIsTheBest} = this.props;
     debugger;
     return (
       <div>
         <DaBest name={whoIsTheBest}/>
-        {productList.map(product => <Product name={product.name} key={product.id}/>)}
+        {productList.map(product => <Product name={product.name} key={product.id} id={product.id} remove={remove} />)}
 
         <AdderButton {...this.props} />
       </div>
@@ -47,6 +49,7 @@ class App extends Component {
 // React x REDUX STUFF
 
 const mapStateToProps = state => {
+  debugger;
   return {
     productList: state.products.productList,
     whoIsTheBest: 'Della',
@@ -58,6 +61,7 @@ const mapStateToProps = state => {
 
 const mapDispatchToProps = {
   add: addProduct,
+  remove: removeProduct,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(App);
diff --git a/src/actions/index.js b/src/actions/index.js
index 79e204e..ae35ae6 100644
--- a/src/actions/index.js
+++ b/src/actions/index.js
@@ -1,5 +1,6 @@
 export const ACTION_TYPES = {
   addProduct: 'ADD_PRODUCTS',
+  removeProduct: 'REMOVE_PRODUCTS',
 };
 
 export function addProduct(product) {
@@ -11,3 +12,13 @@ export function addProduct(product) {
     }
   }
 }
+
+export function removeProduct(product) {
+  debugger;
+  return {
+    type: ACTION_TYPES.removeProduct,
+    payload: {
+      product, //mudar
+    }
+  }
+}
diff --git a/src/reducers/index.js b/src/reducers/index.js
index 5cb12f1..87849e5 100644
--- a/src/reducers/index.js
+++ b/src/reducers/index.js
@@ -15,6 +15,9 @@ export const products = (state = INITIAL_STATE, {type, payload}) => {
         case ACTION_TYPES.addProduct:
             // using object spread, I am saying - I want to return the old state, except change the productList property
             return {...state, productList: state.productList.concat(payload.product)};
+        case ACTION_TYPES.removeProduct:
+            // using object spread, I am saying - I want to return the old state, except change the productList property
+            return {...state, productList: state.productList.filter(prod => prod.id !== payload.product.id)};
     }
     return state;
 };