Fix adding of comments. Add lodash

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "lodash": "^4.17.10",
     "prop-types": "^15.6.2",
     "react": "^16.5.2",
     "react-addons-css-transition-group": "^15.6.2",
@@ -12,7 +13,8 @@
     "react-scripts": "2.0.4",
     "react-select": "^2.1.0",
     "redux": "^4.0.1",
-    "reselect": "^4.0.0"
+    "reselect": "^4.0.0",
+    "uuid": "^3.3.2"
   },
   "scripts": {
     "start": "react-scripts start",

src/ac/index.js

@@ -13,10 +13,10 @@ export function increment() {
   }
 }
 
-export function deleteArticle(id) {
+export function deleteArticle(articleId) {
   return {
     type: DELETE_ARTICLE,
-    payload: { id }
+    payload: { articleId }
   }
 }
 
@@ -41,9 +41,9 @@ export function addCommentToList(payload) {
   }
 }
 
-export function addCommentToArticle(id) {
+export function addCommentToArticle(payload) {
   return {
     type: ADD_COMMENT_TO_ARTICLE,
-    payload: { id }
+    payload
   }
 }

src/components/article/index.js

@@ -3,7 +3,6 @@ import CSSTransition from 'react-addons-css-transition-group'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import CommentList from '../comment-list'
-import { createArticleSelector } from '../../selectors'
 import { deleteArticle } from '../../ac'
 import './style.css'
 
@@ -70,15 +69,7 @@ class Article extends PureComponent {
   }
 }
 
-const createMapStateToProps = () => {
-  const articleSelector = createArticleSelector()
-
-  return (state, ownProps) => ({
-    articles: articleSelector(state, ownProps)
-  })
-}
-
 export default connect(
-  createMapStateToProps,
+  null,
   { deleteArticle }
 )(Article)

src/components/comment-list/index.js

@@ -1,3 +1,5 @@
+import uuidv4 from 'uuid/v4'
+
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
@@ -16,7 +18,6 @@ class CommentList extends Component {
   }
 
   state = {
-    id: 'ratatata',
     comment: null,
     user: null
   }
@@ -47,11 +48,11 @@ class CommentList extends Component {
   }
 
   getBody() {
-    const { comments = [], isOpen } = this.props
-    const { id, text, user } = this.state
+    const { articleId, comments = [], isOpen } = this.props
+    const { text, user } = this.state
     if (!isOpen) return null
 
-    // TODO Генерировать id
+    // TODO Вынести форму добавления комментария в отдельную компоненту
     return (
       <div className="test--comment-list__body">
         {comments.length ? (
@@ -72,8 +73,9 @@ class CommentList extends Component {
         />
         <button
           onClick={() => {
-            this.props.addCommentToList({ id, text, user })
-            this.props.addCommentToArticle({ commentId: id })
+            const commentId = uuidv4()
+            this.props.addCommentToList({ commentId, text, user })
+            this.props.addCommentToArticle({ articleId, commentId })
           }}
         >
           Добавить комментарий

src/reducer/articles.js

@@ -1,3 +1,5 @@
+import omit from 'lodash/omit'
+
 import { normalizedArticles } from '../fixtures'
 import { ADD_COMMENT_TO_ARTICLE, DELETE_ARTICLE } from '../constants'
 
@@ -10,20 +12,20 @@ const defaultArticles = normalizedArticles.reduce(
 )
 
 export default (articlesState = defaultArticles, action) => {
-  const { type, payload: { id, commentId } = {} } = action
+  const { type, payload: { articleId, commentId } = {} } = action
 
   switch (type) {
     case ADD_COMMENT_TO_ARTICLE:
       return {
         ...articlesState,
-        [id]: {
-          ...articlesState.id,
-          comments: [...articlesState.comments, commentId]
+        [articleId]: {
+          ...articlesState[articleId],
+          comments: [...articlesState[articleId].comments, commentId]
         }
       }
 
     case DELETE_ARTICLE:
-      return articlesState.filter((article) => article.id !== id)
+      return omit(articlesState, [articleId])
 
     default:
       return articlesState

src/reducer/comments.js

@@ -10,11 +10,13 @@ const defaultComments = normalizedComments.reduce(
 )
 
 export default (state = defaultComments, action) => {
-  const { type, payload: { id, text, user } = {} } = action
+  const { type, payload: { commentId, text, user } = {} } = action
 
   switch (type) {
     case ADD_COMMENT_TO_LIST:
-      return { ...state, [id]: { text, user } }
+      console.log({ ...state, [commentId]: { text, user } }, 'comments')
+      return { ...state, [commentId]: { text, user } }
+
     default:
       return state
   }

src/selectors/index.js

@@ -1,18 +1,12 @@
 import { createSelector } from 'reselect'
+import filter from 'lodash/filter'
 
 export const selectionSelector = (state) => state.filters.selected
 export const dateRangeSelector = (state) => state.filters.dateRange
 export const articlesSelector = (state) => state.articles
 export const commentsSelector = (state) => state.comments
 export const idSelector = (_, props) => props.id
 
-export const createArticleSelector = () =>
-  createSelector(articlesSelector, idSelector, (articles, id) => {
-    console.log(articles, 'articles')
-    console.log(id, 'id')
-    return articles[id]
-  })
-
 export const filtratedArticlesSelector = createSelector(
   selectionSelector,
   dateRangeSelector,
@@ -21,7 +15,7 @@ export const filtratedArticlesSelector = createSelector(
     console.log('---', 'article list selector')
     const { from, to } = dateRange
 
-    return articles.filter((article) => {
+    return filter(articles, (article) => {
       const published = Date.parse(article.date)
       return (
         (!selected.length ||