done HT3

src/ac/index.js

@@ -1,4 +1,9 @@
-import { INCREMENT, DELETE_ARTICLE } from '../constants'
+import {
+  INCREMENT,
+  DELETE_ARTICLE,
+  FILTER_ARTICLE,
+  FILTER_DATE
+} from '../constants'
 
 export function increment() {
   return {
@@ -12,3 +17,17 @@ export function deleteArticle(id) {
     payload: { id }
   }
 }
+
+export function filterArticle(payload) {
+  return {
+    type: FILTER_ARTICLE,
+    payload
+  }
+}
+
+export function filterDate(date) {
+  return {
+    type: FILTER_DATE,
+    payload: { date }
+  }
+}

src/components/article-list.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import Article from './article'
 import accordionDecorator from '../decorators/accordion'
+import filterArticles from '../selectors'
 
 export class ArticleList extends Component {
   static propTypes = {
@@ -20,6 +21,7 @@ export class ArticleList extends Component {
 
   get items() {
     const { articles, openItemId, toggleOpenItem } = this.props
+
     return articles.map((article) => (
       <li key={article.id} className="test--article-list__item">
         <Article
@@ -33,12 +35,11 @@ export class ArticleList extends Component {
 
   componentDidMount() {
     const { fetchData } = this.props
+
     fetchData && fetchData()
   }
 }
 
-const ArticleListWithAccordion = accordionDecorator(ArticleList)
-
 export default connect((state) => ({
-  articles: state.articles
-}))(ArticleListWithAccordion)
+  articles: filterArticles(state)
+}))(accordionDecorator(ArticleList))

src/components/filters/date-range.js

@@ -1,21 +1,21 @@
 import React, { Component } from 'react'
 import DayPicker, { DateUtils } from 'react-day-picker'
+import { filterDate } from '../../ac'
+import { getDate } from '../../selectors'
+import { connect } from 'react-redux'
 
 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))
+    this.props.filterDate(DateUtils.addDayToRange(day, this.props.date))
 
   render() {
-    const { from, to } = this.state
+    const { from, to } = this.props.date
+
     const selectedRange =
       from && to && `${from.toDateString()} - ${to.toDateString()}`
+
     return (
       <div className="date-range">
         <DayPicker
@@ -28,4 +28,7 @@ class DateRange extends Component {
   }
 }
 
-export default DateRange
+export default connect(
+  (state) => ({ date: getDate(state) }),
+  { filterDate }
+)(DateRange)

src/components/filters/index.js

@@ -1,18 +1,23 @@
 import React, { Component } from 'react'
 import DateRange from './date-range'
 import SelectFilter from './select'
+import { connect } from 'react-redux'
 
 class Filters extends Component {
-  static propTypes = {}
-
   render() {
     return (
       <div>
-        <SelectFilter articles={this.props.articles} />
+        <SelectFilter
+          articles={this.props.articles}
+          selected={this.props.filters.entities}
+        />
         <DateRange />
       </div>
     )
   }
 }
 
-export default Filters
+export default connect((state) => ({
+  articles: state.articles,
+  filters: state.filters
+}))(Filters)

src/components/filters/select.js

@@ -1,15 +1,24 @@
 import React, { Component } from 'react'
 import Select from 'react-select'
+import { connect } from 'react-redux'
+import { filterArticle } from '../../ac'
 
 class SelectFilter extends Component {
-  state = {
-    selected: null
-  }
+  handleChange = (selected) => {
+    const { filterArticle } = this.props
+    const filtersArr = []
+
+    selected.map((item) => {
+      return filtersArr.push(item)
+    })
 
-  handleChange = (selected) => this.setState({ selected })
+    return filterArticle(filtersArr)
+  }
 
   get options() {
-    return this.props.articles.map((article) => ({
+    const { articles } = this.props
+
+    return articles.map((article) => ({
       label: article.title,
       value: article.id
     }))
@@ -19,12 +28,15 @@ 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(
+  null,
+  { filterArticle }
+)(SelectFilter)

src/constants/index.js

@@ -1,3 +1,5 @@
 export const INCREMENT = 'INCREMENT'
 
 export const DELETE_ARTICLE = 'DELETE_ARTICLE'
+export const FILTER_ARTICLE = 'FILTER_ARTICLE'
+export const FILTER_DATE = 'FILTER_DATE'

src/reducer/filters.js

@@ -0,0 +1,39 @@
+import { FILTER_ARTICLE, DELETE_ARTICLE, FILTER_DATE } from '../constants'
+const initialState = {
+  entities: [],
+  date: {
+    from: null,
+    to: null
+  }
+}
+
+export default (filtersState = initialState, action) => {
+  const { type, payload } = action
+
+  switch (type) {
+    case FILTER_ARTICLE:
+      return {
+        ...filtersState,
+        entities: payload ? payload : initialState
+      }
+    case DELETE_ARTICLE:
+      return {
+        ...filtersState,
+        entities: filtersState.entities.filter(
+          (item) => item.value !== payload.id
+        )
+      }
+    case FILTER_DATE:
+      const date = payload.date
+
+      return {
+        ...filtersState,
+        date: {
+          from: date.from,
+          to: date.to
+        }
+      }
+    default:
+      return filtersState
+  }
+}

src/reducer/index.js

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

src/selectors/date.js

@@ -0,0 +1 @@
+export const getDate = (state) => state.filters.date

src/selectors/filters.js

@@ -0,0 +1,31 @@
+export default (state) => {
+  const { articles, filters } = state
+  let result
+
+  if (!filters.entities.length && (!filters.date.from && !filters.date.to))
+    return articles
+
+  if (!filters.entities.length) {
+    result = articles.filter((article) => {
+      let date = new Date(article.date)
+
+      return (
+        (filters.date.from ? date >= filters.date.from : true) &&
+        (filters.date.to ? date <= filters.date.to : true)
+      )
+    })
+  } else {
+    result = articles
+      .filter(({ id }) => filters.entities.some(({ value }) => id === value))
+      .filter((article) => {
+        let date = new Date(article.date)
+
+        return (
+          (filters.date.from ? date >= filters.date.from : true) &&
+          (filters.date.to ? date <= filters.date.to : true)
+        )
+      })
+  }
+
+  return result
+}

src/selectors/index.js

@@ -0,0 +1,3 @@
+export { default } from './filters'
+
+export { getDate } from './date'

src/store/index.js

@@ -1,9 +1,11 @@
-import { createStore } from 'redux'
+import { createStore, compose } from 'redux'
 import reducer from '../reducer'
 
-const store = createStore(reducer)
-
-//dev only, no need in prod!
-window.store = store
+const store = createStore(
+  reducer,
+  compose(
+    window.devToolsExtension ? window.__REDUX_DEVTOOLS_EXTENSION__() : (f) => f
+  )
+)
 
 export default store