Commit 34317e21 authored by Martin Fahl's avatar Martin Fahl
Browse files

adds delete functionality

parent 29f91868
// actions // actions
export const ADD = 'ADD_ITEM'; export const ADD = 'ADD_ITEM';
export const UPDATE_FILTER = 'UPDATE_FILTER'; export const UPDATE_FILTER = 'UPDATE_FILTER';
export const DELETE_ITEM = 'DELETE_ITEM';
export const add = (id, name) => ({ export const add = (id, name) => ({
type: ADD, type: ADD,
...@@ -11,4 +12,10 @@ export const add = (id, name) => ({ ...@@ -11,4 +12,10 @@ export const add = (id, name) => ({
export const updateFilter = filterTerm => ({ export const updateFilter = filterTerm => ({
type: UPDATE_FILTER, type: UPDATE_FILTER,
filterTerm: filterTerm filterTerm: filterTerm
}); });
\ No newline at end of file
export const deleteItem = id => ({
type: DELETE_ITEM,
id
});
\ No newline at end of file
...@@ -4,7 +4,7 @@ import { Item } from "../../container/Item/Item"; ...@@ -4,7 +4,7 @@ import { Item } from "../../container/Item/Item";
import { Filter } from "../Filter/Filter"; import { Filter } from "../Filter/Filter";
import { Container, Row, Col, Card, CardBody, ListGroup } from "mdbreact"; import { Container, Row, Col, Card, CardBody, ListGroup } from "mdbreact";
const InventoryList = ({ items, filterTerm, updateFilter }) => ( const InventoryList = ({ items, filterTerm, updateFilter, deleteItem }) => (
<Container> <Container>
<Row className="justify-content-md-center justify-content-center mx-auto"> <Row className="justify-content-md-center justify-content-center mx-auto">
<Col sm="12" md="8" lg="6"> <Col sm="12" md="8" lg="6">
...@@ -13,10 +13,11 @@ const InventoryList = ({ items, filterTerm, updateFilter }) => ( ...@@ -13,10 +13,11 @@ const InventoryList = ({ items, filterTerm, updateFilter }) => (
<CardBody> <CardBody>
<Filter filterTerm={filterTerm} updateFilter={updateFilter} /> <Filter filterTerm={filterTerm} updateFilter={updateFilter} />
<ListGroup> <ListGroup>
{items.map(items => {items.map(item =>
<Item <Item
key={items.id} key={item.id}
{...items} {...item}
deleteItem={() => deleteItem(item.id)}
/> />
)} )}
</ListGroup> </ListGroup>
......
import { connect } from 'react-redux' import { connect } from 'react-redux'
import InventoryList from '../../components/InventoryList/InventoryList' import InventoryList from '../../components/InventoryList/InventoryList'
import { updateFilter } from '../../actions' import { updateFilter, deleteItem } from '../../actions'
const getVisibleItems = (items, filterTerm) => { const getVisibleItems = (items, filterTerm) => {
console.log(filterTerm); console.log(filterTerm);
...@@ -16,7 +16,8 @@ const mapStateToProps = state => ({ ...@@ -16,7 +16,8 @@ const mapStateToProps = state => ({
}) })
const mapDispatchToProps = dispatch => ({ const mapDispatchToProps = dispatch => ({
updateFilter: event => dispatch(updateFilter(event.target.value)) updateFilter: event => dispatch(updateFilter(event.target.value)),
deleteItem: id => dispatch(deleteItem(id))
}) })
export default connect( export default connect(
......
...@@ -33,7 +33,7 @@ export class Item extends Component { ...@@ -33,7 +33,7 @@ export class Item extends Component {
<Badge color="secondary" className="ml-1 mr-1" onClick={this.increment}><Fa icon="plus-square" aria-hidden="true"/></Badge> <Badge color="secondary" className="ml-1 mr-1" onClick={this.increment}><Fa icon="plus-square" aria-hidden="true"/></Badge>
<Badge color="default" className="ml-1 mr-1" pill>{this.state.counter}</Badge> <Badge color="default" className="ml-1 mr-1" pill>{this.state.counter}</Badge>
<Badge color="secondary" className="ml-1 mr-1" onClick={this.decrement}><Fa icon="minus-square" aria-hidden="true"/></Badge> <Badge color="secondary" className="ml-1 mr-1" onClick={this.decrement}><Fa icon="minus-square" aria-hidden="true"/></Badge>
<Badge color="danger" className="ml-1 mr-1"><Fa icon="trash" aria-hidden="true"/></Badge> <Badge color="danger" className="ml-1 mr-1" onClick={this.props.deleteItem}><Fa icon="trash" aria-hidden="true"/></Badge>
</Col> </Col>
</Row> </Row>
......
import { ADD } from '../actions'; import { ADD, DELETE_ITEM } from '../actions';
const items = (state = [], action) => { const items = (state = [], action) => {
switch (action.type) { switch (action.type) {
...@@ -11,6 +11,8 @@ const items = (state = [], action) => { ...@@ -11,6 +11,8 @@ const items = (state = [], action) => {
amount: 0 amount: 0
} }
] ]
case DELETE_ITEM:
return state.filter(item => (item.id !== action.id))
default: default:
return state 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