From b14d600760b0444d878473ec9167bc89e933cfed Mon Sep 17 00:00:00 2001
From: Roman Iakobchuk <kaboom.ua@gmail.com>
Date: Mon, 22 Oct 2018 20:05:44 +0300
Subject: [PATCH] add simple selector

---
 package-lock.json              |  5 +++++
 package.json                   |  3 ++-
 src/components/article-list.js | 18 ++++--------------
 src/selectors/index.js         | 24 ++++++++++++++++++++++++
 4 files changed, 35 insertions(+), 15 deletions(-)
 create mode 100644 src/selectors/index.js

diff --git a/package-lock.json b/package-lock.json
index 96065f3..dbeaddd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13296,6 +13296,11 @@
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
       "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8="
     },
+    "reselect": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.0.0.tgz",
+      "integrity": "sha512-qUgANli03jjAyGlnbYVAV5vvnOmJnODyABz51RdBN7M4WaVu8mecZWgyQNkG8Yqe3KRGRt0l4K4B3XVEULC4CA=="
+    },
     "resolve": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.8.1.tgz",
diff --git a/package.json b/package.json
index 97b9f21..7672a70 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,8 @@
     "react-redux": "^5.0.7",
     "react-scripts": "2.0.4",
     "react-select": "^2.1.0",
-    "redux": "^4.0.1"
+    "redux": "^4.0.1",
+    "reselect": "^4.0.0"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/src/components/article-list.js b/src/components/article-list.js
index 6cb06f8..9650e42 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 { filtratedArticlesSelector } from '../selectors'
 
 export class ArticleList extends Component {
   static propTypes = {
@@ -15,6 +16,7 @@ export class ArticleList extends Component {
   }
 
   render() {
+    console.log('---', 'rendering article list')
     return <ul>{this.items}</ul>
   }
 
@@ -38,20 +40,8 @@ export class ArticleList extends Component {
 }
 
 export default connect((state) => {
-  const {
-    selected,
-    dateRange: { from, to }
-  } = state.filters
-
-  const filtratedArticles = state.articles.filter((article) => {
-    const published = Date.parse(article.date)
-    return (
-      (!selected.length ||
-        selected.find((selected) => selected.value === article.id)) &&
-      (!from || !to || (published > from && published < to))
-    )
-  })
+  console.log('---', 'article list connect')
   return {
-    articles: filtratedArticles
+    articles: filtratedArticlesSelector(state)
   }
 })(accordionDecorator(ArticleList))
diff --git a/src/selectors/index.js b/src/selectors/index.js
new file mode 100644
index 0000000..ab376e2
--- /dev/null
+++ b/src/selectors/index.js
@@ -0,0 +1,24 @@
+import { createSelector } from 'reselect'
+
+export const selectionSelector = (state) => state.filters.selected
+export const dateRangeSelector = (state) => state.filters.dateRange
+export const articleListSelector = (state) => state.articles
+
+export const filtratedArticlesSelector = createSelector(
+  selectionSelector,
+  dateRangeSelector,
+  articleListSelector,
+  (selected, dateRange, articles) => {
+    console.log('---', 'article list selector')
+    const { from, to } = dateRange
+
+    return articles.filter((article) => {
+      const published = Date.parse(article.date)
+      return (
+        (!selected.length ||
+          selected.find((selected) => selected.value === article.id)) &&
+        (!from || !to || (published > from && published < to))
+      )
+    })
+  }
+)