diff --git a/src/ac/index.js b/src/ac/index.js index 9ea3761..5d08af0 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, + CHANGE_DATE, + CHANGE_SELECT +} from '../constants' export function increment() { return { @@ -12,3 +17,17 @@ export function deleteArticle(id) { payload: { id } } } + +export function changeDate(dateRange) { + return { + type: CHANGE_DATE, + payload: { dateRange } + } +} + +export function changeSelect(selected) { + return { + type: CHANGE_SELECT, + payload: { selected } + } +} diff --git a/src/components/article-list.js b/src/components/article-list.js index 8ee9d8e..d565772 100644 --- a/src/components/article-list.js +++ b/src/components/article-list.js @@ -19,8 +19,21 @@ export class ArticleList extends Component { } get items() { - const { articles, openItemId, toggleOpenItem } = this.props - return articles.map((article) => ( + const { articles, filters, openItemId, toggleOpenItem } = this.props + // Стоит ли выносить в стору отфильтрованные значения + const filtredArticles = articles.filter((article) => { + const articleDate = new Date(article.date) + const { from, to } = filters.dateRange + + if (from && articleDate <= from) return false + if (to && articleDate >= to) return false + if (filters.selected.length) + return filters.selected.some((select) => select.value === article.id) + + return true + }) + + return filtredArticles.map((article) => (
  • ({ - articles: state.articles + articles: state.articles, + filters: state.filters }))(ArticleListWithAccordion) diff --git a/src/components/filters/date-range.js b/src/components/filters/date-range.js index 3a81b1e..b8f05f7 100644 --- a/src/components/filters/date-range.js +++ b/src/components/filters/date-range.js @@ -1,19 +1,18 @@ import React, { Component } from 'react' +import { connect } from 'react-redux' +import { changeDate } from '../../ac' 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 { changeDate, dateRange } = this.props + changeDate(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 ( @@ -28,4 +27,9 @@ class DateRange extends Component { } } -export default DateRange +export default connect( + (state) => ({ + dateRange: state.filters.dateRange + }), + { changeDate } +)(DateRange) diff --git a/src/components/filters/index.js b/src/components/filters/index.js index c61bc78..84011c0 100644 --- a/src/components/filters/index.js +++ b/src/components/filters/index.js @@ -8,7 +8,7 @@ class Filters extends Component { render() { return (
    - +
    ) diff --git a/src/components/filters/select.js b/src/components/filters/select.js index c9a8512..2fb0d69 100644 --- a/src/components/filters/select.js +++ b/src/components/filters/select.js @@ -1,13 +1,14 @@ import React, { Component } from 'react' +import { connect } from 'react-redux' import Select from 'react-select' +import { changeSelect } from '../../ac' class SelectFilter extends Component { - state = { - selected: null + handleChange = (selected) => { + const { changeSelect } = this.props + changeSelect(selected) } - handleChange = (selected) => this.setState({ selected }) - get options() { return this.props.articles.map((article) => ({ label: article.title, @@ -16,10 +17,11 @@ class SelectFilter extends Component { } render() { + const { selected } = this.props return (