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
}
}
-export default SelectFilter
\ No newline at end of file
+export default connect(storeState => ({
+// articles: storeState.articles,
+ selected: storeState.filters.selected
+}), { filterSelected })(SelectFilter)
\ No newline at end of file
diff --git a/src/components/Filters/index.js b/src/components/Filters/index.js
index 4ac1415..eaa85bf 100644
--- a/src/components/Filters/index.js
+++ b/src/components/Filters/index.js
@@ -1,19 +1,28 @@
import React, { Component } from 'react'
import DateRange from './DateRange'
import SelectFilter from './Select'
+import {connect} from 'react-redux'
class Filters extends Component {
static propTypes = {
};
render() {
+ const { from, to } = this.props.filters
+
return (
-
+
+
)
}
}
-export default Filters
\ No newline at end of file
+
+export default connect( storeState => ({...storeState}) )(Filters)
+
+/*
+export default Filters*/
diff --git a/src/constants/index.js b/src/constants/index.js
index f1c8ad4..737401a 100644
--- a/src/constants/index.js
+++ b/src/constants/index.js
@@ -1,3 +1,4 @@
export const INCREMENT = 'INCREMENT'
-
-export const DELETE_ARTICLE = 'DELETE_ARTICLE'
\ No newline at end of file
+export const DELETE_ARTICLE = 'DELETE_ARTICLE'
+export const FILTER_DATERANGE = 'FILTER_DATERANGE'
+export const FILTER_SELECTED = 'FILTER_SELECTED'
\ No newline at end of file
diff --git a/src/fixtures.js b/src/fixtures.js
index 86c7272..0e336a1 100644
--- a/src/fixtures.js
+++ b/src/fixtures.js
@@ -1,7 +1,7 @@
export default [
{
"id": "56c782f18990ecf954f6e027",
- "date": "2016-06-09T15:03:23.000Z",
+ "date": "2018-06-09T15:03:23.000Z",
"title": "Commodo qui incididunt",
"text": "Commodo qui incididunt ex ut ea nulla et eu aliquip duis. Aute deserunt excepteur ullamco fugiat sunt aliquip exercitation do sint incididunt. Amet consectetur sint irure reprehenderit fugiat amet mollit. In commodo mollit ullamco cillum pariatur eiusmod cillum aute mollit. Culpa non sint eiusmod ad dolor velit dolore voluptate do adipisicing. Cupidatat sint est magna officia qui magna eu elit qui excepteur fugiat duis ex labore.\n\nAliquip veniam ad reprehenderit mollit exercitation id enim ut exercitation. Esse irure ipsum minim laborum reprehenderit irure ut. Tempor excepteur nisi nulla nostrud amet id cillum. Sint velit sint officia aliqua sint quis deserunt.\n\nAliquip dolor cillum deserunt enim nulla dolor amet irure cupidatat commodo laboris id aliqua. Labore aliqua adipisicing Lorem id adipisicing. Ad cupidatat et do anim ex commodo elit magna ad consequat. Nostrud sit eu laborum ut consequat fugiat aute culpa. Lorem tempor quis sunt ad consequat excepteur est. Enim voluptate cillum Lorem ex fugiat ea qui. Irure aute magna dolore eiusmod minim non ad anim dolore sint et.",
"comments": [
diff --git a/src/reducer/articles.js b/src/reducer/articles.js
index 023a7b9..d36868d 100644
--- a/src/reducer/articles.js
+++ b/src/reducer/articles.js
@@ -6,7 +6,8 @@ export default (articlesState = defaultArticles, action) => {
switch (type) {
case DELETE_ARTICLE:
- return articlesState.filter(article => article.id !== payload.id)
+ return articlesState.filter(article => article.id !== payload.id);
+
}
return articlesState
diff --git a/src/reducer/filters.js b/src/reducer/filters.js
new file mode 100644
index 0000000..f0b0d7e
--- /dev/null
+++ b/src/reducer/filters.js
@@ -0,0 +1,23 @@
+import {FILTER_DATERANGE, FILTER_SELECTED} from '../constants'
+
+export default (state = {from: null, to: null, selected: []}, action) => {
+ console.log(JSON.stringify(action.payload))
+
+ const {type, payload} = action
+
+ switch (type) {
+ case FILTER_DATERANGE:
+ return {
+ ...payload,
+ selected: state.selected
+ };
+
+ case FILTER_SELECTED:
+ return {
+ ...state,
+ selected: payload.selected
+ }
+ }
+
+ return state
+}
\ No newline at end of file
diff --git a/src/reducer/index.js b/src/reducer/index.js
index 96c1a98..a7be8cb 100644
--- a/src/reducer/index.js
+++ b/src/reducer/index.js
@@ -1,8 +1,11 @@
import {combineReducers} from 'redux'
-import counterReducer from './counter'
+import counter from './counter'
import articles from './articles'
+import filters from './filters'
export default combineReducers({
- counter: counterReducer,
- articles
+ counter,
+ articles,
+ filters
+
})
\ No newline at end of file
diff --git a/src/store/index.js b/src/store/index.js
index 1b60099..a74d59f 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,7 +1,7 @@
import {createStore} from 'redux'
import rootReducer from '../reducer'
-const store = createStore(rootReducer)
+const store = createStore(rootReducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())
//dev only, no need in prod
window.store = store