From 0238b0efb9b2dc449ffc41e26b9a34a3f2410c47 Mon Sep 17 00:00:00 2001
From: Roman <kaboom.ua@gmail.com>
Date: Mon, 19 Feb 2018 20:17:26 +0200
Subject: [PATCH 1/3] Initial commit

---
 README.md | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 README.md

diff --git a/README.md b/README.md
new file mode 100644
index 0000000..3a8340b
--- /dev/null
+++ b/README.md
@@ -0,0 +1 @@
+# basic-react-1902
\ No newline at end of file

From 468a48c8bd65f583857a49e0d431a31dfd3114f5 Mon Sep 17 00:00:00 2001
From: jekahm <yevhen.tuchak@gmail.com>
Date: Sun, 11 Mar 2018 06:10:24 +0300
Subject: [PATCH 2/3] Home work #4.

---
 package.json                           |  2 +
 src/AC/index.js                        | 25 +++++++-
 src/components/add-new-comment-form.js | 79 ++++++++++++++++++++++++++
 src/components/article-list/index.js   | 30 +++++-----
 src/components/article/index.js        | 18 +++---
 src/components/comment-list/index.js   |  8 ++-
 src/components/filters/select.js       | 14 ++---
 src/constants/index.js                 | 11 ++--
 src/middlewares/handle-new-comment.js  | 16 ++++++
 src/reducer/articles.js                | 29 ++++++++--
 src/reducer/comments.js                | 16 ++++--
 src/selectors/index.js                 | 32 ++++++-----
 src/store/index.js                     | 16 +++---
 yarn.lock                              | 20 +++++++
 14 files changed, 246 insertions(+), 70 deletions(-)
 create mode 100644 src/components/add-new-comment-form.js
 create mode 100644 src/middlewares/handle-new-comment.js

diff --git a/package.json b/package.json
index d2d8832..84f3b98 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
     "prop-types": "^15.6.0",
+    "randomstring": "^1.1.5",
     "react": "^16.2.0",
     "react-addons-css-transition-group": "^15.6.2",
     "react-day-picker": "^7.0.7",
@@ -14,6 +15,7 @@
     "react-scripts": "1.1.1",
     "react-select": "^1.2.1",
     "redux": "^3.7.2",
+    "redux-logger": "^3.0.6",
     "reselect": "^3.0.1"
   },
   "scripts": {
diff --git a/src/AC/index.js b/src/AC/index.js
index dda2dd6..3ac8041 100644
--- a/src/AC/index.js
+++ b/src/AC/index.js
@@ -1,4 +1,7 @@
-import {INCREMENT, DELETE_ARTICLE, CHANGE_DATE_RANGE, CHANGE_SELECTION} from '../constants'
+import {
+  INCREMENT, DELETE_ARTICLE, CHANGE_DATE_RANGE, CHANGE_SELECTION, ADD_NEW_COMMENT,
+  UPDATE_ARTICLE_COMMENTS
+} from '../constants'
 
 export function increment() {
     return {
@@ -26,3 +29,23 @@ export function changeSelection(selected) {
         payload: { selected }
     }
 }
+
+export function addNewComment(user, text, articleId) {
+  return {
+    type: ADD_NEW_COMMENT,
+    payload: {
+      data: {user, text},
+      articleId
+    }
+  };
+}
+
+export function updateArticleComments(articleId, commentId) {
+  return {
+    type: UPDATE_ARTICLE_COMMENTS,
+    payload: {
+      articleId,
+      commentId
+    }
+  }
+}
diff --git a/src/components/add-new-comment-form.js b/src/components/add-new-comment-form.js
new file mode 100644
index 0000000..942c0fc
--- /dev/null
+++ b/src/components/add-new-comment-form.js
@@ -0,0 +1,79 @@
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { addNewComment } from '../AC';
+
+class AddNewCommentForm extends Component {
+
+  state = {
+    userName: '',
+    text: ''
+  };
+
+  static propTypes = {
+    articleId: PropTypes.string.isRequired,
+    addComment: PropTypes.func.isRequired
+  };
+
+  static defaultProps = {};
+
+  handleSubmit = (e) => {
+    e.preventDefault();
+    this.props.addComment(this.state.userName, this.state.text, this.props.articleId);
+    this.setState({
+      userName: '',
+      text: ''
+    })
+  };
+
+  handleUsernameInput = (e) => {
+    this.setState({
+      userName: e.target.value
+    });
+  };
+
+  handleTextInput = (e) => {
+    this.setState({
+      text: e.target.value
+    });
+  };
+
+  render() {
+    return (
+      <div style={{border: '1px solid #000', padding: '5px', marginTop: '10px'}}>
+        <form onSubmit={this.handleSubmit}>
+          <div>
+            <label htmlFor='username'>Username</label><br />
+            <input type='text' name='username' id='username' placeholder='Input your name' value={this.state.userName} onChange={this.handleUsernameInput} />
+            <br /><br />
+          </div>
+          <div>
+            <label htmlFor='text'>Text</label><br />
+            <textarea name='text' id='text' placeholder='Input text' value={this.state.text} onChange={this.handleTextInput} />
+            <br /><br />
+          </div>
+          <div>
+            <input type="submit" value="Add" disabled={!(this.state.userName && this.state.text)}/>
+          </div>
+        </form>
+      </div>
+    );
+  }
+
+}
+
+const mapStateToProps = (state, ownProps) => {
+  return {
+    articleId: ownProps.articleId
+  }
+};
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    addComment(user, text, articleId) {
+      dispatch(addNewComment(user, text, articleId));
+    }
+  }
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(AddNewCommentForm);
diff --git a/src/components/article-list/index.js b/src/components/article-list/index.js
index f2cebc8..0b9436d 100644
--- a/src/components/article-list/index.js
+++ b/src/components/article-list/index.js
@@ -7,29 +7,29 @@ import { filtratedArticles } from '../../selectors'
 
 export class ArticleList extends Component {
     static propTypes = {
-        articles: PropTypes.array.isRequired,
+        articles: PropTypes.object.isRequired,
 
         //from accordion decorator
         openItemId: PropTypes.string,
         toggleItem: PropTypes.func
     };
 
-    componentDidMount() {
+    /*componentDidMount() {
         this.props.fetchData && this.props.fetchData()
-    }
+    }*/
 
     render() {
-        const { articles, openItemId, toggleItem } = this.props
-        console.log('---', 'rendering ArticlList')
-        const articleElements = articles.map(article =>
-            <li key = {article.id} className = "test__article-list--item">
-                <Article
-                    article = {article}
-                    onButtonClick = {toggleItem}
-                    isOpen = {openItemId === article.id}
-                />
-            </li>
-        )
+        const { articles, openItemId, toggleItem } = this.props;
+        console.log('---', 'rendering ArticleList');
+        const articleElements = Object.keys(articles).map((articleId) => {
+          return (<li key = {articleId} className = "test__article-list--item">
+            <Article
+              article = {articles[articleId]}
+              onButtonClick = {toggleItem}
+              isOpen = {openItemId === articleId}
+            />
+          </li>);
+        });
         return (
             <ul>
                 {articleElements}
@@ -43,4 +43,4 @@ export default connect(state => {
     return {
         articles: filtratedArticles(state)
     }
-})(accordion(ArticleList))
\ No newline at end of file
+})(accordion(ArticleList))
diff --git a/src/components/article/index.js b/src/components/article/index.js
index 96261d8..c9dab3a 100644
--- a/src/components/article/index.js
+++ b/src/components/article/index.js
@@ -1,4 +1,4 @@
-import React, {PureComponent, Fragment} from 'react'
+import React, {PureComponent, Fragment, Component} from 'react'
 import PropTypes from 'prop-types'
 import CSSTransition from 'react-addons-css-transition-group'
 import { connect } from 'react-redux'
@@ -6,7 +6,7 @@ import CommentList from '../comment-list'
 import { deleteArticle } from '../../AC'
 import './style.css'
 
-class Article extends PureComponent {
+class Article extends Component {
     state = {
         error: null
     }
@@ -18,8 +18,9 @@ class Article extends PureComponent {
 
     render() {
         if (this.state.error) return <h2>{this.state.error.message}</h2>
-
         const { isOpen, article, onButtonClick } = this.props
+        console.log('---Article is rendering');
+
         return (
             <Fragment>
                 <h2>
@@ -58,7 +59,7 @@ function getBody(article) {
     return (
         <section className = "test__article--body">
             {article.text}
-            <CommentList comments={article.comments}/>
+            <CommentList comments={article.comments} articleId={article.id}/>
         </section>
     )
 }
@@ -66,11 +67,8 @@ function getBody(article) {
 
 Article.propTypes = {
     isOpen: PropTypes.bool,
-    article: PropTypes.shape({
-        title: PropTypes.string.isRequired,
-        text: PropTypes.string
-    }).isRequired,
+    article: PropTypes.object.isRequired,
     onButtonClick: PropTypes.func
-}
+};
 
-export default connect(null, { deleteArticle })(Article)
\ No newline at end of file
+export default connect(null, { deleteArticle })(Article)
diff --git a/src/components/comment-list/index.js b/src/components/comment-list/index.js
index 91c4f08..f3db165 100644
--- a/src/components/comment-list/index.js
+++ b/src/components/comment-list/index.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import CSSTransition from 'react-addons-css-transition-group'
 import Comment from '../comment'
 import toggleOpen from '../../decorators/toggleOpen'
+import AddNewCommentForm from '../add-new-comment-form';
 import './style.css'
 
 class CommentList extends Component {
@@ -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() {
@@ -45,6 +47,7 @@ class CommentList extends Component {
                         ? this.getComments()
                         : <h3 className="test__comment-list--empty">No comments yet</h3>
                 }
+                <AddNewCommentForm articleId={this.props.articleId} />
             </div>
         )
     }
@@ -59,9 +62,10 @@ class CommentList extends Component {
                         </li>)
                 }
             </ul>
+
         )
     }
 }
 
 
-export default toggleOpen(CommentList)
\ No newline at end of file
+export default toggleOpen(CommentList)
diff --git a/src/components/filters/select.js b/src/components/filters/select.js
index 1a91857..cee2be8 100644
--- a/src/components/filters/select.js
+++ b/src/components/filters/select.js
@@ -8,17 +8,17 @@ 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 { articles, selected } = this.props;
+        const options = Object.keys(articles).map(articleId => ({
+            label: articles[articleId].title,
+            value: articleId
+        }));
 
         return <Select
             options={options}
@@ -32,4 +32,4 @@ class SelectFilter extends Component {
 export default connect(state => ({
     selected: state.filters.selected,
     articles: state.articles
-}), { changeSelection })(SelectFilter)
\ No newline at end of file
+}), { changeSelection })(SelectFilter)
diff --git a/src/constants/index.js b/src/constants/index.js
index a2f0a80..1960c34 100644
--- a/src/constants/index.js
+++ b/src/constants/index.js
@@ -1,6 +1,9 @@
-export const INCREMENT = 'INCREMENT'
+export const INCREMENT = 'INCREMENT';
 
-export const DELETE_ARTICLE = 'DELETE_ARTICLE'
+export const DELETE_ARTICLE = 'DELETE_ARTICLE';
+export const UPDATE_ARTICLE_COMMENTS = 'UPDATE_ARTICLE_COMMENTS';
 
-export const CHANGE_SELECTION = 'CHANGE_SELECTION'
-export const CHANGE_DATE_RANGE = 'CHANGE_DATE_RANGE'
\ No newline at end of file
+export const CHANGE_SELECTION = 'CHANGE_SELECTION';
+export const CHANGE_DATE_RANGE = 'CHANGE_DATE_RANGE';
+
+export const ADD_NEW_COMMENT = 'ADD_NEW_COMMENT';
diff --git a/src/middlewares/handle-new-comment.js b/src/middlewares/handle-new-comment.js
new file mode 100644
index 0000000..adfd2a8
--- /dev/null
+++ b/src/middlewares/handle-new-comment.js
@@ -0,0 +1,16 @@
+import { ADD_NEW_COMMENT } from '../constants';
+import { updateArticleComments } from '../AC';
+import randomString from 'randomstring';
+
+export const handleNewComment = (store) => (next) => (action) => {
+  if (action.type === ADD_NEW_COMMENT) {
+    let newAction = {...action};
+    let commentId = randomString.generate(12);
+    newAction.payload.data.id = commentId;
+    let result = next(newAction);
+    store.dispatch(updateArticleComments(newAction.payload.articleId, commentId));
+    return result;
+  }
+
+  return next(action);
+};
diff --git a/src/reducer/articles.js b/src/reducer/articles.js
index 1c2e629..a4c3bbb 100644
--- a/src/reducer/articles.js
+++ b/src/reducer/articles.js
@@ -1,14 +1,33 @@
-import { normalizedArticles as defaultArticles } from '../fixtures'
-import { DELETE_ARTICLE } from '../constants'
+import { normalizedArticles  } from '../fixtures';
+import { DELETE_ARTICLE, UPDATE_ARTICLE_COMMENTS } from '../constants';
+
+const defaultArticles = normalizedArticles.reduce((acc, article) => {
+   return {
+     ...acc,
+     [article.id]: article
+   }
+}, {});
 
 export default (articlesState = defaultArticles, action) => {
-    const { type, payload } = action
+    const { type, payload } = action;
 
     switch (type) {
         case DELETE_ARTICLE:
-            return articlesState.filter(article => article.id !== payload.id)
+          let articlesForDelete = {...articlesState};
+          delete articlesForDelete[payload.id];
+          return articlesForDelete;
+
+      case UPDATE_ARTICLE_COMMENTS:
+          let articlesForUpdate = {...articlesState};
+          let article = articlesForUpdate[payload.articleId];
+          if (!article.comments) {
+            article.comments = [];
+          }
+          article.comments.push(payload.commentId);
+          articlesForUpdate[payload.articleId] = article;
+          return articlesForUpdate;
 
         default:
             return articlesState
     }
-}
\ No newline at end of file
+}
diff --git a/src/reducer/comments.js b/src/reducer/comments.js
index 0bd398a..901bb25 100644
--- a/src/reducer/comments.js
+++ b/src/reducer/comments.js
@@ -1,18 +1,22 @@
-import {} from '../constants'
+import { ADD_NEW_COMMENT } from '../constants'
 import { normalizedComments } from '../fixtures'
 
 const defaultComments = normalizedComments.reduce((acc, comment) => ({
     ...acc,
     [comment.id]: comment
-})
-, {})
+}), {});
 
 export default (commentsState = defaultComments, action) => {
-    const {type} = action
+    const { type, payload } = action;
 
     switch (type) {
-
+      case ADD_NEW_COMMENT:
+            let commentData = payload.data;
+            return {
+                ...commentsState,
+                [commentData.id]: commentData
+            };
         default:
             return commentsState
     }
-}
\ No newline at end of file
+}
diff --git a/src/selectors/index.js b/src/selectors/index.js
index d503ae7..c02ca1d 100644
--- a/src/selectors/index.js
+++ b/src/selectors/index.js
@@ -1,19 +1,25 @@
 import { createSelector } from 'reselect'
 
-const articleListSelector = state => state.articles
-const commentsSelector = state => state.comments
-const filtersSelector = state => state.filters
-const idSelector = (_, props) => props.id
+const articleListSelector = state => state.articles;
+const commentsSelector = state => state.comments;
+const filtersSelector = state => state.filters;
+const idSelector = (_, props) => props.id;
 
 export const filtratedArticles = createSelector(articleListSelector, filtersSelector, (articles, filters) => {
-    const {selected, dateRange: {from, to}} = filters
-    console.log('---', 'recomputing filtration')
+    const {selected, dateRange: {from, to}} = filters;
+    console.log('---', 'recomputing filtration');
 
-    return articles.filter(article => {
-        const published = Date.parse(article.date)
-        return (!selected.length || selected.includes(article.id)) &&
-            (!from || !to || (published > from && published < to))
-    })
-})
+    return Object.values(articles).filter(article => {
+        const published = Date.parse(article.date);
+        return (!selected.length
+          || selected.includes(article.id))
+          && (!from || !to || (published > from && published < to));
+    }).reduce((acc, article) => {
+      return {
+        ...acc,
+        [article.id]: article
+      }
+    }, {})
+});
 
-export const createCommentSelector = () => createSelector(commentsSelector, idSelector, (comments, id) => comments[id])
\ No newline at end of file
+export const createCommentSelector = () => createSelector(commentsSelector, idSelector, (comments, id) => comments[id])
diff --git a/src/store/index.js b/src/store/index.js
index e3ddcc8..0e79c8d 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,12 +1,14 @@
-import { createStore, applyMiddleware } from 'redux'
-import reducer from '../reducer'
-import logger from '../middlewares/logger'
+import { createStore, applyMiddleware } from 'redux';
+import reducer from '../reducer';
+//import logger from '../middlewares/logger';
+import { handleNewComment } from '../middlewares/handle-new-comment';
+import { logger } from 'redux-logger';
 
-const enhancer = applyMiddleware(logger)
+const enhancer = applyMiddleware(logger, handleNewComment);
 
-const store = createStore(reducer, enhancer)
+const store = createStore(reducer, enhancer);
 
 //dev only, no need in prod
-window.store = store
+window.store = store;
 
-export default store
\ No newline at end of file
+export default store;
diff --git a/yarn.lock b/yarn.lock
index 412baec..459c91a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -215,6 +215,10 @@ array-union@^1.0.1:
   dependencies:
     array-uniq "^1.0.1"
 
+array-uniq@1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/array-uniq/-/array-uniq-1.0.2.tgz#5fcc373920775723cfd64d65c64bef53bf9eba6d"
+
 array-uniq@^1.0.1:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/array-uniq/-/array-uniq-1.0.3.tgz#af6ac877a25cc7f74e058894753858dfdb24fdb6"
@@ -1782,6 +1786,10 @@ decamelize@^1.0.0, decamelize@^1.1.1, decamelize@^1.1.2:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
 
+deep-diff@^0.3.5:
+  version "0.3.8"
+  resolved "https://registry.yarnpkg.com/deep-diff/-/deep-diff-0.3.8.tgz#c01de63efb0eec9798801d40c7e0dae25b582c84"
+
 deep-equal@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.0.1.tgz#f5d260292b660e084eff4cdbc9f08ad3247448b5"
@@ -5289,6 +5297,12 @@ randomfill@^1.0.3:
     randombytes "^2.0.5"
     safe-buffer "^5.1.0"
 
+randomstring@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/randomstring/-/randomstring-1.1.5.tgz#6df0628f75cbd5932930d9fe3ab4e956a18518c3"
+  dependencies:
+    array-uniq "1.0.2"
+
 range-parser@^1.0.3, range-parser@~1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.0.tgz#f49be6b487894ddc40dcc94a322f611092e00d5e"
@@ -5552,6 +5566,12 @@ reduce-function-call@^1.0.1:
   dependencies:
     balanced-match "^0.4.2"
 
+redux-logger@^3.0.6:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/redux-logger/-/redux-logger-3.0.6.tgz#f7555966f3098f3c88604c449cf0baf5778274bf"
+  dependencies:
+    deep-diff "^0.3.5"
+
 redux@^3.7.2:
   version "3.7.2"
   resolved "https://registry.yarnpkg.com/redux/-/redux-3.7.2.tgz#06b73123215901d25d065be342eb026bc1c8537b"

From 0452ec0f99da5aeea2d6a062062c9fd84d4b5434 Mon Sep 17 00:00:00 2001
From: jekahm <yevhen.tuchak@gmail.com>
Date: Sun, 11 Mar 2018 20:04:08 +0300
Subject: [PATCH 3/3] Added 'commentsLength' prop to Article component in order
 to update this one while adding the comment.

---
 src/components/article-list/index.js |  1 +
 src/components/article/index.js      | 11 ++++++++++-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/components/article-list/index.js b/src/components/article-list/index.js
index 0b9436d..6da912b 100644
--- a/src/components/article-list/index.js
+++ b/src/components/article-list/index.js
@@ -24,6 +24,7 @@ export class ArticleList extends Component {
         const articleElements = Object.keys(articles).map((articleId) => {
           return (<li key = {articleId} className = "test__article-list--item">
             <Article
+              commentsLength = {articles[articleId].comments ? articles[articleId].comments.length : 0}
               article = {articles[articleId]}
               onButtonClick = {toggleItem}
               isOpen = {openItemId === articleId}
diff --git a/src/components/article/index.js b/src/components/article/index.js
index c9dab3a..6de10cb 100644
--- a/src/components/article/index.js
+++ b/src/components/article/index.js
@@ -6,11 +6,20 @@ import CommentList from '../comment-list'
 import { deleteArticle } from '../../AC'
 import './style.css'
 
-class Article extends Component {
+class Article extends PureComponent {
     state = {
         error: null
     }
 
+    /*componentWillReceiveProps(nextProps) {
+        console.log('WillReceive Props => ', nextProps);
+    }*/
+
+    /*shouldComponentUpdate(nextProps, nextState) {
+        console.log('ShouldUpdate => ', nextProps);
+        return true;
+    }*/
+
     componentDidCatch(error) {
         console.log('---', error)
         this.setState({ error })