integrates backend

package.json

@@ -2,6 +2,7 @@
   "name": "react-codingbrunch-inventory-frontend-inmemory",
   "version": "0.1.0",
   "private": true,
+  "proxy": "http://localhost:4000",
   "dependencies": {
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
@@ -11,7 +12,8 @@
     "react-redux": "^5.0.7",
     "react-scripts": "1.1.4",
     "react-test-renderer": "^16.4.1",
-    "redux": "^4.0.0"
+    "redux": "^4.0.0",
+    "redux-thunk": "^2.3.0"
   },
   "scripts": {
     "start": "react-scripts start",

src/actions/index.js

@@ -4,29 +4,41 @@ export const UPDATE_FILTER = 'UPDATE_FILTER';
 export const DELETE_ITEM = 'DELETE_ITEM';
 export const INCREMENT = 'INREMENT_ITEM';
 export const DECREMENT = 'DECREMENT_ITEM';
+export const ITEMS_LOADED = 'ITEMS_LOADED';
 
 export const add = (id, name) => ({
     type: ADD,
-    id: id,
+    id,
     name: name
-});
+})
 
 export const updateFilter = filterTerm => ({
     type: UPDATE_FILTER,
     filterTerm: filterTerm
-});
+})
 
 export const deleteItem = id => ({
     type: DELETE_ITEM,
     id
-});
+})
   
 export const increment = id => ({
     type: INCREMENT,
-    id: id,
-});
+    id
+})
 
 export const decrement = id => ({
     type: DECREMENT,
-    id: id,
-});
\ No newline at end of file
+    id
+})
+
+export const itemsLoaded = (items) => ({
+    type: ITEMS_LOADED,
+    items
+})
+
+export const getAllItems = () => dispatch => {
+    fetch('/api/items')
+        .then(response => response.json())
+        .then(json => dispatch(itemsLoaded(json)))
+}
\ No newline at end of file

src/components/InventoryList/InventoryList.js

@@ -32,7 +32,7 @@ InventoryList.propTypes = {
     items: PropTypes.arrayOf(PropTypes.shape({
       id: PropTypes.number.isRequired,
       name: PropTypes.string.isRequired,
-      amount: PropTypes.number.isRequired
+      quantity: PropTypes.number.isRequired
     }).isRequired).isRequired,
     filterTerm: PropTypes.string,
     updateFilter: PropTypes.func

src/components/InventoryList/InventoryList.test.js

@@ -10,7 +10,7 @@ describe("InventoryList", () => {
     const itemList = [{
       id: 2,
       name: "test",
-      amount: 1}];
+      quantity: 1}];
     const inventoryListComponent = renderer
       .create(<InventoryList items={itemList} />)
       .toJSON();

src/components/Item/Item.js

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import { ListGroupItem, Badge, Fa } from "mdbreact";
 import { Row, Col } from "mdbreact";
 
-const Item = ({ id, name, amount, increment, decrement, deleteItem }) => (
+const Item = ({ id, name, quantity, increment, decrement, deleteItem }) => (
   <ListGroupItem>
     <Row>
 
@@ -13,7 +13,7 @@ const Item = ({ id, name, amount, increment, decrement, deleteItem }) => (
 
       <Col md="6" xs="8">
         <Badge color="secondary" className="ml-1 mr-1" onClick={() => decrement(id)}><Fa icon="minus-square" aria-hidden="true"/></Badge>
-        <Badge color="default" className="ml-1 mr-1" pill>{amount}</Badge>
+        <Badge color="default" className="ml-1 mr-1" pill>{quantity}</Badge>
         <Badge color="secondary" className="ml-1 mr-1" onClick={() => increment(id)}><Fa icon="plus-square" aria-hidden="true"/></Badge>
         <Badge color="danger" className="ml-1 mr-1" onClick={() => deleteItem(id)}><Fa icon="trash" aria-hidden="true"/></Badge>
       </Col>
@@ -26,7 +26,7 @@ const Item = ({ id, name, amount, increment, decrement, deleteItem }) => (
 
 Item.propTypes = {
   name: PropTypes.string.isRequired,
-  amount: PropTypes.number,
+  quantity: PropTypes.number,
   increment: PropTypes.func,
   decrement: PropTypes.func,
   deleteItem: PropTypes.func

src/container/InventoryListContainer/InventoryListContainer.js

+import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import InventoryList from '../../components/InventoryList/InventoryList'
-import { updateFilter, deleteItem } from '../../actions'
+import { updateFilter, deleteItem, getAllItems } from '../../actions'
+
+class InventoryListContainer extends Component {
+  componentDidMount() {
+    this.props.getAllItems();
+  }
+
+  render() {
+    return (
+      <InventoryList {...this.props} />
+    )
+  }
+}
 
 const getVisibleItems = (items, filterTerm) => {
     console.log(filterTerm);
@@ -17,10 +30,11 @@ const mapStateToProps = state => ({
 
 const mapDispatchToProps = dispatch => ({
   updateFilter: event => dispatch(updateFilter(event.target.value)),
-  deleteItem: id => dispatch(deleteItem(id))
+  deleteItem: id => dispatch(deleteItem(id)),
+  getAllItems: () => dispatch(getAllItems())
 })
 
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(InventoryList)
+)(InventoryListContainer)

src/container/ItemContainer/ItemContainer.js

@@ -3,7 +3,7 @@ import Item from '../../components/Item/Item'
 import { increment, decrement, deleteItem } from '../../actions'
 
 const mapStateToProps = (state, ownProps) => ({
-  amount: state.items.find(item => item.id === ownProps.id).amount
+  quantity: state.items.find(item => item.id === ownProps.id).quantity
 })
 
 const mapDispatchToProps = dispatch => ({

src/index.js

 import React from 'react';
 import { render } from 'react-dom'
-import { createStore } from 'redux'
+import { createStore, applyMiddleware } from 'redux'
+import thunk from 'redux-thunk';
 import { Provider } from 'react-redux'
 import registerServiceWorker from './registerServiceWorker';
 import rootReducer from './reducers'
@@ -10,16 +11,19 @@ import 'mdbreact/dist/css/mdb.css';
 import App from './components/App/App';
 import { add } from './actions';
 
-const store = createStore(rootReducer)
+const store = createStore(
+  rootReducer,
+  applyMiddleware(thunk)
+);
 
 console.log('initial state: ', store.getState());
 store.subscribe(() => {
   console.log(store.getState());
 });
 
-store.dispatch(add(1, 'Milk'));
-store.dispatch(add(2, 'Eggs'));
-store.dispatch(add(3, 'Bacon'));
+//store.dispatch(add(1, 'Milk'));
+//store.dispatch(add(2, 'Eggs'));
+//store.dispatch(add(3, 'Bacon'));
 
 render(
   <Provider store={store}>

src/reducers/items.js

-import { ADD, DELETE_ITEM, INCREMENT, DECREMENT } from '../actions';
+import { ADD, DELETE_ITEM, INCREMENT, DECREMENT, ITEMS_LOADED } from '../actions';
 
 const items = (state = [], action) => {
     switch (action.type) {
+        case ITEMS_LOADED:
+            return action.items
         case ADD:
             return [
                 ...state,
                 {
                     id: action.id,
                     name: action.name,
-                    amount: 0
+                    quantity: 0
                 }
             ]
         case DELETE_ITEM:
@@ -16,11 +18,11 @@ const items = (state = [], action) => {
             return state.filter(item => (item.id !== action.id))
         case INCREMENT:
             return state.map(item => (
-                item.id === action.id ? {...item, amount: item.amount + 1} : item
+                item.id === action.id ? {...item, quantity: item.quantity + 1} : item
             ));
         case DECREMENT:
             return state.map(item => (
-                item.id === action.id ? {...item, amount: item.amount > 1 ? item.amount - 1 : 0} : item
+                item.id === action.id ? {...item, quantity: item.quantity > 1 ? item.quantity - 1 : 0} : item
             ));        
         default:
             return state

yarn.lock

@@ -6653,6 +6653,10 @@ reduce-function-call@^1.0.1:
   dependencies:
     balanced-match "^0.4.2"
 
+redux-thunk@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.3.0.tgz#51c2c19a185ed5187aaa9a2d08b666d0d6467622"
+
 redux@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.0.tgz#aa698a92b729315d22b34a0553d7e6533555cc03"