Commit 6cf4330c authored by Martin Fahl's avatar Martin Fahl

uses selectors

parent 3f559055
......@@ -13,7 +13,8 @@
"react-scripts": "1.1.4",
"react-test-renderer": "^16.4.1",
"redux": "^4.0.0",
"redux-thunk": "^2.3.0"
"redux-thunk": "^2.3.0",
"reselect": "^3.0.1"
},
"scripts": {
"start": "react-scripts start",
......
......@@ -6,7 +6,7 @@ exports[`Navbar should render as expected 1`] = `
>
<a
className="navbar-brand"
href="#"
href="/"
>
<img
alt="codecentric"
......@@ -16,7 +16,7 @@ exports[`Navbar should render as expected 1`] = `
</a>
<a
className="navbar-brand"
href="#"
href="/"
>
Test
</a>
......
......@@ -2,6 +2,7 @@ import React, { Component } from 'react'
import { connect } from 'react-redux'
import InventoryList from '../../components/InventoryList/InventoryList'
import { updateFilter, deleteItem, getAllItems } from '../../actions'
import { createSelector } from 'reselect'
class InventoryListContainer extends Component {
componentDidMount() {
......@@ -15,17 +16,22 @@ class InventoryListContainer extends Component {
}
}
const getVisibleItems = (items, filterTerm) => {
console.log(filterTerm);
const getItems = state => state.items;
const getFilterTerm = state => state.filterTerm;
const getItemsFilteredByTerm = createSelector(
[getFilterTerm, getItems],
(filterTerm, items) => {
if (filterTerm === undefined) {
return items;
} else {
return items.filter(item => item.name.toLowerCase().includes(filterTerm.toLowerCase()));
}
}
}
)
const mapStateToProps = state => ({
items: getVisibleItems(state.items, state.filterTerm)
items: getItemsFilteredByTerm(state)
})
const mapDispatchToProps = dispatch => ({
......
import { connect } from 'react-redux'
import Item from '../../components/Item/Item'
import { increment, decrement, deleteItem } from '../../actions'
import { createSelector } from 'reselect'
const mapStateToProps = (state, ownProps) => ({
quantity: state.items.find(item => item.id === ownProps.id).quantity
const getItem = (state, props) => state.items.find(item => item.id === props.id)
const getItemQuantity = createSelector(
[getItem],
(item) => item.quantity
)
const mapStateToProps = (state, props) => ({
quantity: getItemQuantity(state, props)
})
const mapDispatchToProps = dispatch => ({
......
......@@ -6847,6 +6847,10 @@ requires-port@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
reselect@^3.0.1:
version "3.0.1"
resolved "https://registry.yarnpkg.com/reselect/-/reselect-3.0.1.tgz#efdaa98ea7451324d092b2b2163a6a1d7a9a2147"
resolve-cwd@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"
......
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