Ht4

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "chance": "^1.0.16",
     "prop-types": "^15.6.2",
     "react": "^16.5.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,
+  CREATE_COMMENT_TO_ARTICLE
 } from '../constants'
 
 export function increment() {
@@ -31,3 +32,10 @@ export function changeSelection(selected) {
     payload: { selected }
   }
 }
+
+export function createCommentToArticle(articleId, user, text) {
+  return {
+    type: CREATE_COMMENT_TO_ARTICLE,
+    payload: { articleId, user, text }
+  }
+}

src/components/article-list.js

@@ -7,7 +7,7 @@ import { filtratedArticlesSelector } from '../selectors'
 
 export class ArticleList extends Component {
   static propTypes = {
-    articles: PropTypes.array.isRequired,
+    articles: PropTypes.object.isRequired,
     fetchData: PropTypes.func,
 
     //from accordion decorator
@@ -22,7 +22,7 @@ export class ArticleList extends Component {
 
   get items() {
     const { articles, openItemId, toggleOpenItem } = this.props
-    return articles.map((article) => (
+    return Object.values(articles).map((article) => (
       <li key={article.id} className="test--article-list__item">
         <Article
           article={article}

src/components/article/index.js

@@ -3,14 +3,16 @@ import CSSTransition from 'react-addons-css-transition-group'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import CommentList from '../comment-list'
-import { deleteArticle } from '../../ac'
+import { deleteArticle, createCommentToArticle } from '../../ac'
 import './style.css'
 
 class Article extends PureComponent {
   static propTypes = {
     article: PropTypes.shape({
+      id: PropTypes.string.isRequired,
       title: PropTypes.string.isRequired,
-      text: PropTypes.string
+      text: PropTypes.string,
+      comments: PropTypes.array
     }).isRequired,
     isOpen: PropTypes.bool,
     toggleOpen: PropTypes.func.isRequired
@@ -55,6 +57,11 @@ class Article extends PureComponent {
 
   handleClick = () => this.props.toggleOpen(this.props.article.id)
 
+  handleCreateComment = (user, text) => {
+    const { createCommentToArticle, article } = this.props
+    createCommentToArticle(article.id, user, text)
+  }
+
   get body() {
     const { isOpen, article } = this.props
     if (!isOpen) return null
@@ -63,13 +70,16 @@ class Article extends PureComponent {
     return (
       <section className="test--article__body">
         {article.text}
-        <CommentList comments={article.comments} />
+        <CommentList
+          comments={article.comments}
+          onCreateComment={this.handleCreateComment}
+        />
       </section>
     )
   }
 }
 
 export default connect(
   null,
-  { deleteArticle }
+  { deleteArticle, createCommentToArticle }
 )(Article)

src/components/comment-list/index.js

@@ -2,12 +2,14 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import CSSTransition from 'react-addons-css-transition-group'
 import Comment from '../comment'
+import NewCommentForm from '../new-comment-form/index'
 import toggleOpen from '../../decorators/toggleOpen'
 import './style.css'
 
 class CommentList extends Component {
   static propTypes = {
     comments: PropTypes.array,
+    onCreateComment: PropTypes.func,
     //from toggleOpen decorator
     isOpen: PropTypes.bool,
     toggleOpen: PropTypes.func
@@ -49,6 +51,7 @@ class CommentList extends Component {
         ) : (
           <h3 className="test--comment-list__empty">No comments yet</h3>
         )}
+        <NewCommentForm onSendComment={this.handleSendComment} />
       </div>
     )
   }
@@ -64,6 +67,11 @@ class CommentList extends Component {
       </ul>
     )
   }
+
+  handleSendComment = (user, text) => {
+    const { onCreateComment } = this.props
+    onCreateComment && onCreateComment(user, text)
+  }
 }
 
 export default toggleOpen(CommentList)

src/components/filters/select.js

@@ -6,15 +6,16 @@ import { changeSelection } from '../../ac'
 
 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 Object.values(articles).map((article) => ({
       label: article.title,
       value: article.id
     }))

src/components/new-comment-form/index.js

@@ -0,0 +1,56 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import './style.css'
+
+class NewCommentForm extends PureComponent {
+  static propTypes = {
+    onSendComment: PropTypes.func
+  }
+
+  state = {
+    user: '',
+    text: ''
+  }
+
+  render() {
+    return (
+      <div className="new-comment-form__container">
+        <form onSubmit={this.handleSubmit}>
+          <div className="new-comment-form__user">
+            <label>Your name:</label>
+            <input
+              type="text"
+              value={this.state.user}
+              name="user"
+              onChange={this.handleChange}
+            />
+          </div>
+          <div className="new-comment-form__text">
+            <textarea
+              value={this.state.text}
+              name="text"
+              onChange={this.handleChange}
+            />
+          </div>
+          <div className="new-comment-form__button">
+            <button type="submit">Send</button>
+          </div>
+        </form>
+      </div>
+    )
+  }
+
+  handleChange = (ev) => {
+    this.setState({ [ev.target.name]: ev.target.value })
+  }
+
+  handleSubmit = (ev) => {
+    ev.preventDefault()
+
+    const { onSendComment } = this.props
+
+    onSendComment && onSendComment(this.state.user, this.state.text)
+  }
+}
+
+export default NewCommentForm

src/components/new-comment-form/style.css

@@ -0,0 +1,24 @@
+.new-comment-form__container {
+	border: 1px solid gray;
+	margin-top: 15px;
+	padding: 20px 15px;
+	width: 500px;
+}
+
+.new-comment-form__user {
+	margin-bottom: 10px;
+}
+
+.new-comment-form__user label {
+	margin-right: 10px;
+}
+
+.new-comment-form__text textarea {
+	width: 100%;
+	height: 50px;
+}
+
+.new-comment-form__button {
+	margin-top: 10px;
+	text-align: right;
+}

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 CREATE_COMMENT_TO_ARTICLE = 'CREATE_COMMENT_TO_ARTICLE'

src/middlewares/id-generator.js

@@ -0,0 +1,11 @@
+import Chance from 'chance'
+import { CREATE_COMMENT_TO_ARTICLE } from '../constants'
+
+export default (store) => (next) => (action) => {
+  if (action.type === CREATE_COMMENT_TO_ARTICLE) {
+    const chance = new Chance()
+    action.payload.id = chance.guid()
+  }
+
+  next(action)
+}

src/reducer/articles.js

@@ -1,12 +1,44 @@
-import { normalizedArticles as defaultArticles } from '../fixtures'
-import { DELETE_ARTICLE } from '../constants'
+import { normalizedArticles } from '../fixtures'
+import { CREATE_COMMENT_TO_ARTICLE, DELETE_ARTICLE } from '../constants'
+
+const defaultArticles = normalizedArticles.reduce(
+  (acc, article) => ({
+    ...acc,
+    [article.id]: article
+  }),
+  {}
+)
 
 export default (articlesState = defaultArticles, action) => {
   const { type, payload } = action
 
   switch (type) {
     case DELETE_ARTICLE:
-      return articlesState.filter((article) => article.id !== payload.id)
+      const newArticleState = {}
+
+      for (let id in articlesState) {
+        if (id === payload.id) {
+          continue
+        }
+
+        newArticleState[id] = articlesState[id]
+      }
+
+      return newArticleState
+
+    case CREATE_COMMENT_TO_ARTICLE:
+      const { id, articleId } = payload
+      const commentedArticle = articlesState[articleId]
+
+      return {
+        ...articlesState,
+        [articleId]: {
+          ...commentedArticle,
+          comments: commentedArticle.comments
+            ? [...commentedArticle.comments, id]
+            : [id]
+        }
+      }
 
     default:
       return articlesState

src/reducer/comments.js

@@ -1,5 +1,6 @@
 import {} from '../constants'
 import { normalizedComments } from '../fixtures'
+import { CREATE_COMMENT_TO_ARTICLE } from '../constants'
 
 const defaultComments = normalizedComments.reduce(
   (acc, comment) => ({
@@ -10,9 +11,17 @@ const defaultComments = normalizedComments.reduce(
 )
 
 export default (state = defaultComments, action) => {
-  const { type } = action
+  const { type, payload } = action
 
   switch (type) {
+    case CREATE_COMMENT_TO_ARTICLE:
+      const { id, user, text } = payload
+      return {
+        ...state,
+        [id]: { id, user, text }
+      }
+      break
+
     default:
       return state
   }

src/selectors/index.js

@@ -14,14 +14,20 @@ export const filtratedArticlesSelector = createSelector(
     console.log('---', 'article list selector')
     const { from, to } = dateRange
 
-    return articles.filter((article) => {
-      const published = Date.parse(article.date)
-      return (
+    const outputArticles = {}
+
+    for (let id in articles) {
+      const published = Date.parse(articles[id].date)
+
+      if (
         (!selected.length ||
-          selected.find((selected) => selected.value === article.id)) &&
+          selected.find((selected) => selected.value === id)) &&
         (!from || !to || (published > from && published < to))
-      )
-    })
+      ) {
+        outputArticles[id] = articles[id]
+      }
+    }
+    return outputArticles
   }
 )
 

src/store/index.js

@@ -1,8 +1,9 @@
 import { createStore, applyMiddleware } from 'redux'
 import reducer from '../reducer'
 import logger from '../middlewares/logger'
+import idGenerator from '../middlewares/id-generator'
 
-const enhancer = applyMiddleware(logger)
+const enhancer = applyMiddleware(logger, idGenerator)
 
 const store = createStore(reducer, enhancer)