diff --git a/src/AC/index.js b/src/AC/index.js index 6b623b4..7eb217b 100644 --- a/src/AC/index.js +++ b/src/AC/index.js @@ -1,4 +1,4 @@ -import {INCREMENT, DELETE_ARTICLE} from '../constants' +import {INCREMENT, DELETE_ARTICLE, FILTER_DATERANGE, FILTER_SELECTED} from '../constants' export function increment() { return { @@ -11,4 +11,18 @@ export function deleteArticle(id) { type: DELETE_ARTICLE, payload: { id } } +} + +export function filterDateRange({from, to}) { + return { + type: FILTER_DATERANGE, + payload: { from, to } + } +} + +export function filterSelected(selected) { + return { + type: FILTER_SELECTED, + payload: { selected } + } } \ No newline at end of file diff --git a/src/components/App.js b/src/components/App.js index 7fc1ed4..6842c60 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -4,6 +4,7 @@ import UserForm from './UserForm' import Filters from './Filters' import Counter from './Counter' + class App extends Component { render() { return ( diff --git a/src/components/Article/index.js b/src/components/Article/index.js index c5a5791..08010ef 100644 --- a/src/components/Article/index.js +++ b/src/components/Article/index.js @@ -63,7 +63,7 @@ class Article extends PureComponent { } handleDelete = () => { - const {deleteArticle,article} = this.props + const {deleteArticle, article} = this.props deleteArticle(article.id) } diff --git a/src/components/ArticleList.js b/src/components/ArticleList.js index 99e28c7..b7c3ac3 100644 --- a/src/components/ArticleList.js +++ b/src/components/ArticleList.js @@ -6,7 +6,7 @@ import Accordion from './common/Accordion' class ArticleList extends Accordion { render() { - const {articles} = this.props + const articles = filterArticles(this.props) if (!articles.length) return

No Articles

const articleElements = articles.map((article) =>
  • { + const byDate = !from && !to || new Date(date) >= from && new Date(date) <= to; + const bySelect = !selected.length || selected.map( ({ value }) => value ).includes(id) + + return byDate && bySelect + } ) +} + ArticleList.defaultProps = { articles: [] @@ -32,5 +44,6 @@ ArticleList.propTypes = { } export default connect(state => ({ - articles: state.articles + articles: state.articles, + filters: state.filters }))(ArticleList) \ No newline at end of file diff --git a/src/components/Filters/DateRange.js b/src/components/Filters/DateRange.js index 7f1fdb9..18ca5d6 100644 --- a/src/components/Filters/DateRange.js +++ b/src/components/Filters/DateRange.js @@ -1,18 +1,30 @@ import React, { Component } from 'react' import DayPicker, { DateUtils } from 'react-day-picker' +import {connect} from 'react-redux' +import {filterDateRange} from '../../AC' +import Article from '../Article' 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)) + handleDayClick = (day) => { + + const {filterDateRange} = this.props + filterDateRange(DateUtils.addDayToRange(day, this.props)) + + } render() { - const { from, to } = this.state + console.log('DateRange --- \n', this.props) +// const { from, to } = this.state + const { from, to } = this.props const selectedRange = from && to && `${from.toDateString()} - ${to.toDateString()}` return (
    @@ -27,4 +39,5 @@ class DateRange extends Component { } -export default DateRange \ No newline at end of file + +export default connect(null, { filterDateRange })(DateRange) diff --git a/src/components/Filters/Select.js b/src/components/Filters/Select.js index 018dd1d..81a4e81 100644 --- a/src/components/Filters/Select.js +++ b/src/components/Filters/Select.js @@ -1,6 +1,8 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import Select from 'react-select' +import {connect} from 'react-redux' +import {filterSelected} from '../../AC' import 'react-select/dist/react-select.css' @@ -9,13 +11,21 @@ class SelectFilter extends Component { articles: PropTypes.array.isRequired }; - state = { +/* state = { selected: null - } + }*/ + + //handleChange = selected => (console.log(selected), this.setState({ selected })) + + handleChange = (selected) => { - handleChange = selected => this.setState({ selected }) + const {filterSelected} = this.props + filterSelected(selected) + + } render() { + console.log('Select --- \n', this.props) const { articles } = this.props const options = articles.map(article => ({ label: article.title, @@ -24,11 +34,14 @@ class SelectFilter extends Component { return