Home task 3

src/App.js

@@ -3,6 +3,7 @@ import ArticleList from './components/article-list'
 import Filters from './components/filters'
 import UserForm from './components/user-form'
 import Counter from './components/counter'
+import articles from './fixtures'
 
 class App extends Component {
   render() {
@@ -11,7 +12,7 @@ class App extends Component {
         <h1>Article App</h1>
         <UserForm />
         <Counter />
-        <Filters articles={[]} />
+        <Filters articles={articles} />
         <ArticleList />
       </div>
     )

src/ac/index.js

@@ -1,4 +1,4 @@
-import { DELETE_ARTICLE, INCREMENT } from '../constants'
+import { DELETE_ARTICLE, INCREMENT, CHANGE_FILTER } from '../constants'
 
 export function increment() {
   return {
@@ -12,3 +12,10 @@ export function deleteArticle(id) {
     payload: { id }
   }
 }
+
+export function changeFilters(filterConfig) {
+  return {
+    type: CHANGE_FILTER,
+    filterConfig: { ...filterConfig }
+  }
+}

src/components/article-list.js

@@ -3,30 +3,6 @@ import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import Article from './article'
 import accordion from '../decorators/accordion'
-//import useAccordion from '../custom-hooks/accordion'
-
-/*
-export default function ArticleList({ articles, fetchAll }) {
-  const { openItemId, toggleOpenItem } = useAccordion()
-    useEffect(() => {
-        fetchAll()
-    })
-
-  const articleItems = articles.map((article) => (
-    <li key={article.id}>
-      <Article
-        article={article}
-        onBtnClick={toggleOpenItem(article.id)}
-        isOpen={article.id === openItemId}
-      />
-    </li>
-  ))
-
-  return <ul className="test--article-list__container">{articleItems}</ul>
-}
-*/
-
-//import AccodrionComponent from './accordion-component'
 
 class ArticleList extends Component {
   componentDidMount() {
@@ -52,7 +28,6 @@ class ArticleList extends Component {
 ArticleList.propTypes = {
   articles: PropTypes.array.isRequired,
   fetchAll: PropTypes.func,
-  //from toggleOpen decorator
   toggleOpenItem: PropTypes.func.isRequired,
   openItemId: PropTypes.string
 }

src/components/filters/date-range.js

@@ -1,25 +1,50 @@
-import React, { useState } from 'react'
+import React, { Component } from 'react'
 import DayPicker, { DateUtils } from 'react-day-picker'
+import { connect } from 'react-redux'
+import { changeFilters } from '../../ac'
 
 import 'react-day-picker/lib/style.css'
 
-function DateRange() {
-  const [state, setState] = useState({ from: null, to: null })
+class DateRange extends Component {
+  state = {
+    from: null,
+    to: null
+  }
 
-  const handleDayClick = (day) => setState(DateUtils.addDayToRange(day, state))
+  render() {
+    const handleDayClick = (day) => {
+      this.setState(DateUtils.addDayToRange(day, this.state))
 
-  const { from, to } = state
-  const selectedRange = from && to && `${from.toDateString()} - ${to.toDateString()}`
+      const { from, to } = DateUtils.addDayToRange(day, this.state)
+      const ids = this.props.filters.articleIds
+      const newFilters = { dates: { from: from, to: to }, articleIds: ids }
+      this.props.handleChangeFilters(newFilters)
+    }
 
-  return (
-    <div className="date-range">
-      <DayPicker
-        selectedDays={(day) => DateUtils.isDayInRange(day, { from, to })}
-        onDayClick={handleDayClick}
-      />
-      {selectedRange}
-    </div>
-  )
+    const { from, to } = this.state
+    const selectedRange = from && to && `${from.toDateString()} - ${to.toDateString()}`
+
+    return (
+      <div className="date-range">
+        <DayPicker
+          selectedDays={(day) => DateUtils.isDayInRange(day, { from, to })}
+          onDayClick={handleDayClick}
+        />
+        {selectedRange}
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = (storeState) => ({
+  filters: storeState.filters
+})
+
+const mapDispatchToProps = {
+  handleChangeFilters: changeFilters
 }
 
-export default DateRange
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(DateRange)

src/components/filters/select.js

@@ -1,15 +1,37 @@
-import React, { useState } from 'react'
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
 import Select from 'react-select'
+import { changeFilters } from '../../ac'
 
-function SelectFilter({ articles }) {
-  const [selected, setSelection] = useState(null)
+class SelectFilter extends Component {
+  articleSelectorChangeHandler = (selectedArticles) => {
+    const { from, to } = this.props.filters.dates
+    const ids = selectedArticles.map((article) => {
+      return article.value
+    })
+    const newFilters = { dates: { from: from, to: to }, articleIds: ids }
+    this.props.handleChangeFilters(newFilters)
+  }
+  render() {
+    const { articles } = this.props
+    const options = articles.map((article) => ({
+      label: article.title,
+      value: article.id
+    }))
 
-  const options = articles.map((article) => ({
-    label: article.title,
-    value: article.id
-  }))
+    return <Select options={options} onChange={this.articleSelectorChangeHandler} isMulti />
+  }
+}
+
+const mapStateToProps = (storeState) => ({
+  filters: storeState.filters
+})
 
-  return <Select options={options} value={selected} onChange={setSelection} isMulti />
+const mapDispatchToProps = {
+  handleChangeFilters: changeFilters
 }
 
-export default SelectFilter
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(SelectFilter)

src/constants/index.js

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

src/reducer/articles.js

@@ -1,5 +1,5 @@
 import articles from '../fixtures'
-import { DELETE_ARTICLE } from '../constants'
+import { DELETE_ARTICLE, CHANGE_FILTER } from '../constants'
 
 export default (articlesState = articles, action) => {
   const { type, payload } = action
@@ -8,6 +8,32 @@ export default (articlesState = articles, action) => {
     case DELETE_ARTICLE:
       return articlesState.filter((article) => article.id !== payload.id)
 
+    case CHANGE_FILTER:
+      const {
+        dates: { from, to },
+        articleIds
+      } = action.filterConfig
+      let res = articles
+      if (articleIds.length > 0) {
+        res = articles.filter((article) => articleIds.includes(article.id))
+      }
+      if (from) {
+        res = res.filter(
+          (article) =>
+            new Date(from.toISOString().slice(0, 10)) <=
+            new Date(new Date(article.date).toISOString().slice(0, 10))
+        )
+      }
+      if (to) {
+        res = res.filter(
+          (article) =>
+            new Date(to.toISOString().slice(0, 10)) >=
+            new Date(new Date(article.date).toISOString().slice(0, 10))
+        )
+      }
+
+      return res
+
     default:
       return articlesState
   }

src/reducer/filters.js

@@ -0,0 +1,9 @@
+import { CHANGE_FILTER } from '../constants'
+
+export default (
+  prevFiltersConfig = { dates: { from: null, to: null }, articleIds: [] },
+  action
+) => {
+  const { type, filterConfig } = action
+  return type === CHANGE_FILTER ? filterConfig : prevFiltersConfig
+}

src/reducer/index.js

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