From 965c24c4d30ddbe3ab4f08fe49d635eefcbf8e71 Mon Sep 17 00:00:00 2001
From: Denis1990 <den.bogdanov4@gmail.com>
Date: Fri, 2 Feb 2018 23:48:35 +0300
Subject: [PATCH 1/2] Refactor articles

---
 src/components/Article/index.js  | 11 ++++++++++-
 src/components/ArticleList.js    |  8 ++++----
 src/components/Comment.js        |  1 +
 src/components/Filters/Select.js |  8 ++++----
 src/reducer/articles.js          | 15 +++++++++++++--
 src/selectors/index.js           | 11 ++++++++---
 6 files changed, 40 insertions(+), 14 deletions(-)

diff --git a/src/components/Article/index.js b/src/components/Article/index.js
index a3e834e..74657dc 100644
--- a/src/components/Article/index.js
+++ b/src/components/Article/index.js
@@ -5,6 +5,7 @@ import CSSTransition from 'react-addons-css-transition-group'
 import {connect} from 'react-redux'
 import CommentList from '../CommentList'
 import {deleteArticle} from '../../AC'
+import {createArticleSelector} from '../../selectors'
 import './style.css'
 
 class Article extends PureComponent {
@@ -85,5 +86,13 @@ class Article extends PureComponent {
 
 }
 
+const createMapStateToProps = () => {
+    const articleSelector = createArticleSelector()
+    return (state, ownProps) => {
+        return {
+            article: articleSelector(state, ownProps)
+        }
+    }
+}
 
-export default connect(null, { deleteArticle })(Article)
\ No newline at end of file
+export default connect(createMapStateToProps, { deleteArticle })(Article)
\ No newline at end of file
diff --git a/src/components/ArticleList.js b/src/components/ArticleList.js
index bc1c261..4ec975e 100644
--- a/src/components/ArticleList.js
+++ b/src/components/ArticleList.js
@@ -10,10 +10,10 @@ class ArticleList extends Accordion {
         console.log('---', 'rerendering article list')
         const {articles} = this.props
         if (!articles.length) return <h3>No Articles</h3>
-        const articleElements = articles.map((article) => <li key={article.id}>
-            <Article article={article}
-                     isOpen={article.id === this.state.openItemId}
-                     toggleOpen={this.toggleOpenItemMemoized(article.id)}
+        const articleElements = articles.map(id => <li key={id}>
+            <Article id={id}
+                     isOpen={id === this.state.openItemId}
+                     toggleOpen={this.toggleOpenItemMemoized(id)}
             />
         </li>)
         return (
diff --git a/src/components/Comment.js b/src/components/Comment.js
index 4b123ce..b3f9d4c 100644
--- a/src/components/Comment.js
+++ b/src/components/Comment.js
@@ -22,6 +22,7 @@ Comment.propTypes = {
 
 const createMapStateToProps = () => {
     const commentSelector = createCommentSelector()
+    console.log('state Comment--', state)
     return (state, ownProps) => {
         return {
             comment: commentSelector(state, ownProps)
diff --git a/src/components/Filters/Select.js b/src/components/Filters/Select.js
index 1a91857..969f9bd 100644
--- a/src/components/Filters/Select.js
+++ b/src/components/Filters/Select.js
@@ -8,16 +8,16 @@ import 'react-select/dist/react-select.css'
 
 class SelectFilter extends Component {
     static propTypes = {
-        articles: PropTypes.array.isRequired
+        articles: PropTypes.object.isRequired
     };
 
     handleChange = selected => this.props.changeSelection(selected.map(option => option.value))
 
     render() {
         const { articles, selected } = this.props
-        const options = articles.map(article => ({
-            label: article.title,
-            value: article.id
+        const options = Object.keys(articles).map(i => ({
+            label: articles[i].title,
+            value: articles[i].id
         }))
 
         return <Select
diff --git a/src/reducer/articles.js b/src/reducer/articles.js
index 480a522..18464be 100644
--- a/src/reducer/articles.js
+++ b/src/reducer/articles.js
@@ -1,12 +1,23 @@
 import { DELETE_ARTICLE } from '../constants'
 import {normalizedArticles as defaultArticles} from '../fixtures'
 
-export default (articlesState = defaultArticles, action) => {
+const articlesMap = defaultArticles.reduce((acc, article) => ({
+    ...acc,
+    [article.id]: article
+}), {})
+
+export default (articlesState = articlesMap, action) => {
     const { type, payload } = action
 
+    const deletePropFromObject = (object, property) => {
+        const obj = {...object}
+        delete obj[property]
+        return obj
+    }
+
     switch (type) {
         case DELETE_ARTICLE:
-            return articlesState.filter(article => article.id !== payload.id)
+            return deletePropFromObject(articlesState, payload.id)
     }
 
     return articlesState
diff --git a/src/selectors/index.js b/src/selectors/index.js
index 4e3172b..5f2ce7e 100644
--- a/src/selectors/index.js
+++ b/src/selectors/index.js
@@ -10,13 +10,18 @@ export const createCommentSelector = () => createSelector(commentsSelector, idSe
     return comments[id]
 })
 
+export const createArticleSelector = () => createSelector(articlesSelector, idSelector, (articles, id) => {
+    console.log('---', 'searching for article', id)
+    return articles[id]
+})
+
 export const filtratedArticlesSelector = createSelector(articlesSelector, filtersSelector, (articles, filters) => {
     console.log('---', 'computing filters')
     const {selected, dateRange: {from, to}} = filters
 
-    return articles.filter(article => {
-        const published = Date.parse(article.date)
-        return (!selected.length || selected.includes(article.id)) &&
+    return Object.keys(articles).filter(i => {
+        const published = Date.parse(articles[i].date)
+        return (!selected.length || selected.includes(articles[i].id)) &&
             (!from || !to || (published > from && published < to))
     })
 })
\ No newline at end of file

From 0cc948c74997878b959f39929b5ba4104f32b2a0 Mon Sep 17 00:00:00 2001
From: Denis1990 <den.bogdanov4@gmail.com>
Date: Sun, 4 Feb 2018 14:50:54 +0300
Subject: [PATCH 2/2] Add adding comment to articles

---
 src/AC/index.js                     |  9 ++++++++-
 src/components/Article/index.js     |  4 ++--
 src/components/Comment.js           |  1 -
 src/components/CommentForm/index.js |  9 ++++++++-
 src/components/CommentList.js       |  4 ++--
 src/constants/index.js              |  4 +++-
 src/middlewares/idGenerator.js      |  8 ++++++++
 src/reducer/articles.js             | 29 ++++++++++++++++++++++-------
 src/reducer/comments.js             |  9 +++++----
 src/selectors/index.js              |  3 ---
 src/store/index.js                  |  3 ++-
 11 files changed, 60 insertions(+), 23 deletions(-)
 create mode 100644 src/middlewares/idGenerator.js

diff --git a/src/AC/index.js b/src/AC/index.js
index dda2dd6..f0b77ae 100644
--- a/src/AC/index.js
+++ b/src/AC/index.js
@@ -1,4 +1,4 @@
-import {INCREMENT, DELETE_ARTICLE, CHANGE_DATE_RANGE, CHANGE_SELECTION} from '../constants'
+import {INCREMENT, DELETE_ARTICLE, CHANGE_DATE_RANGE, CHANGE_SELECTION, ADD_COMMENT} from '../constants'
 
 export function increment() {
     return {
@@ -26,3 +26,10 @@ export function changeSelection(selected) {
         payload: { selected }
     }
 }
+
+export function addComment(articleId, comment) {
+    return {
+        type: ADD_COMMENT,
+        payload: { articleId, comment }
+    }
+}
diff --git a/src/components/Article/index.js b/src/components/Article/index.js
index 74657dc..57bc8a5 100644
--- a/src/components/Article/index.js
+++ b/src/components/Article/index.js
@@ -30,11 +30,11 @@ class Article extends PureComponent {
 
     render() {
         console.log('---', 'rerendering')
-        const {article, isOpen, toggleOpen} = this.props
+        const {article, isOpen, toggleOpen, id} = this.props
         const body = isOpen && (
             <div>
                 <section>{article.text}</section>
-                <CommentList comments = {article.comments} ref = {this.setCommentsRef} key = {this.state.count}/>
+                <CommentList articleId = {id} comments = {article.comments} ref = {this.setCommentsRef} key = {this.state.count}/>
             </div>
         )
         return (
diff --git a/src/components/Comment.js b/src/components/Comment.js
index b3f9d4c..4b123ce 100644
--- a/src/components/Comment.js
+++ b/src/components/Comment.js
@@ -22,7 +22,6 @@ Comment.propTypes = {
 
 const createMapStateToProps = () => {
     const commentSelector = createCommentSelector()
-    console.log('state Comment--', state)
     return (state, ownProps) => {
         return {
             comment: commentSelector(state, ownProps)
diff --git a/src/components/CommentForm/index.js b/src/components/CommentForm/index.js
index 3685a10..862dd1e 100644
--- a/src/components/CommentForm/index.js
+++ b/src/components/CommentForm/index.js
@@ -1,4 +1,6 @@
 import React, { Component } from 'react'
+import {connect} from 'react-redux'
+import { addComment } from '../../AC'
 import './style.css'
 
 class CommentForm extends Component {
@@ -26,6 +28,11 @@ class CommentForm extends Component {
 
     handleSubmit = ev => {
         ev.preventDefault()
+        const {user, text} = this.state
+        this.props.addComment(this.props.articleId, {
+            user,
+            text
+        })
         this.setState({
             user: '',
             text: ''
@@ -58,4 +65,4 @@ const limits = {
     }
 }
 
-export default CommentForm
\ No newline at end of file
+export default connect(null, { addComment })(CommentForm)
\ No newline at end of file
diff --git a/src/components/CommentList.js b/src/components/CommentList.js
index 8592d22..c60214f 100644
--- a/src/components/CommentList.js
+++ b/src/components/CommentList.js
@@ -24,7 +24,7 @@ class CommentList extends Component {
     }
 
     getBody() {
-        const {comments, isOpen} = this.props
+        const {comments, isOpen, articleId} = this.props
         if (!isOpen) return null
 
         const body = comments.length ? (
@@ -36,7 +36,7 @@ class CommentList extends Component {
         return (
             <div>
                 {body}
-                <CommentForm />
+                <CommentForm articleId={articleId} />
             </div>
         )
     }
diff --git a/src/constants/index.js b/src/constants/index.js
index a2f0a80..dfd51bf 100644
--- a/src/constants/index.js
+++ b/src/constants/index.js
@@ -3,4 +3,6 @@ export const INCREMENT = 'INCREMENT'
 export const DELETE_ARTICLE = 'DELETE_ARTICLE'
 
 export const CHANGE_SELECTION = 'CHANGE_SELECTION'
-export const CHANGE_DATE_RANGE = 'CHANGE_DATE_RANGE'
\ No newline at end of file
+export const CHANGE_DATE_RANGE = 'CHANGE_DATE_RANGE'
+
+export const ADD_COMMENT = 'ADD_COMMENT'
\ No newline at end of file
diff --git a/src/middlewares/idGenerator.js b/src/middlewares/idGenerator.js
new file mode 100644
index 0000000..f750d7a
--- /dev/null
+++ b/src/middlewares/idGenerator.js
@@ -0,0 +1,8 @@
+import { ADD_COMMENT } from "../constants";
+
+export default store => next => action => {
+  const { payload } = action
+  next({...action, payload: {...payload, id: idGenerator()}})
+}
+
+const idGenerator = () => Math.random().toString(36).slice(2)
\ No newline at end of file
diff --git a/src/reducer/articles.js b/src/reducer/articles.js
index 18464be..ee1e543 100644
--- a/src/reducer/articles.js
+++ b/src/reducer/articles.js
@@ -1,4 +1,4 @@
-import { DELETE_ARTICLE } from '../constants'
+import { DELETE_ARTICLE, ADD_COMMENT } from '../constants'
 import {normalizedArticles as defaultArticles} from '../fixtures'
 
 const articlesMap = defaultArticles.reduce((acc, article) => ({
@@ -6,18 +6,33 @@ const articlesMap = defaultArticles.reduce((acc, article) => ({
     [article.id]: article
 }), {})
 
-export default (articlesState = articlesMap, action) => {
-    const { type, payload } = action
+const deletePropFromObject = (object, property) => {
+    const obj = {...object}
+    delete obj[property]
+    return obj
+}
 
-    const deletePropFromObject = (object, property) => {
-        const obj = {...object}
-        delete obj[property]
-        return obj
+const getArticlesWithNewComment = (articles, articleId, commentId) => {
+    const article = articles[articleId]
+    const {comments} = article
+    return {
+        ...articles,
+        [articleId]: {
+            ...article,
+            comments: [...comments, commentId]
+        } 
     }
+}
+
+export default (articlesState = articlesMap, action) => {
+    const { type, payload } = action
 
     switch (type) {
         case DELETE_ARTICLE:
             return deletePropFromObject(articlesState, payload.id)
+
+        case ADD_COMMENT:
+            return getArticlesWithNewComment(articlesState, payload.articleId, payload.id)
     }
 
     return articlesState
diff --git a/src/reducer/comments.js b/src/reducer/comments.js
index 30bd10c..8c62c4f 100644
--- a/src/reducer/comments.js
+++ b/src/reducer/comments.js
@@ -1,4 +1,4 @@
-import {  } from '../constants'
+import { ADD_COMMENT } from '../constants'
 import {normalizedComments as defaultComments} from '../fixtures'
 
 const commentsMap = defaultComments.reduce((acc, comment) => ({
@@ -7,10 +7,11 @@ const commentsMap = defaultComments.reduce((acc, comment) => ({
 }), {})
 
 export default (state = commentsMap, action) => {
-    const { type } = action
-
-    switch (type) {
+    const { type, payload } = action
 
+    if (type === ADD_COMMENT) {
+        const {id, comment} = payload
+        return {...state, [id]: {...comment, id}}
     }
 
     return state
diff --git a/src/selectors/index.js b/src/selectors/index.js
index 5f2ce7e..4807766 100644
--- a/src/selectors/index.js
+++ b/src/selectors/index.js
@@ -6,17 +6,14 @@ export const commentsSelector = state => state.comments
 export const idSelector = (_, props) => props.id
 
 export const createCommentSelector = () => createSelector(commentsSelector, idSelector, (comments, id) => {
-    console.log('---', 'searching for comment', id)
     return comments[id]
 })
 
 export const createArticleSelector = () => createSelector(articlesSelector, idSelector, (articles, id) => {
-    console.log('---', 'searching for article', id)
     return articles[id]
 })
 
 export const filtratedArticlesSelector = createSelector(articlesSelector, filtersSelector, (articles, filters) => {
-    console.log('---', 'computing filters')
     const {selected, dateRange: {from, to}} = filters
 
     return Object.keys(articles).filter(i => {
diff --git a/src/store/index.js b/src/store/index.js
index f83d367..733e3ba 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,6 +1,7 @@
 import {createStore, applyMiddleware, compose} from 'redux'
 import rootReducer from '../reducer'
 import logger from '../middlewares/logger'
+import idGenerator from '../middlewares/idGenerator'
 
 const composeEnhancers =
     typeof window === 'object' &&
@@ -10,7 +11,7 @@ const composeEnhancers =
         }) : compose
 
 const enhancer = composeEnhancers(
-    applyMiddleware(logger)
+    applyMiddleware(logger, idGenerator)
 )
 const store = createStore(rootReducer, enhancer)