HT4.1 Переписал список статей аналогично комментам

src/ac/index.js

@@ -1,15 +1,21 @@
-import { INCREMENT, DELETE_ARTICLE, CHANGE_DATE_RANGE, CHANGE_SELECTION } from '../constants'
+import {
+  ADD_COMMENT,
+  INCREMENT,
+  DELETE_ARTICLE,
+  CHANGE_DATE_RANGE,
+  CHANGE_SELECTION
+} from '../constants'
 
 export function increment() {
   return {
     type: INCREMENT
   }
 }
 
-export function deleteArticle(id) {
+export function deleteArticle(id, comments) {
   return {
     type: DELETE_ARTICLE,
-    payload: { id }
+    payload: { id, comments }
   }
 }
 
@@ -26,3 +32,10 @@ export function changeSelection(selected) {
     payload: { selected }
   }
 }
+
+export function addComment(comment) {
+  return {
+    type: ADD_COMMENT,
+    payload: { comment }
+  }
+}

src/components/article.js

@@ -19,7 +19,7 @@ class Article extends Component {
   }
 
   handleDeleteClick = () => {
-    this.props.deleteArticle(this.props.article.id)
+    this.props.deleteArticle(this.props.article.id, this.props.article.comments)
   }
 
   getBody() {
@@ -29,7 +29,7 @@ class Article extends Component {
     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

@@ -1,5 +1,7 @@
 import React, { Component } from 'react'
 import './style.css'
+import { connect } from 'react-redux'
+import { addComment } from '../../ac'
 
 class CommentForm extends Component {
   static propTypes = {}
@@ -31,6 +33,8 @@ class CommentForm extends Component {
 
   handleSubmit = (ev) => {
     ev.preventDefault()
+    const { articleId } = this.props
+    this.props.addComment({ ...this.state, articleId: articleId })
     this.setState({
       user: '',
       text: ''
@@ -63,4 +67,7 @@ const limits = {
   }
 }
 
-export default CommentForm
+export default connect(
+  null,
+  { addComment }
+)(CommentForm)

src/components/comment-list.js

@@ -31,7 +31,7 @@ export class CommentList extends Component {
   }
 
   getBody() {
-    const { comments, isOpen } = this.props
+    const { comments, isOpen, articleId } = this.props
     if (!isOpen) return null
 
     const body =
@@ -50,7 +50,7 @@ export class CommentList extends Component {
     return (
       <div className="test__comment-list--body">
         {body}
-        <CommentForm />
+        <CommentForm articleId={articleId} />
       </div>
     )
   }

src/constants/index.js

@@ -4,3 +4,4 @@ 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/generateUniqID.js

@@ -0,0 +1,6 @@
+export default (store) => (next) => (action) => {
+  action.random = Math.random()
+    .toString(36)
+    .substr(2, 9)
+  next(action)
+}

src/reducer/articles.js

@@ -1,13 +1,28 @@
-import { normalizedArticles as defaultArticles } from '../fixtures'
-import { DELETE_ARTICLE } from '../constants'
+import { normalizedArticles } from '../fixtures'
+import { DELETE_ARTICLE, ADD_COMMENT } from '../constants'
+import { deleteArticleSelector } from '../selectors'
+
+const defaultArticles = normalizedArticles.reduce((acc, article) => {
+  return {
+    ...acc,
+    [article.id]: article
+  }
+}, {})
 
 export default (articlesState = defaultArticles, action) => {
-  const { type, payload } = action
+  const { type, payload, random } = action
 
   switch (type) {
     case DELETE_ARTICLE:
-      return articlesState.filter((article) => article.id !== payload.id)
+      return deleteArticleSelector(articlesState, payload.id)
 
+    case ADD_COMMENT:
+      const {
+        comment: { articleId }
+      } = payload
+      const comments = articlesState[articleId].comments.concat(random)
+      const article = { ...articlesState[articleId], comments }
+      return { ...articlesState, [articleId]: article }
     default:
       return articlesState
   }

src/reducer/comments.js

@@ -1,4 +1,5 @@
 import { normalizedComments } from '../fixtures'
+import { ADD_COMMENT, DELETE_ARTICLE } from '../constants'
 
 const defaultComments = normalizedComments.reduce(
   (acc, comment) => ({
@@ -9,9 +10,26 @@ const defaultComments = normalizedComments.reduce(
 )
 
 export default (commentsState = defaultComments, action) => {
-  const { type } = action
-
+  const { type, payload, random } = action
   switch (type) {
+    case DELETE_ARTICLE: {
+      const { comments = [] } = action.payload
+      if (!comments.length) {
+        return commentsState
+      }
+      const commentIds = Object.keys(commentsState).filter((id) => !comments.includes(id))
+      const newObj = commentIds.reduce(
+        (acc, commentId) => ({
+          ...acc,
+          [commentId]: commentsState[commentId]
+        }),
+        {}
+      )
+      return { ...newObj }
+    }
+    case ADD_COMMENT: {
+      return Object.assign({ [random]: { id: random, ...payload.comment } }, commentsState)
+    }
     default:
       return commentsState
   }

src/selectors/index.js

@@ -1,8 +1,13 @@
 import { createSelector } from 'reselect'
 
-export const articlesSelector = (state) => state.articles
+export const articlesSelector = (state) =>
+  Object.keys(state.articles).map((id) => state.articles[id])
 export const selectedSelector = (state) => state.filters.selected
 export const dateRangeSelector = (state) => state.filters.dateRange
+export const deleteArticleSelector = (state, id) => {
+  const { [id]: _, ...filteredArticles } = state
+  return filteredArticles
+}
 
 export const filtratedArticlesSelector = createSelector(
   articlesSelector,

src/store/index.js

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