Homework4

src/AC/index.js

@@ -11,4 +11,12 @@ export function deleteArticle(id) {
         type: DELETE_ARTICLE,
         payload: { id }
     }
-}
+}
+
+
+export function selectDateRange(dates) {
+  return {
+    type: 'DATE_RANGE',
+    dates: dates
+  }
+}

src/components/Filters/DateRange.js

@@ -3,18 +3,22 @@ import DayPicker, { DateUtils } from 'react-day-picker'
 
 import 'react-day-picker/lib/style.css';
 
+import dateRange from '../../reducer/dateRange'
+import {connect} from 'react-redux'
+import {selectDateRange} from '../../AC'
 class DateRange extends Component {
-    state = {
-        from: null,
-        to: null
-    }
+//    state = {
+//        from: null,
+//        to: null
+//    }
 
     handleDayClick = (day) => {
-        this.setState(DateUtils.addDayToRange(day, this.state))
+        this.props.selectDateRange(DateUtils.addDayToRange(day, this.props.dates))
+        //this.setState(DateUtils.addDayToRange(day, this.state))
     }
 
     render() {
-        const { from, to } = this.state;
+        const { from, to } = this.props.dates;
         const selectedRange = from && to && `${from.toDateString()} - ${to.toDateString()}`
         return (
             <div className="date-range">
@@ -30,4 +34,4 @@ class DateRange extends Component {
 
 }
 
-export default DateRange
+export default connect((state)=>({dates :{from: state.dateRange.from, to: state.dateRange.to}}) , {selectDateRange})(DateRange)

src/constants.js

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

src/reducer/articles.js

@@ -1,12 +1,15 @@
 import {articles as defaultArticles} from '../fixtures'
-import {DELETE_ARTICLE} from '../constants'
+import {DELETE_ARTICLE, DATE_RANGE} from '../constants'
 
 export default (articleState = defaultArticles, action) => {
     const {type, payload} = action
 
     switch (type) {
         case DELETE_ARTICLE: return articleState.filter(article => article.id !== payload.id)
+        //по сути ты удаляешь статьи, а должен хранить здесь список всех статей, а фильтровать где-то в другом месте(например в коннекте)
+        case DATE_RANGE: return articleState.filter(article => {if(action.dates.to) return Date.parse(article.date) >= Date.parse(action.dates.from) && Date.parse(article.date) <= Date.parse(action.dates.to)
+        else return Date.parse(article.date) >= Date.parse(action.dates.from)})
     }
 
     return articleState
-}
+}

src/reducer/dateRange.js

@@ -0,0 +1,8 @@
+import {articles as defaultArticles} from '../fixtures'
+
+//не дроби редюсеры слишком сильно: объедини селект и календарь в один
+export default  (dateRange = {from: null, to: null}, action) => {
+  console.log(action);
+  if(action.type === 'DATE_RANGE') return {from: action.dates.from , to: action.dates.to}
+  else return dateRange
+}

src/reducer/index.js

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

src/reducer/select.js

@@ -0,0 +1,3 @@
+export default select (dateRange = {from: '', to: ''}, action) {
+  if(action.type = 'DATE_RANGE') return dateRange
+}