Homework - 3

src/ac/index.js

@@ -1,4 +1,4 @@
-import { INCREMENT, DELETE_ARTICLE } from '../constants'
+import { INCREMENT, DELETE_ARTICLE, SET_FILTER } from '../constants'
 
 export function increment() {
   return {
@@ -12,3 +12,10 @@ export function deleteArticle(id) {
     payload: { id }
   }
 }
+
+export function setFilter(filter) {
+  return {
+    type: SET_FILTER,
+    payload: filter
+  }
+}

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

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import Article from './article'
 import accordionDecorator from '../decorators/accordion'
+import filterDecorator from '../decorators/filter'
 
 export class ArticleList extends Component {
   static propTypes = {
@@ -38,7 +39,11 @@ export class ArticleList extends Component {
 }
 
 const ArticleListWithAccordion = accordionDecorator(ArticleList)
+const ArticleListWithAccordionAndFilter = accordionDecorator(
+  filterDecorator(ArticleList, 'articles')
+)
 
 export default connect((state) => ({
-  articles: state.articles
-}))(ArticleListWithAccordion)
+  articles: state.articles,
+  filter: state.filter
+}))(ArticleListWithAccordionAndFilter)

src/components/article/index.js

@@ -30,6 +30,9 @@ class Article extends PureComponent {
       <div>
         <h3>
           {article.title}
+          <div>
+            <i>Date: {article.date}</i>
+          </div>
           <button onClick={this.handleClick} className="test--article__btn">
             {isOpen ? 'close' : 'open'}
           </button>

src/components/filters/date-range.js

@@ -4,16 +4,13 @@ import DayPicker, { DateUtils } from 'react-day-picker'
 import 'react-day-picker/lib/style.css'
 
 class DateRange extends Component {
-  state = {
-    from: null,
-    to: null
+  handleDayClick = (day) => {
+    const { setFilter, dateRange } = this.props
+    setFilter({ dateRange: DateUtils.addDayToRange(day, dateRange) })
   }
 
-  handleDayClick = (day) =>
-    this.setState(DateUtils.addDayToRange(day, this.state))
-
   render() {
-    const { from, to } = this.state
+    const { from, to } = this.props.dateRange
     const selectedRange =
       from && to && `${from.toDateString()} - ${to.toDateString()}`
     return (

src/components/filters/index.js

@@ -1,18 +1,33 @@
 import React, { Component } from 'react'
 import DateRange from './date-range'
 import SelectFilter from './select'
+import { connect } from 'react-redux'
+import { setFilter } from '../../ac'
 
 class Filters extends Component {
   static propTypes = {}
 
   render() {
+    const { articles, setFilter, dateRange, selected } = this.props
+
     return (
       <div>
-        <SelectFilter articles={this.props.articles} />
-        <DateRange />
+        <SelectFilter
+          setFilter={setFilter}
+          options={articles || []}
+          selected={selected}
+        />
+        <DateRange setFilter={setFilter} dateRange={dateRange} />
       </div>
     )
   }
 }
 
-export default Filters
+export default connect(
+  (state) => ({
+    selected: state.filter.selected,
+    dateRange: state.filter.dateRange,
+    articles: state.articles
+  }),
+  { setFilter }
+)(Filters)

src/components/filters/select.js

@@ -2,24 +2,25 @@ import React, { Component } from 'react'
 import Select from 'react-select'
 
 class SelectFilter extends Component {
-  state = {
-    selected: null
+  handleChange = (selected) => {
+    const { setFilter } = this.props
+    setFilter({ selected })
   }
 
-  handleChange = (selected) => this.setState({ selected })
-
   get options() {
-    return this.props.articles.map((article) => ({
+    const { options } = this.props
+    return options.map((article) => ({
       label: article.title,
       value: article.id
     }))
   }
 
   render() {
+    const { selected } = this.props
     return (
       <Select
         options={this.options}
-        value={this.state.selected}
+        value={selected}
         onChange={this.handleChange}
         isMulti
       />

src/constants/index.js

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

src/decorators/filter.js

@@ -0,0 +1,70 @@
+import React, { Component } from 'react'
+
+const filterDecorator = (OriginalComponent, listName) =>
+  class FilterDecorator extends Component {
+    getFilteredList() {
+      const list = this.props[listName]
+      let filteredList = [...list]
+
+      const { filter } = this.props
+      const rangeFilter = filter.dateRange
+      const selectFilter = filter.selected
+
+      if (selectFilter && selectFilter.length) {
+        filteredList = this.toApplySelectFilter(filteredList, selectFilter)
+      }
+
+      if (rangeFilter) {
+        filteredList = this.toApplyRangeFilter(filteredList, rangeFilter)
+      }
+
+      return filteredList
+    }
+
+    toApplySelectFilter(list, selected) {
+      return list.filter((item) =>
+        selected.find((selectedItem) => selectedItem.value === item.id)
+      )
+    }
+
+    toApplyRangeFilter(list, rangeFilter) {
+      const { from = null, to = null } = rangeFilter
+
+      //convert to ISOString if it's not in the format
+      const fromInISO =
+        from && typeof from !== 'string' ? from.toISOString() : from
+      const toInISO = to && typeof to !== 'string' ? to.toISOString() : to
+
+      if (fromInISO || toInISO) {
+        return list.filter((item) => {
+          if (!item.date) return false
+
+          //convert to ISOString if it's not in the format
+          const itemDateInISO =
+            typeof item.date !== 'string' ? item.date.toISOString() : item.date
+
+          if (fromInISO && toInISO) {
+            return fromInISO <= itemDateInISO && itemDateInISO <= toInISO
+          } else {
+            if (fromInISO) {
+              return fromInISO <= itemDateInISO
+            }
+            if (toInISO) {
+              return itemDateInISO <= toInISO
+            }
+          }
+        })
+      }
+
+      return list
+    }
+
+    render() {
+      let filteredList = this.getFilteredList()
+      return (
+        <OriginalComponent {...{ ...this.props, [listName]: filteredList }} />
+      )
+    }
+  }
+
+export default filterDecorator

src/fixtures.js

@@ -155,5 +155,26 @@ export default [
     title: 'Lorem Ipsum dolor',
     text:
       'Commodo laborum sit nostrud reprehenderit cupidatat officia laboris. Ipsum minim culpa in enim. Voluptate dolor ea irure nisi incididunt enim magna.\n\nCupidatat quis cillum velit culpa tempor esse irure nostrud ea consectetur officia fugiat irure qui. Enim quis officia do in. Velit veniam ipsum consequat aliqua duis voluptate. Minim nisi ex aute ad.\n\nNisi Lorem ex tempor adipisicing labore. Quis occaecat fugiat pariatur labore culpa cillum laboris. Labore occaecat ut laborum sit ex do sit. Deserunt consectetur elit aute laboris est deserunt officia ullamco sit laboris officia aliquip. Aliqua ut sunt nostrud voluptate excepteur quis incididunt Lorem ut.'
+  },
+  {
+    id: '56c782fghgfc2c3268ddgb3206',
+    date: '2018-10-08T19:03:23.000Z',
+    title: 'New article 1',
+    text:
+      'Commodo laborum sit nostrud reprehenderit cupidatat officia laboris. Ipsum minim culpa in enim. Voluptate dolor ea irure nisi incididunt enim magna.\n\nCupidatat quis cillum velit culpa tempor esse irure nostrud ea consectetur officia fugiat irure qui. Enim quis officia do in. Velit veniam ipsum consequat aliqua duis voluptate. Minim nisi ex aute ad.\n\nNisi Lorem ex tempor adipisicing labore. Quis occaecat fugiat pariatur labore culpa cillum laboris. Labore occaecat ut laborum sit ex do sit. Deserunt consectetur elit aute laboris est deserunt officia ullamco sit laboris officia aliquip. Aliqua ut sunt nostrud voluptate excepteur quis incididunt Lorem ut.'
+  },
+  {
+    id: '56c782fghgfc2c32e68ddb3206',
+    date: '2018-10-08T19:03:23.000Z',
+    title: 'New article 2',
+    text:
+      'Commodo laborum sit nostrud reprehenderit cupidatat officia laboris. Ipsum minim culpa in enim. Voluptate dolor ea irure nisi incididunt enim magna.\n\nCupidatat quis cillum velit culpa tempor esse irure nostrud ea consectetur officia fugiat irure qui. Enim quis officia do in. Velit veniam ipsum consequat aliqua duis voluptate. Minim nisi ex aute ad.\n\nNisi Lorem ex tempor adipisicing labore. Quis occaecat fugiat pariatur labore culpa cillum laboris. Labore occaecat ut laborum sit ex do sit. Deserunt consectetur elit aute laboris est deserunt officia ullamco sit laboris officia aliquip. Aliqua ut sunt nostrud voluptate excepteur quis incididunt Lorem ut.'
+  },
+  {
+    id: '56c782fghgfc2c326dg8ddb3206',
+    date: '2018-10-08T19:03:23.000Z',
+    title: 'New article 3',
+    text:
+      'Commodo laborum sit nostrud reprehenderit cupidatat officia laboris. Ipsum minim culpa in enim. Voluptate dolor ea irure nisi incididunt enim magna.\n\nCupidatat quis cillum velit culpa tempor esse irure nostrud ea consectetur officia fugiat irure qui. Enim quis officia do in. Velit veniam ipsum consequat aliqua duis voluptate. Minim nisi ex aute ad.\n\nNisi Lorem ex tempor adipisicing labore. Quis occaecat fugiat pariatur labore culpa cillum laboris. Labore occaecat ut laborum sit ex do sit. Deserunt consectetur elit aute laboris est deserunt officia ullamco sit laboris officia aliquip. Aliqua ut sunt nostrud voluptate excepteur quis incididunt Lorem ut.'
   }
 ]

src/reducer/filter.js

@@ -0,0 +1,16 @@
+import { SET_FILTER } from '../constants'
+
+export default (
+  filterState = { selected: [], dateRange: { from: null, to: null } },
+  action
+) => {
+  const { type, payload } = action
+
+  switch (type) {
+    case SET_FILTER:
+      return { ...filterState, ...payload }
+
+    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
 })