Commit 6763d342 authored by Martin Fahl's avatar Martin Fahl

integrates backend

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