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

adds delete functionality

parent 29f91868
// actions
export const ADD = 'ADD_ITEM';
export const UPDATE_FILTER = 'UPDATE_FILTER';
export const DELETE_ITEM = 'DELETE_ITEM';
export const add = (id, name) => ({
type: ADD,
......@@ -11,4 +12,10 @@ export const add = (id, name) => ({
export const updateFilter = filterTerm => ({
type: UPDATE_FILTER,
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";
import { Filter } from "../Filter/Filter";
import { Container, Row, Col, Card, CardBody, ListGroup } from "mdbreact";
const InventoryList = ({ items, filterTerm, updateFilter }) => (
const InventoryList = ({ items, filterTerm, updateFilter, deleteItem }) => (
<Container>
<Row className="justify-content-md-center justify-content-center mx-auto">
<Col sm="12" md="8" lg="6">
......@@ -13,10 +13,11 @@ const InventoryList = ({ items, filterTerm, updateFilter }) => (
<CardBody>
<Filter filterTerm={filterTerm} updateFilter={updateFilter} />
<ListGroup>
{items.map(items =>
{items.map(item =>
<Item
key={items.id}
{...items}
key={item.id}
{...item}
deleteItem={() => deleteItem(item.id)}
/>
)}
</ListGroup>
......
import { connect } from 'react-redux'
import InventoryList from '../../components/InventoryList/InventoryList'
import { updateFilter } from '../../actions'
import { updateFilter, deleteItem } from '../../actions'
const getVisibleItems = (items, filterTerm) => {
console.log(filterTerm);
......@@ -16,7 +16,8 @@ const mapStateToProps = state => ({
})
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(
......
......@@ -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="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="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>
</Row>
......
import { ADD } from '../actions';
import { ADD, DELETE_ITEM } from '../actions';
const items = (state = [], action) => {
switch (action.type) {
......@@ -11,6 +11,8 @@ const items = (state = [], action) => {
amount: 0
}
]
case DELETE_ITEM:
return state.filter(item => (item.id !== action.id))
default:
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