Commit 949c3abc authored by Martin Fahl's avatar Martin Fahl

implements filter with redux

parent e7116f25
// actions
export const ADD = 'ADD';
export const ADD = 'ADD_ITEM';
export const UPDATE_FILTER = 'UPDATE_FILTER';
export const add = (id, name) => ({
type: ADD,
id: id,
name: name
});
export const updateFilter = filterTerm => ({
type: UPDATE_FILTER,
filterTerm: filterTerm
});
\ No newline at end of file
import React, { Component } from "react";
import PropTypes from "prop-types";
import { Filter } from "../../presentational/Filter/Filter";
import { Item } from "../Item/Item";
import { Container, Row, Col, Card, CardBody, ListGroup } from "mdbreact";
export class InventoryList extends Component {
constructor(props) {
super(props);
this.state = {
filterTerm: "",
items: ["Water", "Bread", "Beer"]
};
}
updateFilter = event => {
this.setState({ filterTerm: event.target.value });
};
render() {
return (
<Container>
<Row className="justify-content-md-center justify-content-center mx-auto">
<Col sm="12" md="8" lg="6">
<Card className="mt-4 mb-4 mx-auto">
<CardBody>
<Filter
updateFilter={this.updateFilter}
filterTerm={this.state.filterTerm}
/>
<ListGroup>
{this.state.items
.filter(items => items.includes(this.state.filterTerm))
.map((name, index) => (
<Item key={index} name={name} />
))}
</ListGroup>
</CardBody>
</Card>
</Col>
</Row>
</Container>
);
}
}
InventoryList.propTypes = {
itemList: PropTypes.array
};
import { connect } from 'react-redux'
import InventoryList from '../../presentational/InventoryList/InventoryList'
import { updateFilter } from '../../../actions'
const getVisibleItems = (items, filterTerm) => {
console.log(filterTerm);
if (filterTerm === undefined) {
return items;
} else {
return items.filter(item => item.name.includes(filterTerm));
}
}
const mapStateToProps = state => ({
items: getVisibleItems(state.items, state.filterTerm)
})
const mapDispatchToProps = dispatch => ({
updateFilter: event => dispatch(updateFilter(event.target.value))
})
export default connect(
mapStateToProps,
mapDispatchToProps
)(InventoryList)
// export class InventoryList extends Component {
// constructor(props) {
// super(props);
// this.state = {
// filterTerm: "",
// items: ["Water", "Bread", "Beer"]
// };
// }
// updateFilter = event => {
// this.setState({ filterTerm: event.target.value });
// };
// render() {
// return (
// <Container>
// <Row className="justify-content-md-center justify-content-center mx-auto">
// <Col sm="12" md="8" lg="6">
// <Card className="mt-4 mb-4 mx-auto">
// <CardBody>
// <Filter
// updateFilter={this.updateFilter}
// filterTerm={this.state.filterTerm}
// />
// <ListGroup>
// {this.state.items
// .filter(items => items.includes(this.state.filterTerm))
// .map((name, index) => (
// <Item key={index} name={name} />
// ))}
// </ListGroup>
// </CardBody>
// </Card>
// </Col>
// </Row>
// </Container>
// );
// }
// }
// InventoryList.propTypes = {
// itemList: PropTypes.array
// };
import React from 'react';
import { InventoryList } from "../../container/InventoryList/InventoryList.js";
import { Navbar } from "../Navbar/Navbar";
import { CodecentricFooter } from "../CodecentricFooter/CodecentricFooter";
import InventoryListContainer from '../../container/InventoryList/InventoryListContainer';
export const App = () => (
<div className="App">
<Navbar appName="Inventory" />
<div className="container">
<InventoryList />
<InventoryListContainer />
</div>
<CodecentricFooter author="codecentric" link="https://www.codecentric.de"/>
</div>
......
import React from 'react'
import PropTypes from 'prop-types'
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 }) => (
<Container>
<Row className="justify-content-md-center justify-content-center mx-auto">
<Col sm="12" md="8" lg="6">
<Card className="mt-4 mb-4 mx-auto">
<CardBody>
<Filter filterTerm={filterTerm} updateFilter={updateFilter} />
<ListGroup>
{items.map(items =>
<Item
key={items.id}
{...items}
/>
)}
</ListGroup>
</CardBody>
</Card>
</Col>
</Row>
</Container>
)
InventoryList.propTypes = {
items: PropTypes.arrayOf(PropTypes.shape({
id: PropTypes.number.isRequired,
name: PropTypes.string.isRequired,
amount: PropTypes.number.isRequired
}).isRequired).isRequired,
filterTerm: PropTypes.string,
updateFilter: PropTypes.func
}
export default InventoryList
\ No newline at end of file
......@@ -8,9 +8,19 @@ import 'font-awesome/css/font-awesome.min.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'mdbreact/dist/css/mdb.css';
import { App } from './components/presentational/App/App';
import { add } from './actions';
const store = createStore(rootReducer)
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'));
render(
<Provider store={store}>
<App />
......
import { UPDATE_FILTER } from '../actions'
const filterTerm = (state = "", action) => {
switch (action.type) {
case UPDATE_FILTER:
return action.filterTerm
default:
return state
}
}
export default filterTerm
import { combineReducers } from 'redux'
import items from './items'
import filterTerm from './filterTerm'
export default combineReducers({
items
items,
filterTerm
})
import { ADD } from '../actions';
const items = (state = [], action) => {
switch (action.type) {
case 'ADD_TODO':
return [
...state,
{
id: action.id,
name: action.name,
amount: 0
}
]
case ADD:
return [
...state,
{
id: action.id,
name: action.name,
amount: 0
}
]
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