HT4

src/AC/index.js

@@ -1,4 +1,4 @@
-import {INCREMENT, DELETE_ARTICLE} from '../constants'
+import {INCREMENT, DELETE_ARTICLE, FILTER_DATERANGE, FILTER_SELECTED} from '../constants'
 
 export function increment() {
     return {
@@ -11,4 +11,18 @@ export function deleteArticle(id) {
         type: DELETE_ARTICLE,
         payload: { id }
     }
+}
+
+export function filterDateRange({from, to}) {
+    return {
+        type: FILTER_DATERANGE,
+        payload: { from, to }
+    }
+}
+
+export function filterSelected(selected) {
+    return {
+        type: FILTER_SELECTED,
+        payload: { selected }
+    }
 }

src/components/App.js

@@ -4,6 +4,7 @@ import UserForm from './UserForm'
 import Filters from './Filters'
 import Counter from './Counter'
 
+
 class App extends Component {
     render() {
         return (

src/components/Article/index.js

@@ -63,7 +63,7 @@ class Article extends PureComponent {
     }
 
     handleDelete = () => {
-        const {deleteArticle,article} = this.props
+        const {deleteArticle, article} = this.props
         deleteArticle(article.id)
     }
 

src/components/ArticleList.js

@@ -6,7 +6,7 @@ import Accordion from './common/Accordion'
 
 class ArticleList extends Accordion {
     render() {
-        const {articles} = this.props
+        const articles = filterArticles(this.props)
         if (!articles.length) return <h3>No Articles</h3>
         const articleElements = articles.map((article) => <li key={article.id}>
             <Article article={article}
@@ -22,6 +22,18 @@ class ArticleList extends Accordion {
     }
 }
 
+function filterArticles({articles, filters}) {
+
+    const {from, to, selected} = filters;
+
+    return articles.filter( ({date, id}) => {
+        const byDate = !from && !to || new Date(date) >= from && new Date(date) <= to;
+        const bySelect = !selected.length || selected.map( ({ value }) => value ).includes(id)
+
+        return byDate && bySelect
+    } )
+}
+
 
 ArticleList.defaultProps = {
     articles: []
@@ -32,5 +44,6 @@ ArticleList.propTypes = {
 }
 
 export default connect(state => ({
-    articles: state.articles
+    articles: state.articles,
+    filters: state.filters
 }))(ArticleList)

src/components/Filters/DateRange.js

@@ -1,18 +1,30 @@
 import React, { Component } from 'react'
 import DayPicker, { DateUtils } from 'react-day-picker'
+import {connect} from 'react-redux'
+import {filterDateRange} from '../../AC'
+import Article from '../Article'
 
 import 'react-day-picker/lib/style.css'
 
 class DateRange extends Component {
+/*
     state = {
         from: null,
         to: null
     }
+*/
 
-    handleDayClick = (day) => this.setState(DateUtils.addDayToRange(day, this.state))
+    handleDayClick = (day) => {
+
+        const {filterDateRange} = this.props
+        filterDateRange(DateUtils.addDayToRange(day, this.props))
+
+    }
 
     render() {
-        const { from, to } = this.state
+        console.log('DateRange --- \n', this.props)
+//        const { from, to } = this.state
+        const { from, to } = this.props
         const selectedRange = from && to && `${from.toDateString()} - ${to.toDateString()}`
         return (
             <div className="date-range">
@@ -27,4 +39,5 @@ class DateRange extends Component {
 
 }
 
-export default DateRange
+
+export default connect(null, { filterDateRange })(DateRange)

src/components/Filters/Select.js

@@ -1,6 +1,8 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import Select from 'react-select'
+import {connect} from 'react-redux'
+import {filterSelected} from '../../AC'
 
 import 'react-select/dist/react-select.css'
 
@@ -9,13 +11,21 @@ class SelectFilter extends Component {
         articles: PropTypes.array.isRequired
     };
 
-    state = {
+/*    state = {
         selected: null
-    }
+    }*/
+
+    //handleChange = selected => (console.log(selected), this.setState({ selected }))
+
+    handleChange = (selected) => {
 
-    handleChange = selected => this.setState({ selected })
+        const {filterSelected} = this.props
+        filterSelected(selected)
+
+    }
 
     render() {
+        console.log('Select --- \n', this.props)
         const { articles } = this.props
         const options = articles.map(article => ({
             label: article.title,
@@ -24,11 +34,14 @@ class SelectFilter extends Component {
 
         return <Select
             options={options}
-            value={this.state.selected}
+            value={this.props.selected}
             onChange={this.handleChange}
             multi
         />
     }
 }
 
-export default SelectFilter
+export default connect(storeState => ({
+//    articles: storeState.articles,
+    selected: storeState.filters.selected
+}), { filterSelected })(SelectFilter)

src/components/Filters/index.js

@@ -1,19 +1,28 @@
 import React, { Component } from 'react'
 import DateRange from './DateRange'
 import SelectFilter from './Select'
+import {connect} from 'react-redux'
 
 class Filters extends Component {
     static propTypes = {
     };
 
     render() {
+        const { from, to } = this.props.filters
+
         return (
             <div>
                 <SelectFilter articles = {this.props.articles}/>
-                <DateRange />
+                <DateRange from = {from}
+                           to = {to}/>
+
             </div>
         )
     }
 }
 
-export default Filters
+
+export default connect( storeState => ({...storeState}) )(Filters)
+
+/*
+export default Filters*/

src/constants/index.js

@@ -1,3 +1,4 @@
 export const INCREMENT = 'INCREMENT'
-
-export const DELETE_ARTICLE = 'DELETE_ARTICLE'
+export const DELETE_ARTICLE = 'DELETE_ARTICLE'
+export const FILTER_DATERANGE = 'FILTER_DATERANGE'
+export const FILTER_SELECTED = 'FILTER_SELECTED'

src/reducer/articles.js

@@ -6,7 +6,8 @@ export default (articlesState = defaultArticles, action) => {
 
     switch (type) {
         case DELETE_ARTICLE:
-            return articlesState.filter(article => article.id !== payload.id)
+            return articlesState.filter(article => article.id !== payload.id);
+
     }
 
     return articlesState

src/reducer/filters.js

@@ -0,0 +1,23 @@
+import {FILTER_DATERANGE, FILTER_SELECTED} from '../constants'
+
+export default (state = {from: null, to: null, selected: []}, action) => {
+    console.log(JSON.stringify(action.payload))
+
+    const {type, payload} = action
+
+    switch (type) {
+        case FILTER_DATERANGE:
+            return {
+                ...payload,
+                selected: state.selected
+            };
+
+        case FILTER_SELECTED:
+            return {
+                ...state,
+                selected: payload.selected
+            }
+    }
+
+    return state
+}

src/reducer/index.js

@@ -1,8 +1,11 @@
 import {combineReducers} from 'redux'
-import counterReducer from './counter'
+import counter from './counter'
 import articles from './articles'
+import filters from './filters'
 
 export default combineReducers({
-    counter: counterReducer,
-    articles
+    counter,
+    articles,
+    filters
+
 })

src/store/index.js

@@ -1,7 +1,7 @@
 import {createStore} from 'redux'
 import rootReducer from '../reducer'
 
-const store = createStore(rootReducer)
+const store = createStore(rootReducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())
 
 //dev only, no need in prod
 window.store = store