Completed Redux homework - Stephanie's solution

src/App.js

@@ -1,20 +1,42 @@
 import React, {Component} from 'react';
 import './App.css';
 import {connect} from 'react-redux';
-import {addProduct} from './actions/index';
+import {addProduct, removeProduct, submitForm, updateProduct, updateSearchTerm} from './actions/index';
 import Chance from 'chance';
 
+import { Form } from './components/Form';
+import { Product } from './components/Product';
+
 export const chance = Chance();
 
-const Product = (props) => <div>{props.name}</div>;
+const SearchBar = ({searchTerm, updateSearchTerm}) => {
+  return (
+    <input type="text"
+      value={searchTerm}
+      onChange={(e) => {
+        updateSearchTerm(e.target.value);
+        }
+      }
+    />
+  );
+};
+
+const EnhancedProductList = ({searchTerm, filteredProducts, productList, remove}) => {
+  const products = searchTerm.length > 0 ? filteredProducts : productList;
+  return (
+    <div>
+      {
+        products.map(product => <Product key={product.id} remove={remove} {...product}/>)
+      }
+    </div>
+  );
+};
 
 const DaBest = ({name}) => <h1>The Best: {name}</h1>;
 
-const AdderButton = ({add}) => <button onClick={() => add({name: 'Sofa'})}>Add Sofa</button>
+const AdderButton = ({add}) => <button onClick={() => add({name: 'Sofa'})}>Add Sofa</button>;
 
 class App extends Component {
-
-
   constructor(props) {
     super(props);
   }
@@ -30,14 +52,16 @@ class App extends Component {
   }
 
   render() {
-    const {productList, add, whoIsTheBest} = this.props;
+    const {whoIsTheBest, productList, searchTerm, filteredProducts, add, remove, updateSearchTerm} = this.props;
     debugger;
     return (
       <div>
+        <SearchBar {...this.props} />
         <DaBest name={whoIsTheBest}/>
-        {productList.map(product => <Product name={product.name} key={product.id}/>)}
-
+        <EnhancedProductList {...this.props}/>
         <AdderButton {...this.props} />
+        <hr />
+        <Form {...this.props}/>
       </div>
     );
   }
@@ -49,15 +73,21 @@ class App extends Component {
 const mapStateToProps = state => {
   return {
     productList: state.products.productList,
+    searchTerm: state.products.searchTerm,
     whoIsTheBest: 'Della',
 
     // an example of how to derive state in the mapStateToProps function - this is a specific 'subset' of the full list
     lowStockProducts: state.products.productList.filter(prod => prod.stock && prod.stock < 4),
+    filteredProducts: state.products.productList.filter(prod => prod.name.toLowerCase().includes(state.products.searchTerm.toLowerCase())),
   }
 };
 
 const mapDispatchToProps = {
   add: addProduct,
+  remove: removeProduct,
+  submitForm,
+  updateProduct,
+  updateSearchTerm
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(App);

src/actions/index.js

@@ -1,13 +1,44 @@
 export const ACTION_TYPES = {
   addProduct: 'ADD_PRODUCTS',
+  removeProduct: 'REMOVE_PRODUCTS',
+  submitForm: 'SUBMIT_FORM',
+  updateProduct: 'UPDATE_PRODUCT',
+  updateSearchTerm: 'UPDATE_SEARCHTERM',
 };
 
 export function addProduct(product) {
-  debugger;
   return {
     type: ACTION_TYPES.addProduct,
     payload: {
       product,
     }
   }
 }
+
+export function removeProduct(productId) {
+  return {
+    type: ACTION_TYPES.removeProduct,
+    payload: productId
+  }
+}
+
+export function submitForm() {
+  return {
+    type: ACTION_TYPES.submitForm
+  }
+}
+
+export function updateProduct(label, val) {
+  return {
+    type: ACTION_TYPES.updateProduct,
+    label,
+    val
+  }
+}
+
+export function updateSearchTerm(term) {
+  return {
+    type: ACTION_TYPES.updateSearchTerm,
+    payload: term
+  }
+}

src/components/Form.js

@@ -0,0 +1,14 @@
+import React from 'react';
+
+export const Form = ({submitForm, updateProduct}) => {
+  return (
+    <div>
+      <div>Name: <input type="text" onChange={(e) => {updateProduct('name', e.target.value)}}/></div>
+      <div>Department: <input type="text" onChange={(e) => {updateProduct('department', e.target.value)}}/></div>
+      <div>Price: <input type="text" onChange={(e) => {updateProduct('price', e.target.value)}}/></div>
+      <div>Stock: <input type="text" onChange={(e) => {updateProduct('stock', e.target.value)}}/></div>
+      <div>Type: <input type="text" onChange={(e) => {updateProduct('type', e.target.value)}}/></div>
+      <button onClick={() => submitForm()}>Submit Product</button>
+    </div>
+  )
+};

src/components/Product.js

@@ -0,0 +1,15 @@
+import React from 'react';
+
+export const Product = ({id, name, department, price, stock, type,  remove}) => {
+  debugger;
+  return (
+    <div>
+      <h3>{name}</h3>
+      <div>Department: {department}</div>
+      <div>Price: {price}</div>
+      <div>Stock: {stock}</div>
+      <div>Type: {type}</div>
+      <button onClick={() => remove(id)}>Delete Product</button>
+    </div>
+  );
+};

src/reducers/index.js

@@ -1,20 +1,35 @@
 import {combineReducers} from 'redux';
 
-import {generateProducts} from '../utils/data';
+import {generateProducts, chance} from '../utils/data';
 import {ACTION_TYPES} from '../actions';
 
-
 // you'll notice I set my initial state below on line 13 to equal this object! This is a common pattern
 const INITIAL_STATE = {
-    productList: generateProducts(10),
-    searchString: '' // hint for optional homework
+  productList: generateProducts(10),
+  searchTerm: '',
+  product: {
+    id: chance.guid(),
+    name: '',
+    department: '',
+    price: 0,
+    stock: 0,
+    type: '',
+  }
 };
 
-export const products = (state = INITIAL_STATE, {type, payload}) => {
+export const products = (state = INITIAL_STATE, {type, payload, label, val}) => {
     switch (type) {
         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:
+            return {...state, productList: state.productList.filter(prod => prod.id !== payload)};
+        case ACTION_TYPES.submitForm:
+            return {...state, productList: state.productList.concat(state.product)};
+        case ACTION_TYPES.updateProduct:
+            return {...state, product: {...state.product, [label]: val}};
+        case ACTION_TYPES.updateSearchTerm:
+            return {...state, searchTerm: payload};
     }
     return state;
 };

src/reducers/index.test.js

@@ -2,6 +2,9 @@ import { ACTION_TYPES } from '../actions';
 import { products } from './index';
 
   it('adds a product on ADD_PRODUCT', () => {
+    const intialState = {
+      productList: []
+    };
     const action = {
       type: ACTION_TYPES.addProduct,
       payload: {
@@ -10,7 +13,54 @@ import { products } from './index';
         }
       }
     };
-    expect(products([], action)).toEqual([{
-      name: 'Sofa',
-    }]);
+    expect(products(intialState, action).productList).toEqual([{name: 'Sofa'}]);
+  });
+
+  it('remove a product on REMOVE_PRODUCT', () => {
+    const intialState = {
+      productList: [{
+        id: '123',
+        name: 'table',
+      }]
+    };
+    const action = {
+      type: ACTION_TYPES.removeProduct,
+      payload: '123'
+    };
+    expect(products(intialState, action).productList).toEqual([]);
+  });
+
+  it('add a product through Form on SUBMIT_FORM', () => {
+    const intialState = {
+      productList: [],
+      product: {
+        name: 'table'
+      }
+    }
+    const action = {
+        type: ACTION_TYPES.submitForm
+      };
+    expect(products(intialState, action).productList).toEqual([{name: 'table'}]);
+  });
+
+  it('update product info on UPDATE_PRODUCT', () => {
+    const initialState = {
+      product: {
+        name: ''
+      }
+    };
+    const action = {
+      type: ACTION_TYPES.updateProduct,
+      label: 'name',
+      val: 'table'
+    };
+    expect(products(initialState, action).product.name).toEqual('table');
+  });
+
+  it('update search term on UPDATE_SEARCHTERM', () => {
+    const action = {
+      type: ACTION_TYPES.updateSearchTerm,
+      payload: 'chair'
+    };
+    expect(products({searchTerm: ''}, action).searchTerm).toEqual('chair');
   });