Skip to content

GitLab

Commit 31ce42a8 authored by Martin Fahl's avatar Martin Fahl
Browse files

send increment/decrement to server

parent 905a1445
Hide whitespace changes
Inline Side-by-side
Showing with 59 additions and 47 deletions
src/actions/index.js
View file @ 31ce42a8
import Axios from 'axios';
// actions
export const ITEM_ADDED = 'ITEM_ADDED';
export const UPDATE_FILTER = 'UPDATE_FILTER';
export const ITEM_DELETED = 'ITEM_DELETED';
export const INCREMENT = 'INREMENT_ITEM';
export const DECREMENT = 'DECREMENT_ITEM';
export const ITEM_UPDATED = 'ITEM_UPDATED';
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';
......@@ -26,15 +26,12 @@ export const itemDeleted = id => ({
type: ITEM_DELETED,
id
})
export const increment = id => ({
type: INCREMENT,
id
})
export const decrement = id => ({
type: DECREMENT,
id
export const itemUpdated = (id, name, quantity) => ({
type: ITEM_UPDATED,
id,
name,
quantity
})
export const openAddDialog = () => ({
......@@ -67,9 +64,9 @@ export const getAllItems = () => dispatch => {
}
export const addItem = (name, quantity) => dispatch => {
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("POST", "/api/items");
xmlhttp.setRequestHeader("Content-Type", "application/json");
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);
......@@ -80,12 +77,18 @@ export const addItem = (name, quantity) => dispatch => {
}
export const deleteItem = (id) => dispatch => {
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("DELETE", "/api/items/"+id);
var xmlhttp = new XMLHttpRequest()
xmlhttp.open("DELETE", "/api/items/"+id)
xmlhttp.onreadystatechange = () => {
if (xmlhttp.readyState === 4 && xmlhttp.status === 204) {
dispatch(itemDeleted(id))
}
}
xmlhttp.send()
}
\ No newline at end of file
}
export const updateItem = (id, name, quantity) => dispatch => {
dispatch(itemUpdated(id, name, quantity))
Axios.put('/api/items/'+id, {id, name, quantity}).catch(dispatch(getAllItems));
}
src/actions/index.test.js
View file @ 31ce42a8
......@@ -37,24 +37,6 @@ describe('actions', () => {
})
})
describe('actions', () => {
it('should create an action to increment an item\'s quantity locally', () => {
const expectedAction = {
type: actions.INCREMENT,
}
expect(actions.increment()).toEqual(expectedAction)
})
})
describe('actions', () => {
it('should create an action to decrement an item\'s quantity locally', () => {
const expectedAction = {
type: actions.DECREMENT,
}
expect(actions.decrement()).toEqual(expectedAction)
})
})
describe('actions', () => {
it('should create an action to open the add dialog', () => {
const expectedAction = {
......@@ -104,4 +86,19 @@ describe('actions', () => {
}
expect(actions.itemsLoaded(items)).toEqual(expectedAction)
})
})
describe('actions', () => {
it('should create an action to signal that the items have been updated', () => {
const id = 1
const name = "Hugo"
const quantity = 98
const expectedAction = {
type: actions.ITEM_UPDATED,
id,
name,
quantity
}
expect(actions.itemUpdated(id, name, quantity)).toEqual(expectedAction)
})
})
\ No newline at end of file
src/components/Item/Item.js
View file @ 31ce42a8
......@@ -8,14 +8,17 @@ import IconButton from '@material-ui/core/IconButton';
import DeleteIcon from '@material-ui/icons/Delete';
import Avatar from '@material-ui/core/Avatar';
const Item = ({ id, name, quantity, increment, decrement, deleteItem }) => (
const increment = (quantity) => quantity + 1
const decrement = (quantity) => quantity > 1 ? quantity - 1 : 0
const Item = ({ id, name, quantity, updateItem, deleteItem }) => (
<ListItem>
<ListItemText>
<Typography variant="subheading">
{name}
</Typography>
</ListItemText>
<IconButton onClick={() => decrement(id)} aria-label="Decrement">
<IconButton onClick={() => updateItem(id, name, decrement(quantity))} aria-label="Decrement">
<Icon color="secondary">arrow_downward</Icon>
</IconButton>
......@@ -25,7 +28,7 @@ const Item = ({ id, name, quantity, increment, decrement, deleteItem }) => (
</Typography>
</Avatar>
<IconButton onClick={() => increment(id)} aria-label="Increment">
<IconButton onClick={() => updateItem(id, name, increment(quantity))} aria-label="Increment">
<Icon color="secondary">arrow_upward</Icon>
</IconButton>
<IconButton onClick={() => deleteItem(id)} aria-label="Delete">
......
src/container/ItemContainer/ItemContainer.js
View file @ 31ce42a8
import { connect } from 'react-redux'
import Item from '../../components/Item/Item'
import { increment, decrement, deleteItem } from '../../actions'
import { updateItem, deleteItem } from '../../actions'
import { createSelector } from 'reselect'
const getItem = (state, props) => state.items.find(item => item.id === props.id)
......@@ -15,8 +15,7 @@ const mapStateToProps = (state, props) => ({
})
const mapDispatchToProps = dispatch => ({
increment: id => dispatch(increment(id)),
decrement: id => dispatch(decrement(id)),
updateItem: (id, name, quantity) => dispatch(updateItem(id, name, quantity)),
deleteItem: id => dispatch(deleteItem(id))
})
......
src/reducers/items.js
View file @ 31ce42a8
import { ITEM_DELETED, INCREMENT, DECREMENT, ITEMS_LOADED, ITEM_ADDED } from '../actions';
import { ITEM_DELETED, ITEMS_LOADED, ITEM_ADDED, ITEM_UPDATED } from '../actions';
const items = (state = [], action) => {
switch (action.type) {
......@@ -15,13 +15,9 @@ const items = (state = [], action) => {
]
case ITEM_DELETED:
return state.filter(item => (item.id !== action.id))
case INCREMENT:
case ITEM_UPDATED:
return state.map(item => (
item.id === action.id ? {...item, quantity: item.quantity + 1} : item
));
case DECREMENT:
return state.map(item => (
item.id === action.id ? {...item, quantity: item.quantity > 1 ? item.quantity - 1 : 0} : item
item.id === action.id ? {...item, name: action.name, quantity: action.quantity } : item
));
default:
return state
......
yarn.lock
View file @ 31ce42a8
......@@ -409,6 +409,13 @@ aws4@^1.6.0:
version "1.7.0"
resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.7.0.tgz#d4d0e9b9dbfca77bf08eeb0a8a471550fe39e289"
axios@^0.18.0:
version "0.18.0"
resolved "https://registry.yarnpkg.com/axios/-/axios-0.18.0.tgz#32d53e4851efdc0a11993b6cd000789d70c05102"
dependencies:
follow-redirects "^1.3.0"
is-buffer "^1.1.5"
axobject-query@^0.1.0:
version "0.1.0"
resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-0.1.0.tgz#62f59dbc59c9f9242759ca349960e7a2fe3c36c0"
......@@ -2971,6 +2978,12 @@ follow-redirects@^1.0.0:
dependencies:
debug "^3.1.0"
follow-redirects@^1.3.0:
version "1.5.2"
resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.5.2.tgz#5a9d80e0165957e5ef0c1210678fc5c4acb9fb03"
dependencies:
debug "^3.1.0"
for-in@^1.0.1, for-in@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
......
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