Commit 036dc8a5 authored by Martin Fahl's avatar Martin Fahl

connects add to backend and adds codecentric favicon

parent f4fa1d80
// 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
......@@ -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,
......
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(
......
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
}
......
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,
{
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment