Ht3

src/ac/index.js

@@ -1,4 +1,9 @@
-import { INCREMENT, DELETE_ARTICLE } from '../constants'
+import {
+  INCREMENT,
+  DELETE_ARTICLE,
+  SET_FILTER_SELECT,
+  SET_FILTER_DATE_RANGE
+} from '../constants'
 
 export function increment() {
   return {
@@ -12,3 +17,17 @@ export function deleteArticle(id) {
     payload: { id }
   }
 }
+
+export function setSelect(selected) {
+  return {
+    type: SET_FILTER_SELECT,
+    payload: { selected }
+  }
+}
+
+export function setDateRange(dateRange) {
+  return {
+    type: SET_FILTER_DATE_RANGE,
+    payload: { dateRange }
+  }
+}

src/components/app.js

@@ -10,7 +10,7 @@ class App extends Component {
       <div>
         <UserForm />
         <Counter />
-        <Filters articles={[]} />
+        <Filters />
         <ArticleList />
       </div>
     )

src/components/article-list.js

@@ -39,6 +39,28 @@ export class ArticleList extends Component {
 
 const ArticleListWithAccordion = accordionDecorator(ArticleList)
 
+const filterArticle = (state) => {
+  return state.articles.filter((article) => {
+    const { selected, dateRange } = state.filter
+
+    if (
+      selected &&
+      selected.length &&
+      selected.map((item) => item.value).indexOf(article.id) === -1
+    ) {
+      return false
+    }
+
+    const articleDate = new Date(article.date)
+
+    if (dateRange.from && articleDate <= dateRange.from) {
+      return false
+    }
+
+    return !(dateRange.to && articleDate >= dateRange.to)
+  })
+}
+
 export default connect((state) => ({
-  articles: state.articles
+  articles: filterArticle(state)
 }))(ArticleListWithAccordion)

src/components/filters/date-range.js

@@ -1,19 +1,26 @@
 import React, { Component } from 'react'
 import DayPicker, { DateUtils } from 'react-day-picker'
+import { connect } from 'react-redux'
+import PropTypes from 'prop-types'
+
+import { setDateRange } from '../../ac'
 
 import 'react-day-picker/lib/style.css'
 
 class DateRange extends Component {
-  state = {
-    from: null,
-    to: null
+  static propTypes = {
+    dateRange: PropTypes.shape({
+      from: PropTypes.instanceOf(Date),
+      to: PropTypes.instanceOf(Date)
+    })
   }
 
-  handleDayClick = (day) =>
-    this.setState(DateUtils.addDayToRange(day, this.state))
+  handleDayClick = (day) => {
+    this.props.setDateRange(DateUtils.addDayToRange(day, this.props.dateRange))
+  }
 
   render() {
-    const { from, to } = this.state
+    const { from, to } = this.props.dateRange
     const selectedRange =
       from && to && `${from.toDateString()} - ${to.toDateString()}`
     return (
@@ -28,4 +35,9 @@ class DateRange extends Component {
   }
 }
 
-export default DateRange
+export default connect(
+  (state) => ({
+    dateRange: state.filter.dateRange
+  }),
+  { setDateRange }
+)(DateRange)

src/components/filters/index.js

@@ -8,7 +8,7 @@ class Filters extends Component {
   render() {
     return (
       <div>
-        <SelectFilter articles={this.props.articles} />
+        <SelectFilter />
         <DateRange />
       </div>
     )

src/components/filters/select.js

@@ -1,12 +1,22 @@
 import React, { Component } from 'react'
 import Select from 'react-select'
+import { connect } from 'react-redux'
+import PropTypes from 'prop-types'
+import { setSelect } from '../../ac'
 
 class SelectFilter extends Component {
-  state = {
-    selected: null
+  static propTypes = {
+    selected: PropTypes.arrayOf(
+      PropTypes.shape({
+        label: PropTypes.string.required,
+        value: PropTypes.string.required
+      })
+    )
   }
 
-  handleChange = (selected) => this.setState({ selected })
+  handleChange = (selected) => {
+    this.props.setSelect(selected)
+  }
 
   get options() {
     return this.props.articles.map((article) => ({
@@ -19,12 +29,18 @@ class SelectFilter extends Component {
     return (
       <Select
         options={this.options}
-        value={this.state.selected}
+        value={this.props.selected}
         onChange={this.handleChange}
         isMulti
       />
     )
   }
 }
 
-export default SelectFilter
+export default connect(
+  (state) => ({
+    articles: state.articles,
+    selected: state.filter.selected
+  }),
+  { setSelect }
+)(SelectFilter)

src/constants/index.js

@@ -1,3 +1,7 @@
 export const INCREMENT = 'INCREMENT'
 
 export const DELETE_ARTICLE = 'DELETE_ARTICLE'
+
+export const SET_FILTER_SELECT = 'SET_FILTER_SELECT'
+
+export const SET_FILTER_DATE_RANGE = 'SET_FILTER_DATE_RANGE'

src/reducer/filter.js

@@ -0,0 +1,24 @@
+import { SET_FILTER_SELECT, SET_FILTER_DATE_RANGE } from '../constants'
+
+const initialFilter = {
+  selected: null,
+  dateRange: {
+    from: null,
+    to: null
+  }
+}
+
+export default (filterState = initialFilter, action) => {
+  const { type, payload } = action
+
+  switch (type) {
+    case SET_FILTER_SELECT:
+      return { ...filterState, selected: payload.selected }
+
+    case SET_FILTER_DATE_RANGE:
+      return { ...filterState, dateRange: payload.dateRange }
+
+    default:
+      return filterState
+  }
+}

src/reducer/index.js

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