connects add to backend and adds codecentric favicon

src/actions/index.js

 // actions
-export const ADD = 'ADD_ITEM';
+export const ITEM_ADDED = 'ITEM_ADDED';
 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 UPDATE_ADD_DIALOG_NAME = 'UPDATE_ADD_DIALOG_NAME';
+export const UPDATE_ADD_DIALOG_QUANTITY = 'UPDATE_ADD_DIALOG_QUANTITY';
 export const OPEN_ADD_DIALOG = 'OPEN_ADD_DIALOG';
 export const CLOSE_ADD_DIALOG = 'CLOSE_ADD_DIALOG';
 
-export const add = (id, name, quantity) => ({
-    type: ADD,
+export const itemAdded = (id, name, quantity) => ({
+    type: ITEM_ADDED,
     id,
-    name: name,
+    name,
     quantity
 })
 
@@ -43,6 +45,16 @@ export const closeAddDialog = () => ({
     type: CLOSE_ADD_DIALOG
 })
 
+export const updateAddDialogName = (name) => ({
+    type: UPDATE_ADD_DIALOG_NAME,
+    name
+})
+
+export const updateAddDialogQuantity = (quantity) => ({
+    type: UPDATE_ADD_DIALOG_QUANTITY,
+    quantity
+})
+
 export const itemsLoaded = (items) => ({
     type: ITEMS_LOADED,
     items
@@ -52,4 +64,18 @@ export const getAllItems = () => dispatch => {
     fetch('/api/items')
         .then(response => response.json())
         .then(json => dispatch(itemsLoaded(json)))
+}
+
+export const addItem = (name, quantity) => dispatch => {
+    var xmlhttp = new XMLHttpRequest();
+    xmlhttp.open("POST", "/api/items");
+    xmlhttp.setRequestHeader("Content-Type", "application/json");
+    xmlhttp.onreadystatechange = () => { 
+        if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
+            var json = JSON.parse(xmlhttp.responseText);
+            dispatch(itemAdded(json.id, json.name, json.quantity))
+        }
+    }
+    xmlhttp.send(JSON.stringify({name, quantity}))
+    
 }
\ No newline at end of file

src/components/AddDialog/AddDialog.js

@@ -2,7 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import {Button, TextField,  Dialog, DialogActions,  DialogContent, DialogTitle, Grid } from '@material-ui/core/';
  
-const AddDialog = ({ isOpen, handleClose, handleCancel, handleAdd }) => (
+const AddDialog = ({ name, quantity, isOpen, handleClose, handleCancel, handleAdd, updateName, updateQuantity }) => (
   <Dialog
     open={isOpen}
     onClose={handleClose}
@@ -19,6 +19,7 @@ const AddDialog = ({ isOpen, handleClose, handleCancel, handleAdd }) => (
               id="name"
               label="Name"
               type="string"
+              onChange={updateName}
             />
           </Grid>
           <Grid item>
@@ -27,6 +28,7 @@ const AddDialog = ({ isOpen, handleClose, handleCancel, handleAdd }) => (
               id="quantity"
               label="Quantity"
               type="number"
+              onChange={updateQuantity}
             />
           </Grid>
         </Grid>
@@ -38,7 +40,7 @@ const AddDialog = ({ isOpen, handleClose, handleCancel, handleAdd }) => (
       <Button onClick={() => handleCancel()} color="primary">
         Cancel
       </Button>
-      <Button onClick={() => handleAdd()} color="primary">
+      <Button onClick={() => handleAdd(name, quantity)} color="primary">
         Add
       </Button>
     </DialogActions>
@@ -46,6 +48,8 @@ const AddDialog = ({ isOpen, handleClose, handleCancel, handleAdd }) => (
 )
 
 AddDialog.propTypes = {
+  name: PropTypes.string,
+  quantity: PropTypes.number,
   isOpen: PropTypes.bool.isRequired, 
   handleClose: PropTypes.func.isRequired, 
   handleCancel: PropTypes.func.isRequired, 

src/container/AddDialogContainer/AddDialogContainer.js

 import { connect } from 'react-redux'
 import AddDialog from '../../components/AddDialog/AddDialog'
 import { createSelector } from 'reselect'
-import { closeAddDialog } from '../../actions'
+import { closeAddDialog, updateAddDialogName, updateAddDialogQuantity, addItem } from '../../actions'
 
 const getAddDialog = state => state.addDialog; 
 
@@ -12,14 +12,35 @@ const getIsOpen = createSelector(
   }
 )
 
+const getNewName = createSelector(
+  [getAddDialog],
+  (addDialog) => {
+    return addDialog.name
+  }
+)
+
+const getNewQuantity = createSelector(
+  [getAddDialog],
+  (addDialog) => {
+    return addDialog.quantity
+  }
+)
+
 const mapStateToProps = state => ({
-  isOpen: getIsOpen(state)
+  isOpen: getIsOpen(state),
+  name: getNewName(state),
+  quantity: getNewQuantity(state)
 })
 
-const mapDispatchToProps = dispatch => ({
+const mapDispatchToProps = (dispatch) => ({
   handleClose: () => dispatch(closeAddDialog()), 
   handleCancel: () => dispatch(closeAddDialog()), 
-  handleAdd: () => dispatch(closeAddDialog())
+  handleAdd: (name, quantity) => {
+                                    dispatch(closeAddDialog()); 
+                                    dispatch(addItem(name, quantity))
+                                 },
+  updateName: event => dispatch(updateAddDialogName(event.target.value)),
+  updateQuantity: event => dispatch(updateAddDialogQuantity(Number(event.target.value)))
 })
 
 export default connect(

src/reducers/addDialog.js

-import { OPEN_ADD_DIALOG, CLOSE_ADD_DIALOG } from '../actions'
+import { OPEN_ADD_DIALOG, CLOSE_ADD_DIALOG, UPDATE_ADD_DIALOG_NAME, UPDATE_ADD_DIALOG_QUANTITY } from '../actions'
 
-const addDialog = (state = {isOpen: false}, action) => {
+const addDialog = (state = {isOpen: false, name: "", quantity: 0}, action) => {
   switch (action.type) {
     case OPEN_ADD_DIALOG:
-      return {isOpen: true}
+      return {...state, isOpen: true}
     case CLOSE_ADD_DIALOG:
-      return {isOpen: false}  
+      return {...state, isOpen: false, name: "", quantity: 0}  
+    case UPDATE_ADD_DIALOG_NAME:
+      return {...state, name: action.name}
+    case UPDATE_ADD_DIALOG_QUANTITY:  
+      return {...state, quantity: action.quantity}
     default:
       return state
   }

src/reducers/items.js

-import { ADD, DELETE_ITEM, INCREMENT, DECREMENT, ITEMS_LOADED } from '../actions';
+import { DELETE_ITEM, INCREMENT, DECREMENT, ITEMS_LOADED, ITEM_ADDED } from '../actions';
 
 const items = (state = [], action) => {
     switch (action.type) {
         case ITEMS_LOADED:
             return action.items
-        case ADD:
+        case ITEM_ADDED:
             return [
                 ...state,
                 {