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 getArticles 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: getArticles(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/fixtures.js

@@ -1,7 +1,7 @@
 export default [
   {
     id: '56c782f18990ecf954f6e027',
-    date: '2016-06-09T15:03:23.000Z',
+    date: '2018-10-22T15:03:23.000Z',
     title: 'Commodo qui incididunt',
     text:
       'Commodo qui incididunt ex ut ea nulla et eu aliquip duis. Aute deserunt excepteur ullamco fugiat sunt aliquip exercitation do sint incididunt. Amet consectetur sint irure reprehenderit fugiat amet mollit. In commodo mollit ullamco cillum pariatur eiusmod cillum aute mollit. Culpa non sint eiusmod ad dolor velit dolore voluptate do adipisicing. Cupidatat sint est magna officia qui magna eu elit qui excepteur fugiat duis ex labore.\n\nAliquip veniam ad reprehenderit mollit exercitation id enim ut exercitation. Esse irure ipsum minim laborum reprehenderit irure ut. Tempor excepteur nisi nulla nostrud amet id cillum. Sint velit sint officia aliqua sint quis deserunt.\n\nAliquip dolor cillum deserunt enim nulla dolor amet irure cupidatat commodo laboris id aliqua. Labore aliqua adipisicing Lorem id adipisicing. Ad cupidatat et do anim ex commodo elit magna ad consequat. Nostrud sit eu laborum ut consequat fugiat aute culpa. Lorem tempor quis sunt ad consequat excepteur est. Enim voluptate cillum Lorem ex fugiat ea qui. Irure aute magna dolore eiusmod minim non ad anim dolore sint et.',

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,32 @@
+export default (state) => {
+  const { articles, filters } = state
+  let result
+
+  const filterDate = date => {
+    const { from } = filters.date
+    const { to } = filters.date
+    let _date
+
+    _date = new Date(date)
+
+    return (
+      (from ? _date >= filters.date.from : true) &&
+      (to ? _date <= filters.date.to : true)
+    )
+  }
+
+  if (!filters.entities.length && (!filters.date.from && !filters.date.to))
+    return articles
+
+  if (!filters.entities.length) {
+    result = articles.filter(({ date }) => filterDate(date))
+  } else {
+    const entities = filters.entities
+
+    result = articles
+      .filter(({ id }) => entities.some(({ value }) => id === value))
+      .filter(({ date }) => filterDate(date))
+  }
+
+  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