From 1919b7ac3e27481401db3306d7ee26b2ff4e3bc7 Mon Sep 17 00:00:00 2001
From: Vadim <vbulka1986@gmail.com>
Date: Sun, 21 Oct 2018 05:57:25 +0300
Subject: [PATCH 1/4] done HT3

---
 src/ac/index.js                      | 21 ++++++++++++++-
 src/components/article-list.js       |  9 ++++---
 src/components/filters/date-range.js | 19 ++++++++------
 src/components/filters/index.js      | 13 +++++++---
 src/components/filters/select.js     | 26 ++++++++++++++-----
 src/constants/index.js               |  2 ++
 src/reducer/filters.js               | 39 ++++++++++++++++++++++++++++
 src/reducer/index.js                 |  8 +++---
 src/selectors/date.js                |  1 +
 src/selectors/filters.js             | 31 ++++++++++++++++++++++
 src/selectors/index.js               |  3 +++
 src/store/index.js                   | 12 +++++----
 12 files changed, 152 insertions(+), 32 deletions(-)
 create mode 100644 src/reducer/filters.js
 create mode 100644 src/selectors/date.js
 create mode 100644 src/selectors/filters.js
 create mode 100644 src/selectors/index.js

diff --git a/src/ac/index.js b/src/ac/index.js
index 9ea3761..0558916 100644
--- a/src/ac/index.js
+++ b/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 }
+  }
+}
diff --git a/src/components/article-list.js b/src/components/article-list.js
index 8ee9d8e..c84c958 100644
--- a/src/components/article-list.js
+++ b/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))
diff --git a/src/components/filters/date-range.js b/src/components/filters/date-range.js
index 3a81b1e..5148305 100644
--- a/src/components/filters/date-range.js
+++ b/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)
diff --git a/src/components/filters/index.js b/src/components/filters/index.js
index c61bc78..793f7a7 100644
--- a/src/components/filters/index.js
+++ b/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)
diff --git a/src/components/filters/select.js b/src/components/filters/select.js
index c9a8512..80595d1 100644
--- a/src/components/filters/select.js
+++ b/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,7 +28,7 @@ class SelectFilter extends Component {
     return (
       <Select
         options={this.options}
-        value={this.state.selected}
+        value={this.props.selected}
         onChange={this.handleChange}
         isMulti
       />
@@ -27,4 +36,7 @@ class SelectFilter extends Component {
   }
 }
 
-export default SelectFilter
+export default connect(
+  null,
+  { filterArticle }
+)(SelectFilter)
diff --git a/src/constants/index.js b/src/constants/index.js
index 025180d..497caa0 100644
--- a/src/constants/index.js
+++ b/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'
diff --git a/src/reducer/filters.js b/src/reducer/filters.js
new file mode 100644
index 0000000..8deab01
--- /dev/null
+++ b/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
+  }
+}
diff --git a/src/reducer/index.js b/src/reducer/index.js
index 8a49c5d..e23408a 100644
--- a/src/reducer/index.js
+++ b/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
 })
diff --git a/src/selectors/date.js b/src/selectors/date.js
new file mode 100644
index 0000000..7957b14
--- /dev/null
+++ b/src/selectors/date.js
@@ -0,0 +1 @@
+export const getDate = (state) => state.filters.date
diff --git a/src/selectors/filters.js b/src/selectors/filters.js
new file mode 100644
index 0000000..1511539
--- /dev/null
+++ b/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
+}
diff --git a/src/selectors/index.js b/src/selectors/index.js
new file mode 100644
index 0000000..3447ec0
--- /dev/null
+++ b/src/selectors/index.js
@@ -0,0 +1,3 @@
+export { default } from './filters'
+
+export { getDate } from './date'
diff --git a/src/store/index.js b/src/store/index.js
index 29e30fe..f1577cf 100644
--- a/src/store/index.js
+++ b/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

From bdd1a389a529da1093e4bf794df10d76997d4ab5 Mon Sep 17 00:00:00 2001
From: Vadim <vbulka1986@gmail.com>
Date: Mon, 22 Oct 2018 12:41:38 +0300
Subject: [PATCH 2/4] .

---
 src/fixtures.js          |  2 +-
 src/selectors/filters.js | 35 ++++++++++++++++++-----------------
 2 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/src/fixtures.js b/src/fixtures.js
index 6b5f693..190790c 100644
--- a/src/fixtures.js
+++ b/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.',
diff --git a/src/selectors/filters.js b/src/selectors/filters.js
index 1511539..d16ced2 100644
--- a/src/selectors/filters.js
+++ b/src/selectors/filters.js
@@ -2,29 +2,30 @@ 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((article) => {
-      let date = new Date(article.date)
-
-      return (
-        (filters.date.from ? date >= filters.date.from : true) &&
-        (filters.date.to ? date <= filters.date.to : true)
-      )
-    })
+    result = articles.filter(({ date }) => filterDate(date))
   } else {
-    result = articles
-      .filter(({ id }) => filters.entities.some(({ value }) => id === value))
-      .filter((article) => {
-        let date = new Date(article.date)
+    const entities = filters.entities
 
-        return (
-          (filters.date.from ? date >= filters.date.from : true) &&
-          (filters.date.to ? date <= filters.date.to : true)
-        )
-      })
+    result = articles
+      .filter(({ id }) => entities.some(({ value }) => id === value))
+      .filter(({ date }) => filterDate(date))
   }
 
   return result

From 259228758d0aa168588e8c751cb6e1c209306e0b Mon Sep 17 00:00:00 2001
From: Vadim Veksler <35307996+reyzele@users.noreply.github.com>
Date: Mon, 22 Oct 2018 12:45:25 +0300
Subject: [PATCH 3/4] update

---
 src/selectors/filters.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/selectors/filters.js b/src/selectors/filters.js
index d16ced2..9819a6f 100644
--- a/src/selectors/filters.js
+++ b/src/selectors/filters.js
@@ -2,7 +2,7 @@ export default (state) => {
   const { articles, filters } = state
   let result
 
-  const filterDate = (date) => {
+  const filterDate = date => {
     const { from } = filters.date
     const { to } = filters.date
     let _date

From 8851903c5a39caa7573ed263159fc4a323b822e5 Mon Sep 17 00:00:00 2001
From: Vadim Veksler <35307996+reyzele@users.noreply.github.com>
Date: Mon, 22 Oct 2018 12:52:40 +0300
Subject: [PATCH 4/4] update

---
 src/components/article-list.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/article-list.js b/src/components/article-list.js
index c84c958..4ab0803 100644
--- a/src/components/article-list.js
+++ b/src/components/article-list.js
@@ -3,7 +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'
+import getArticles from '../selectors'
 
 export class ArticleList extends Component {
   static propTypes = {
@@ -41,5 +41,5 @@ export class ArticleList extends Component {
 }
 
 export default connect((state) => ({
-  articles: filterArticles(state)
+  articles: getArticles(state)
 }))(accordionDecorator(ArticleList))