hw3 done

src/App.js

@@ -2,15 +2,13 @@ import React, { Component } from 'react'
 import ArticleList from './components/article-list'
 import Filters from './components/filters'
 import UserForm from './components/user-form'
-import Counter from './components/counter'
 
 class App extends Component {
   render() {
     return (
       <div>
         <h1>Article App</h1>
         <UserForm />
-        <Counter />
         <Filters articles={[]} />
         <ArticleList />
       </div>

src/ac/index.js

@@ -1,4 +1,4 @@
-import { DELETE_ARTICLE, INCREMENT } from '../constants'
+import { DELETE_ARTICLE, INCREMENT, SELECT_ARTICLES, SET_RANGE } from '../constants'
 
 export function increment() {
   return {
@@ -12,3 +12,17 @@ export function deleteArticle(id) {
     payload: { id }
   }
 }
+
+export function selectArticles(payload) {
+  return {
+    type: SELECT_ARTICLES,
+    payload
+  }
+}
+
+export function setRange(payload) {
+  return {
+    type: SET_RANGE,
+    payload
+  }
+}

src/components/article-list.js

@@ -57,6 +57,21 @@ ArticleList.propTypes = {
   openItemId: PropTypes.string
 }
 
+function filterArticles(articles, { range, selected }) {
+  let result = []
+  if (selected && selected.length) {
+    result = articles.filter((article) => selected.some((item) => article.id === item.value))
+  } else {
+    result = articles
+  }
+
+  if (range && range.from && range.to) {
+    result = result.filter((article) => article.date >= range.from && article.date <= range.to)
+  }
+
+  return result
+}
+
 export default connect((state) => ({
-  articles: state.articles
+  articles: filterArticles(state.articles, state.articlesFilter)
 }))(accordion(ArticleList))

src/components/comment-form.js

@@ -0,0 +1,48 @@
+import React, { useState } from 'react'
+
+function commentForm() {
+  const [author, setAuthor] = useState('')
+  const [comment, setComment] = useState('')
+  const [validationError, setValidationError] = useState('')
+
+  function authorInputHandler({ target }) {
+    const { value } = target
+
+    setAuthor(value)
+  }
+
+  function commentInputHandler({ target }) {
+    const { value } = target
+
+    setComment(value)
+  }
+
+  function validateData(event) {
+    event.preventDefault()
+    setValidationError('')
+
+    if (comment.length < 5) {
+      setValidationError(`${validationError}Comment must be longer than 5 characters`)
+    }
+
+    if (author.length < 5) {
+      setValidationError(`${validationError}; author must be longer than 5 characters`)
+    }
+  }
+
+  return (
+    <section>
+      <h2>New comment</h2>
+      <form action="/">
+        <input type="text" onInput={authorInputHandler} placeholder="Author name" />
+        <div>
+          <textarea placeholder="Comment text" onInput={commentInputHandler} cols="30" rows="10" />
+        </div>
+        <div style={{ color: 'red' }}>{validationError}</div>
+        <button onClick={validateData}>submit</button>
+      </form>
+    </section>
+  )
+}
+
+export default commentForm

src/components/filters/date-range.js

@@ -1,14 +1,16 @@
-import React, { useState } from 'react'
+import React from 'react'
+import { connect } from 'react-redux'
 import DayPicker, { DateUtils } from 'react-day-picker'
 
 import 'react-day-picker/lib/style.css'
 
-function DateRange() {
-  const [state, setState] = useState({ from: null, to: null })
+import { setRange } from '../../ac/index'
 
-  const handleDayClick = (day) => setState(DateUtils.addDayToRange(day, state))
+function DateRange({ range, setRange }) {
+  const { from, to } = range
+
+  const handleDayClick = (day) => setRange(DateUtils.addDayToRange(day, range))
 
-  const { from, to } = state
   const selectedRange = from && to && `${from.toDateString()} - ${to.toDateString()}`
 
   return (
@@ -22,4 +24,13 @@ function DateRange() {
   )
 }
 
-export default DateRange
+const mapStateToProps = (state) => {
+  return {
+    range: state.articlesFilter.range
+  }
+}
+
+export default connect(
+  mapStateToProps,
+  { setRange }
+)(DateRange)

src/components/filters/select.js

@@ -1,15 +1,28 @@
-import React, { useState } from 'react'
+import React from 'react'
+import { connect } from 'react-redux'
 import Select from 'react-select'
 
-function SelectFilter({ articles }) {
-  const [selected, setSelection] = useState(null)
+import { selectArticles } from '../../ac/index'
 
+function SelectFilter({ articles, selectArticles, selected }) {
   const options = articles.map((article) => ({
     label: article.title,
     value: article.id
   }))
 
-  return <Select options={options} value={selected} onChange={setSelection} isMulti />
+  return <Select options={options} value={selected} onChange={selectArticles} isMulti />
 }
 
-export default SelectFilter
+const mapStateToProps = (state) => ({
+  articles: state.articles,
+  selected: state.articlesFilter.selected
+})
+
+const mapDispatchToProps = {
+  selectArticles
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(SelectFilter)

src/constants/index.js

@@ -1,3 +1,6 @@
 export const INCREMENT = 'INCREMENT'
 
 export const DELETE_ARTICLE = 'DELETE_ARTICLE'
+
+export const SELECT_ARTICLES = 'SELECT_ARTICLES'
+export const SET_RANGE = 'SET_RANGE'

src/reducer/articles-filter.js

@@ -0,0 +1,31 @@
+import { SELECT_ARTICLES, SET_RANGE } from '../constants'
+
+const initialState = {
+  range: {
+    from: null,
+    to: null
+  },
+  selected: null
+}
+
+export default (filtersState = initialState, action) => {
+  const { type, payload } = action
+
+  switch (type) {
+    case SELECT_ARTICLES: {
+      return {
+        ...filtersState,
+        selected: payload
+      }
+    }
+
+    case SET_RANGE: {
+      return {
+        ...filtersState,
+        range: payload
+      }
+    }
+    default:
+      return filtersState
+  }
+}

src/reducer/articles.js

@@ -5,8 +5,9 @@ export default (articlesState = articles, action) => {
   const { type, payload } = action
 
   switch (type) {
-    case DELETE_ARTICLE:
+    case DELETE_ARTICLE: {
       return articlesState.filter((article) => article.id !== payload.id)
+    }
 
     default:
       return articlesState

src/reducer/index.js

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