Ht4 Smotrova Lilit

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "lodash": "^4.17.10",
     "prop-types": "^15.6.1",
     "react": "^16.3.2",
     "react-addons-css-transition-group": "^15.6.2",

src/ac/index.js

@@ -2,7 +2,8 @@ import {
   INCREMENT,
   DELETE_ARTICLE,
   CHANGE_DATE_RANGE,
-  CHANGE_SELECTION
+  CHANGE_SELECTION,
+  ADD_COMMENT
 } from '../constants'
 
 export function increment() {
@@ -25,6 +26,13 @@ export function changeDateRange(dateRange) {
   }
 }
 
+export function addComment({ commentText, author, articleId }) {
+  return {
+    type: ADD_COMMENT,
+    payload: { commentText, author, articleId }
+  }
+}
+
 export function changeSelection(selected) {
   return {
     type: CHANGE_SELECTION,

src/components/article/index.js

@@ -16,7 +16,8 @@ class Article extends PureComponent {
     }).isRequired,
     isOpen: PropTypes.bool,
     toggleOpen: PropTypes.func.isRequired,
-    deleteArticle: PropTypes.func
+    deleteArticle: PropTypes.func,
+    addComment: PropTypes.func
   }
 
   state = {
@@ -59,7 +60,7 @@ class Article extends PureComponent {
     return (
       <section className="test__article_body">
         {article.text}
-        <CommentList comments={article.comments} />
+        <CommentList comments={article.comments} articleId={article.id} />
       </section>
     )
   }

src/components/comment-form/index.js

@@ -0,0 +1,63 @@
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+import PropTypes from 'prop-types'
+import { addComment } from '../../ac'
+
+class CommentForm extends Component {
+  static propTypes = {
+    articleId: PropTypes.string.isRequired,
+    addComment: PropTypes.func.isRequired
+  }
+
+  state = {
+    commentText: '',
+    author: ''
+  }
+
+  handleSubmit = (e) => {
+    e.preventDefault()
+    const { author, commentText } = this.state
+    const { addComment, articleId } = this.props
+
+    addComment({ author, commentText, articleId })
+  }
+
+  handleChangeAuthor = (e) => {
+    this.setState({ author: e.target.value })
+  }
+
+  handleChangeCommentText = (e) => {
+    this.setState({ commentText: e.target.value })
+  }
+
+  render() {
+    const { author, commentText } = this.state
+
+    return (
+      <form onSubmit={this.handleSubmit} style={{ padding: '25px' }}>
+        <label>
+          <div>Author:</div>
+          <input
+            type="text"
+            onChange={this.handleChangeAuthor}
+            value={author}
+          />
+        </label>
+        <label>
+          <div>Comment:</div>
+          <textarea
+            onChange={this.handleChangeCommentText}
+            value={commentText}
+          />
+        </label>
+        <div>
+          <input type="submit" value="Add comment" />
+        </div>
+      </form>
+    )
+  }
+}
+
+export default connect(null, {
+  addComment
+})(CommentForm)

src/components/comment-list/index.js

@@ -4,6 +4,7 @@ import CSSTransition from 'react-addons-css-transition-group'
 import Comment from '../comment'
 import toggleOpen from '../../decorators/toggleOpen'
 import './style.css'
+import CommentForm from '../comment-form'
 
 class CommentList extends Component {
   static defaultProps = {
@@ -14,7 +15,8 @@ class CommentList extends Component {
     comments: PropTypes.array.isRequired,
     //from toggleOpen decorator
     isOpen: PropTypes.bool,
-    toggleOpen: PropTypes.func
+    toggleOpen: PropTypes.func,
+    articleId: PropTypes.string.isRequired
   }
 
   render() {
@@ -37,7 +39,7 @@ class CommentList extends Component {
   }
 
   getBody() {
-    const { comments, isOpen } = this.props
+    const { comments, isOpen, articleId } = this.props
     if (!isOpen) return null
 
     return (
@@ -47,6 +49,7 @@ class CommentList extends Component {
         ) : (
           <h3 className="test__comment-list--empty">No comments yet</h3>
         )}
+        <CommentForm articleId={articleId} />
       </div>
     )
   }

src/components/filters/select.js

@@ -3,18 +3,21 @@ import PropTypes from 'prop-types'
 import Select from 'react-select'
 import { connect } from 'react-redux'
 import { changeSelection } from '../../ac'
+import map from 'lodash/map'
 
 class SelectFilter extends Component {
   static propTypes = {
-    articles: PropTypes.array.isRequired
+    articles: PropTypes.object.isRequired
   }
 
   handleChange = (selected) => {
     this.props.changeSelection(selected)
   }
 
   get options() {
-    return this.props.articles.map((article) => ({
+    const { articles } = this.props
+
+    return map(articles, (article) => ({
       label: article.title,
       value: article.id
     }))

src/constants/index.js

@@ -4,3 +4,5 @@ export const DELETE_ARTICLE = 'DELETE_ARTICLE'
 
 export const CHANGE_SELECTION = 'CHANGE_SELECTION'
 export const CHANGE_DATE_RANGE = 'CHANGE_DATE_RANGE'
+
+export const ADD_COMMENT = 'ADD_COMMENT'

src/middlewares/unique-comment-id.js

@@ -0,0 +1,15 @@
+import { ADD_COMMENT } from '../constants'
+
+export default (store) => (next) => (action) => {
+  if (action.type !== ADD_COMMENT) {
+    return next(action)
+  }
+
+  return next({
+    ...action,
+    payload: {
+      ...action.payload,
+      id: new Date().getTime()
+    }
+  })
+}

src/reducer/articles.js

@@ -1,10 +1,30 @@
-import { DELETE_ARTICLE } from '../constants'
-import { normalizedArticles as defaultArticles } from '../fixtures'
+import { ADD_COMMENT, DELETE_ARTICLE } from '../constants'
+import { normalizedArticles } from '../fixtures'
+
+const defaultArticles = normalizedArticles.reduce(
+  (acc, article) => ({
+    ...acc,
+    [article.id]: article
+  }),
+  {}
+)
+console.log(defaultArticles)
 
 export default (articleState = defaultArticles, action) => {
   const { type, payload } = action
 
   switch (type) {
+    case ADD_COMMENT:
+      const article = articleState[payload.articleId]
+
+      return {
+        ...articleState,
+        [article.id]: {
+          ...article,
+          comments: [...article.comments, payload.id]
+        }
+      }
+
     case DELETE_ARTICLE:
       return articleState.filter((article) => article.id !== payload.id)
 

src/reducer/comments.js

@@ -1,5 +1,5 @@
-import {} from '../constants'
 import { normalizedComments } from '../fixtures'
+import { ADD_COMMENT } from '../constants'
 
 const defaultComments = normalizedComments.reduce(
   (acc, comment) => ({
@@ -10,9 +10,19 @@ const defaultComments = normalizedComments.reduce(
 )
 
 export default (commentsState = defaultComments, action) => {
-  const { type } = action
+  const { type, payload } = action
 
   switch (type) {
+    case ADD_COMMENT:
+      return {
+        ...commentsState,
+        [payload.id]: {
+          id: payload.id,
+          user: payload.author,
+          text: payload.commentText
+        }
+      }
+
     default:
       return commentsState
   }

src/selectors/index.js

@@ -1,4 +1,5 @@
 import { createSelector } from 'reselect'
+import filter from 'lodash/filter'
 
 const idSelector = (_, props) => props.id
 const articlesSelector = (state) => state.articles
@@ -15,7 +16,7 @@ export const filtratedArticlesSelector = createSelector(
     } = filters
     console.log('---', 'calculating filters')
 
-    return articles.filter((article) => {
+    return filter(articles, (article) => {
       const published = Date.parse(article.date)
       return (
         (!selected.length ||

src/store/index.js

@@ -1,6 +1,7 @@
 import { createStore, applyMiddleware, compose } from 'redux'
 import reducer from '../reducer'
 import logger from '../middlewares/logger'
+import uniqueCommentId from '../middlewares/unique-comment-id'
 
 const composeEnhancers =
   typeof window === 'object' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
@@ -9,7 +10,7 @@ const composeEnhancers =
       })
     : compose
 
-const enhancer = composeEnhancers(applyMiddleware(logger))
+const enhancer = composeEnhancers(applyMiddleware(logger, uniqueCommentId))
 
 const store = createStore(reducer, enhancer)
 

yarn.lock

@@ -4891,7 +4891,7 @@ lodash.uniq@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
 
-"lodash@>=3.5 <5", lodash@^4.13.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.0, lodash@^4.3.0:
+"lodash@>=3.5 <5", lodash@^4.13.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.0, lodash@^4.3.0:
   version "4.17.10"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.10.tgz#1b7793cf7259ea38fb3661d4d38b3260af8ae4e7"