HT4

src/AC/index.js

@@ -1,4 +1,4 @@
-import {DELETE_ARTICLE, INCREMENT} from '../constants'
+import {DELETE_ARTICLE, INCREMENT, FILTER_DATE, FILTER_SELECT} from '../constants'
 
 export function increment() {
     return {
@@ -11,4 +11,18 @@ export function deleteArticle(id) {
         type: DELETE_ARTICLE,
         payload: { id }
     }
-}
+}
+
+export function filterDate(date) {
+    return {
+        type: FILTER_DATE,
+        payload: { date }
+    }
+}
+
+export function filterSelect(selected) {
+    return {
+        type: FILTER_SELECT,
+        payload: { selected }
+    }
+}

src/components/App.js

@@ -16,11 +16,11 @@ class App extends Component {
             <div>
                 <Counter />
                 <UserForm />
-                <Filters articles = {[]} />
+                <Filters />
                 <ArticleList />
             </div>
         )
     }
 }
 
-export default App
+export default App

src/components/ArticleList.js

@@ -31,5 +31,5 @@ class ArticleList extends Component {
 }
 
 export default connect(state => ({
-    articles: state.articles
-}))(accordion(ArticleList))
+    articles: state.articlesState.articles
+}))(accordion(ArticleList))

src/components/Filters/DateRange.js

@@ -1,20 +1,21 @@
 import React, { Component } from 'react'
 import DayPicker, { DateUtils } from 'react-day-picker'
+import PropTypes from 'prop-types'
 
 import 'react-day-picker/lib/style.css';
 
 class DateRange extends Component {
-    state = {
-        from: null,
-        to: null
+    static propTypes = {
+        dateRange: PropTypes.object.isRequired
     }
-
-    handleDayClick = (day) => {
-        this.setState(DateUtils.addDayToRange(day, this.state))
+
+    handleDayClick = day => {
+        let {filterDate, dateRange } = this.props;
+        filterDate(DateUtils.addDayToRange(day, dateRange))
     }
 
     render() {
-        const { from, to } = this.state;
+        const { dateRange: { from, to } } = this.props;
         const selectedRange = from && to && `${from.toDateString()} - ${to.toDateString()}`
         return (
             <div className="date-range">
@@ -30,4 +31,4 @@ class DateRange extends Component {
 
 }
 
-export default DateRange
+export default DateRange

src/components/Filters/Select.js

@@ -5,21 +5,16 @@ import Select from 'react-select'
 import 'react-select/dist/react-select.css'
 
 class SelectFilter extends Component {
-    state = {
-        selected: []
-    }
-
     static propTypes = {
-        articles: PropTypes.array.isRequired
+        allArticles: PropTypes.array.isRequired
     };
 
-    handleChange = selected => this.setState({selected})
+    handleChange = selected => this.props.filterSelect(selected)
 
     render() {
-        const { selected } = this.state
-        const { articles } = this.props
+        const { selected, allArticles } = this.props
 
-        const options = articles.map(article => ({
+        const options = allArticles.map(article => ({
             label: article.title,
             value: article.id
         }))
@@ -33,4 +28,4 @@ class SelectFilter extends Component {
     }
 }
 
-export default SelectFilter
+export default SelectFilter

src/components/Filters/index.js

@@ -1,21 +1,28 @@
 import React, { Component } from 'react'
-import PropTypes from 'prop-types'
 import DateRange from './DateRange'
 import SelectFilter from './Select'
+import {connect} from 'react-redux'
+import {filterSelect, filterDate} from '../../AC'
 
 class Filters extends Component {
-    static propTypes = {
-        articles: PropTypes.array
-    };
-
     render() {
+        let {selected, filterSelect, filterDate, allArticles, dateRange} = this.props;
+
         return (
             <div>
-                <SelectFilter articles = {this.props.articles} />
-                <DateRange />
+                <SelectFilter {...{selected, filterSelect, allArticles}} />
+                <DateRange {...{dateRange, filterDate}} />
             </div>
         )
     }
 }
 
-export default Filters
+export default connect(state => ({
+    allArticles: state.articlesState.allArticles,
+    selected: state.articlesState.selected,
+    dateRange: state.articlesState.dateRange
+}),
+{
+    filterSelect,
+    filterDate
+})(Filters)

src/constants.js

@@ -1,3 +1,7 @@
 export const DELETE_ARTICLE = 'DELETE_ARTICLE'
 
-export const INCREMENT = 'INCREMENT'
+export const INCREMENT = 'INCREMENT'
+
+export const FILTER_DATE = 'FILTER_DATE'
+
+export const FILTER_SELECT = 'FILTER_SELECT'

src/reducer/articles.js

@@ -1,12 +1,72 @@
 import {articles as defaultArticles} from '../fixtures'
-import {DELETE_ARTICLE} from '../constants'
+import {DELETE_ARTICLE, FILTER_DATE, FILTER_SELECT} from '../constants'
 
-export default (articleState = defaultArticles, action) => {
+const initialState = {
+    articles: defaultArticles,
+    selected: [],
+    allArticles: defaultArticles,
+    dateRange: {
+        from: null,
+        to: null
+    }
+}
+
+export default (articleState = initialState, action) => {
     const {type, payload} = action
 
     switch (type) {
-        case DELETE_ARTICLE: return articleState.filter(article => article.id !== payload.id)
+        case DELETE_ARTICLE: return {
+            ...articleState,
+            articles: articleState.articles.filter(article => article.id !== payload.id)
+        };
+
+        case FILTER_DATE: {
+            return {
+                ...articleState,
+                dateRange: {from: payload.date.from, to: payload.date.to},
+                articles: completeCheck(articleState.allArticles, payload.date, articleState.selected),
+            }
+        }
+
+        case FILTER_SELECT: return {
+            ...articleState,
+            articles: completeCheck(articleState.allArticles, articleState.dateRange, payload.selected),
+            selected: payload.selected
+        }
     }
 
     return articleState
-}
+}
+
+const completeCheck = (articles, date, selected) => {
+    let filteredArticles = getFilteredByDateArticles(articles, date);
+    filteredArticles = getSelectedArticles(filteredArticles, selected);
+    return filteredArticles;
+}
+
+const getFilteredByDateArticles = (articles, date) => {
+    if (date.from && date.to) {
+        let filtered =  articles.filter(article => {
+            let articleDate = new Date(article.date);
+            return articleDate >= date.from && articleDate <= date.to
+        })
+        return filtered;
+    }
+    return articles;
+}
+
+const getSelectedArticles = (articles, selected) => {
+    if (selected.length > 0) {
+        let selectedLabels = {};
+        selected.map(selected => selectedLabels[selected.label] = true);
+
+        let articlesSelected = [];
+        articles.map(article => {
+            if (selectedLabels[article.title])
+                articlesSelected.push(article);
+        });
+
+        return articlesSelected;
+    }
+    return articles;
+}

src/reducer/index.js

@@ -4,5 +4,5 @@ import articles from './articles'
 
 export default combineReducers({
     count: counterReducer,
-    articles
-})
+    articlesState: articles
+})