Hw03

src/ac/index.js

@@ -1,4 +1,4 @@
-import { INCREMENT, DELETE_ARTICLE } from '../constants'
+import { INCREMENT, DELETE_ARTICLE, FILTER_ID, FILTER_DATE } from '../constants'
 
 export function increment() {
   return {
@@ -12,3 +12,17 @@ export function deleteArticle(id) {
     payload: { id }
   }
 }
+
+export function filterByIds(values) {
+  return {
+    type: FILTER_ID,
+    payload: { values }
+  }
+}
+
+export function filterByDates(range) {
+  return {
+    type: FILTER_DATE,
+    payload: { range: { ...range } }
+  }
+}

src/components/article-list.js

@@ -39,6 +39,39 @@ export class ArticleList extends Component {
 
 const ArticleListWithAccordion = accordionDecorator(ArticleList)
 
-export default connect((state) => ({
-  articles: state.articles
-}))(ArticleListWithAccordion)
+function mapStateToProps(state) {
+  const articles = state.articles
+  const filters = state.filters
+
+  const idFilter = filters.ids.map((item) => item.value)
+  console.log(' --- ids: ' + idFilter)
+
+  const dateFilterFrom =
+    filters.dates.from && new Date(filters.dates.from).getTime()
+  const dateFilterTo = filters.dates.to && new Date(filters.dates.to).getTime()
+  console.log(
+    ' --- date from: ' + filters.dates.from + ' date to: ' + filters.dates.to
+  )
+
+  const noDateFilter = !dateFilterFrom && !dateFilterTo
+
+  const oneDate =
+    dateFilterFrom && !dateFilterTo
+      ? new Date(dateFilterFrom).setHours(0, 0, 0, 0)
+      : null
+
+  return {
+    articles: articles.filter((article) => {
+      const idCheck = !idFilter.length || idFilter.includes(article.id)
+      const date = article.date && new Date(article.date).getTime()
+      const oneDateCheck =
+        oneDate && new Date(date).setHours(0, 0, 0, 0) === oneDate
+      const dateRangeCheck = date >= dateFilterFrom && date <= dateFilterTo
+
+      return idCheck && (noDateFilter || oneDateCheck || dateRangeCheck)
+    }),
+    filters: state.filters
+  }
+}
+
+export default connect(mapStateToProps)(ArticleListWithAccordion)

src/components/filters/date-range.js

@@ -1,19 +1,31 @@
 import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import DayPicker, { DateUtils } from 'react-day-picker'
+import { connect } from 'react-redux'
+import { filterByDates } from '../../ac'
 
 import 'react-day-picker/lib/style.css'
 
 class DateRange extends Component {
-  state = {
-    from: null,
-    to: null
+  //  state = {
+  //    from: null,
+  //    to: null
+  //  }
+  static propTypes = {
+    handleFilter: PropTypes.func
   }
 
-  handleDayClick = (day) =>
-    this.setState(DateUtils.addDayToRange(day, this.state))
+  //  handleDayClick = (day) =>
+  //    this.setState(DateUtils.addDayToRange(day, this.state))
+
+  handleDayClick = (day) => {
+    console.log('---', ' handleDayClick ')
+    this.props.handleFilter(DateUtils.addDayToRange(day, this.props.filter))
+  }
 
   render() {
-    const { from, to } = this.state
+    const { from, to } = this.props.filter
+    //    const { from, to } = this.state
     const selectedRange =
       from && to && `${from.toDateString()} - ${to.toDateString()}`
     return (
@@ -28,4 +40,17 @@ class DateRange extends Component {
   }
 }
 
-export default DateRange
+const mapStateToProps = (state) => ({
+  from: state.filters.dates.from,
+  to: state.filters.dates.to
+})
+
+const mapDispatchToProps = {
+  handleFilter: filterByDates
+}
+
+export default connect(
+  mapStateToProps,
+  //  null,
+  mapDispatchToProps
+)(DateRange)

src/components/filters/index.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react'
+import { connect } from 'react-redux'
 import DateRange from './date-range'
 import SelectFilter from './select'
 
@@ -8,11 +9,19 @@ class Filters extends Component {
   render() {
     return (
       <div>
-        <SelectFilter articles={this.props.articles} />
-        <DateRange />
+        <SelectFilter
+          articles={this.props.articles}
+          selected={this.props.filters.id}
+        />
+        <DateRange filter={this.props.filters.dates} />
       </div>
     )
   }
 }
 
-export default Filters
+const mapStateToProps = (state) => ({
+  articles: state.articles,
+  filters: state.filters
+})
+
+export default connect(mapStateToProps)(Filters)

src/components/filters/select.js

@@ -1,12 +1,18 @@
 import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import Select from 'react-select'
+import { connect } from 'react-redux'
+import { filterByIds } from '../../ac'
 
 class SelectFilter extends Component {
-  state = {
-    selected: null
+  static propTypes = {
+    handleFilter: PropTypes.func
   }
 
-  handleChange = (selected) => this.setState({ selected })
+  handleChange = (selected) => {
+    console.log('---', ' handleChange ')
+    this.props.handleFilter(selected)
+  }
 
   get options() {
     return this.props.articles.map((article) => ({
@@ -19,12 +25,19 @@ class SelectFilter extends Component {
     return (
       <Select
         options={this.options}
-        value={this.state.selected}
+        value={this.props.selected}
         onChange={this.handleChange}
         isMulti
       />
     )
   }
 }
 
-export default SelectFilter
+const mapDispatchToProps = {
+  handleFilter: filterByIds
+}
+
+export default connect(
+  null,
+  mapDispatchToProps
+)(SelectFilter)

src/constants/index.js

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

src/reducer/filters.js

@@ -0,0 +1,35 @@
+import { FILTER_ID, FILTER_DATE } from '../constants'
+
+const defFilterState = {
+  ids: [],
+  dates: {
+    from: null,
+    to: null
+  }
+}
+
+export default (filtersState = defFilterState, action) => {
+  const { type, payload } = action
+
+  switch (type) {
+    case FILTER_ID:
+      return {
+        ...filtersState,
+        ids: payload.values ? payload.values : defFilterState.ids
+      }
+
+    case FILTER_DATE:
+      const range = payload.range || {}
+      return {
+        ...filtersState,
+        dates: {
+          from: range.from ? range.from : defFilterState.dates.from,
+          to: range.to ? range.to : defFilterState.dates.to
+        }
+      }
+
+    default:
+      //      return articlesState
+      return filtersState
+  }
+}

src/reducer/index.js

@@ -1,8 +1,10 @@
 import { combineReducers } from 'redux'
 import counterReducer from './couter'
 import articles from './articles'
+import filters from './filters'
 
 export default combineReducers({
   counter: counterReducer,
-  articles
+  articles,
+  filters
 })