From 0410ae14f88175996de8249e59579e9948ab9053 Mon Sep 17 00:00:00 2001
From: Alexander Martynov <mas-login@yandex.ru>
Date: Fri, 9 Mar 2018 15:33:04 +0300
Subject: [PATCH 1/4] HT4.1

---
 src/components/article/index.js      |  6 +++++-
 src/components/comment-list/index.js | 12 ++++++++++--
 src/components/counter.js            |  2 +-
 src/reducer/select.js                |  7 +++++++
 4 files changed, 23 insertions(+), 4 deletions(-)
 create mode 100644 src/reducer/select.js

diff --git a/src/components/article/index.js b/src/components/article/index.js
index 96261d8..66a12c9 100644
--- a/src/components/article/index.js
+++ b/src/components/article/index.js
@@ -48,6 +48,10 @@ class Article extends PureComponent {
         )
     }
 
+    handleAdd = () => {
+
+    }
+
     handleDelete = () => {
         const { deleteArticle, article } = this.props
         deleteArticle(article.id)
@@ -73,4 +77,4 @@ Article.propTypes = {
     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..d49b2a9 100644
--- a/src/components/comment-list/index.js
+++ b/src/components/comment-list/index.js
@@ -1,4 +1,4 @@
-import React, {Component} from 'react'
+import React, {Component, Fragment} from 'react'
 import PropTypes from 'prop-types'
 import CSSTransition from 'react-addons-css-transition-group'
 import Comment from '../comment'
@@ -30,6 +30,14 @@ class CommentList extends Component {
                 >
                     {this.getBody()}
                 </CSSTransition>
+
+                { isOpen && <Fragment>
+                    <textarea style={{ width: '100%'}} />
+                    <br/>
+                    <button onClick = {this.handleAdd}>
+                        add comment
+                    </button>
+                </Fragment> }
             </div>
         )
     }
@@ -64,4 +72,4 @@ class CommentList extends Component {
 }
 
 
-export default toggleOpen(CommentList)
\ No newline at end of file
+export default toggleOpen(CommentList)
diff --git a/src/components/counter.js b/src/components/counter.js
index b49ee19..345c5f2 100644
--- a/src/components/counter.js
+++ b/src/components/counter.js
@@ -29,4 +29,4 @@ const mapStateToProps = state => ({
     count: state.counter
 })
 
-export default connect(mapStateToProps)(Counter)
\ No newline at end of file
+export default connect(mapStateToProps)(Counter)
diff --git a/src/reducer/select.js b/src/reducer/select.js
new file mode 100644
index 0000000..a1efaef
--- /dev/null
+++ b/src/reducer/select.js
@@ -0,0 +1,7 @@
+import { CHANGE_SELECTED } from '../constants'
+
+export default (selectState = null, action) => {
+    const { type, payload } = action
+
+    return type === CHANGE_SELECTED ? payload.selection : selectState
+}

From bb05f8e1e0876c53bf09db848655b0c6a76db8f0 Mon Sep 17 00:00:00 2001
From: Alexander Martynov <mas-login@yandex.ru>
Date: Fri, 9 Mar 2018 16:04:32 +0300
Subject: [PATCH 2/4] HT4.2

---
 src/components/article-list/index.js | 12 ++++++------
 src/components/article/index.js      | 12 +++++++++++-
 src/components/filters/select.js     | 10 +++++-----
 src/reducer/articles.js              | 10 ++++++++--
 src/selectors/index.js               | 11 +++++++----
 5 files changed, 37 insertions(+), 18 deletions(-)

diff --git a/src/components/article-list/index.js b/src/components/article-list/index.js
index f2cebc8..c5b5fdf 100644
--- a/src/components/article-list/index.js
+++ b/src/components/article-list/index.js
@@ -20,13 +20,13 @@ export class ArticleList extends Component {
 
     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">
+        console.log('---', 'rendering ArticlList', articles)
+        const articleElements = articles.map(id =>
+            <li key = {id} className = "test__article-list--item">
                 <Article
-                    article = {article}
+                    id = {id}
                     onButtonClick = {toggleItem}
-                    isOpen = {openItemId === article.id}
+                    isOpen = {openItemId === id}
                 />
             </li>
         )
@@ -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 66a12c9..6ec65e8 100644
--- a/src/components/article/index.js
+++ b/src/components/article/index.js
@@ -4,6 +4,7 @@ import CSSTransition from 'react-addons-css-transition-group'
 import { connect } from 'react-redux'
 import CommentList from '../comment-list'
 import { deleteArticle } from '../../AC'
+import { createArticleSelector } from '../../selectors'
 import './style.css'
 
 class Article extends PureComponent {
@@ -77,4 +78,13 @@ Article.propTypes = {
     onButtonClick: PropTypes.func
 }
 
-export default connect(null, { deleteArticle })(Article)
+const createMapStateToProps = () => {
+    const articleSelector = createArticleSelector()
+
+    return (state, ownProps) => ({
+        article: articleSelector(state, ownProps)
+    })
+}
+
+
+export default connect(createMapStateToProps, { deleteArticle })(Article)
diff --git a/src/components/filters/select.js b/src/components/filters/select.js
index 1a91857..c8dccb3 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(id => ({
+            label: articles[id].title,
+            value: id
         }))
 
         return <Select
@@ -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/reducer/articles.js b/src/reducer/articles.js
index 1c2e629..70de103 100644
--- a/src/reducer/articles.js
+++ b/src/reducer/articles.js
@@ -1,6 +1,12 @@
-import { normalizedArticles as defaultArticles } from '../fixtures'
+import normalizedArticles from '../fixtures'
 import { DELETE_ARTICLE } from '../constants'
 
+const defaultArticles = normalizedArticles.reduce((acc, article) => ({
+    ...acc,
+    [article.id]: article
+})
+, {})
+
 export default (articlesState = defaultArticles, action) => {
     const { type, payload } = action
 
@@ -11,4 +17,4 @@ export default (articlesState = defaultArticles, action) => {
         default:
             return articlesState
     }
-}
\ No newline at end of file
+}
diff --git a/src/selectors/index.js b/src/selectors/index.js
index d503ae7..42e19a9 100644
--- a/src/selectors/index.js
+++ b/src/selectors/index.js
@@ -1,19 +1,22 @@
 import { createSelector } from 'reselect'
 
-const articleListSelector = state => state.articles
+const articlesSelector = 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) => {
+export const filtratedArticles = createSelector(articlesSelector, filtersSelector, (articles, filters) => {
     const {selected, dateRange: {from, to}} = filters
     console.log('---', 'recomputing filtration')
 
-    return articles.filter(article => {
+    return Object.keys(articles).filter(id => {
+        const article = articles[id]
         const published = Date.parse(article.date)
         return (!selected.length || selected.includes(article.id)) &&
             (!from || !to || (published > from && published < to))
     })
 })
 
-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])
+
+export const createArticleSelector = () => createSelector(articlesSelector, idSelector, (articles, id) => articles[id])

From 3b643dd4c58d0493bbc73aa799e2262e556effe3 Mon Sep 17 00:00:00 2001
From: Alexander Martynov <mas-login@yandex.ru>
Date: Fri, 9 Mar 2018 17:16:13 +0300
Subject: [PATCH 3/4] HT4.3

---
 src/middlewares/uuid.js | 14 ++++++++++++++
 src/reducer/index.js    |  2 +-
 src/store/index.js      |  5 +++--
 3 files changed, 18 insertions(+), 3 deletions(-)
 create mode 100644 src/middlewares/uuid.js

diff --git a/src/middlewares/uuid.js b/src/middlewares/uuid.js
new file mode 100644
index 0000000..bffa20c
--- /dev/null
+++ b/src/middlewares/uuid.js
@@ -0,0 +1,14 @@
+export default store => next => action => {
+  let uuid
+
+  function s4() {
+    return Math.floor((1 + Math.random()) * 0x10000)
+      .toString(16)
+      .substring(1);
+  }
+  uuid = s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
+
+  action.payload.uuid = uuid;
+
+  next(action)
+}
diff --git a/src/reducer/index.js b/src/reducer/index.js
index c2bbd36..80d8a03 100644
--- a/src/reducer/index.js
+++ b/src/reducer/index.js
@@ -7,4 +7,4 @@ import filters from './filters'
 export default combineReducers({
     counter: counterReducer,
     articles, comments, filters
-})
\ No newline at end of file
+})
diff --git a/src/store/index.js b/src/store/index.js
index e3ddcc8..fa02f42 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,12 +1,13 @@
 import { createStore, applyMiddleware } from 'redux'
 import reducer from '../reducer'
 import logger from '../middlewares/logger'
+import uuid from '../middlewares/uuid'
 
-const enhancer = applyMiddleware(logger)
+const enhancer = applyMiddleware(logger, uuid)
 
 const store = createStore(reducer, enhancer)
 
 //dev only, no need in prod
 window.store = store
 
-export default store
\ No newline at end of file
+export default store

From b7a6ea1a0627e97d774bee68ea8e5334856e9c46 Mon Sep 17 00:00:00 2001
From: Alexander Martynov <mas-login@yandex.ru>
Date: Sun, 11 Mar 2018 20:38:39 +0300
Subject: [PATCH 4/4] =?UTF-8?q?=D0=BA=D0=B0=D0=BA=20=D0=BF=D0=BE=D0=BB?=
 =?UTF-8?q?=D1=83=D1=87=D0=B8=D1=82=D1=8C=20=D1=82=D0=B5=D0=BA=D1=83=D1=89?=
 =?UTF-8?q?=D1=83=D1=8E=20=D1=81=D1=82=D0=B0=D1=82=D1=8C=D1=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/AC/index.js                      |  9 ++++++++-
 src/components/comment-list/index.js | 29 ++++++++++++++++++++++++++--
 src/constants/index.js               |  3 ++-
 src/fixtures.js                      |  6 +++---
 src/reducer/articles.js              | 10 ++++++++--
 src/reducer/comments.js              | 12 ++++++++++--
 6 files changed, 58 insertions(+), 11 deletions(-)

diff --git a/src/AC/index.js b/src/AC/index.js
index dda2dd6..ee1f241 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, ADD_COMMENT, CHANGE_DATE_RANGE, CHANGE_SELECTION} from '../constants'
 
 export function increment() {
     return {
@@ -26,3 +26,10 @@ export function changeSelection(selected) {
         payload: { selected }
     }
 }
+
+export function addComment(text) {
+    return {
+        type: ADD_COMMENT,
+        payload: { text }
+    }
+}
diff --git a/src/components/comment-list/index.js b/src/components/comment-list/index.js
index d49b2a9..f43a08c 100644
--- a/src/components/comment-list/index.js
+++ b/src/components/comment-list/index.js
@@ -3,10 +3,13 @@ import PropTypes from 'prop-types'
 import CSSTransition from 'react-addons-css-transition-group'
 import Comment from '../comment'
 import toggleOpen from '../../decorators/toggleOpen'
+import { addComment } from '../../AC'
+import { connect } from 'react-redux'
 import './style.css'
 
 class CommentList extends Component {
     static defaultProps = {
+        comment: '',
         comments: []
     }
 
@@ -17,6 +20,19 @@ class CommentList extends Component {
         toggleOpen: PropTypes.func
     }
 
+    handleAdd = () => {
+        const { comment } = this.state
+        const { addComment } = this.props
+        console.log('add', comment)
+        addComment(comment)
+        this.setState({comment: ''})
+    }
+
+    handleChange = (event) => {
+      console.log('change', event.target.value)
+      this.setState({comment: event.target.value})
+    }
+
     render() {
         const {isOpen, toggleOpen} = this.props
         const text = isOpen ? 'hide comments' : 'show comments'
@@ -32,7 +48,7 @@ class CommentList extends Component {
                 </CSSTransition>
 
                 { isOpen && <Fragment>
-                    <textarea style={{ width: '100%'}} />
+                    <textarea onChange = {this.handleChange} style={{ width: '100%'}} />
                     <br/>
                     <button onClick = {this.handleAdd}>
                         add comment
@@ -58,6 +74,7 @@ class CommentList extends Component {
     }
 
     getComments() {
+      console.log('comments', this.props.comments)
         return (
             <ul>
                 {
@@ -71,5 +88,13 @@ class CommentList extends Component {
     }
 }
 
+const createMapStateToProps = (state, ownProps) => {
+  console.log('---', 'comnent list connect')
+  console.log('---', 'ownProps', ownProps)
+  return {
+      comments: ownProps.comments
+  }
+}
 
-export default toggleOpen(CommentList)
+// export default toggleOpen(CommentList)
+export default toggleOpen(connect(createMapStateToProps, { addComment })(CommentList))
diff --git a/src/constants/index.js b/src/constants/index.js
index a2f0a80..88cc994 100644
--- a/src/constants/index.js
+++ b/src/constants/index.js
@@ -1,6 +1,7 @@
 export const INCREMENT = 'INCREMENT'
 
 export const DELETE_ARTICLE = 'DELETE_ARTICLE'
+export const ADD_COMMENT = 'ADD_COMMENT'
 
 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'
diff --git a/src/fixtures.js b/src/fixtures.js
index 97eed41..ca39cb3 100644
--- a/src/fixtures.js
+++ b/src/fixtures.js
@@ -85,7 +85,7 @@ export const normalizedArticles = [
     {
         "id": "56c782f18990ecf954f6e027",
         "date": "2016-06-09T15:03:23.000Z",
-        "title": "Commodo qui incididunt",
+        "title": "Commodo qui incididunt 2",
         "text": "Commodo qui incididunt ex ut ea nulla et eu aliquip duis. Aute deserunt excepteur ullamco fugiat sunt aliquip exercitation do sint incididunt. Amet consectetur sint irure reprehenderit fugiat amet mollit. In commodo mollit ullamco cillum pariatur eiusmod cillum aute mollit. Culpa non sint eiusmod ad dolor velit dolore voluptate do adipisicing. Cupidatat sint est magna officia qui magna eu elit qui excepteur fugiat duis ex labore.\n\nAliquip veniam ad reprehenderit mollit exercitation id enim ut exercitation. Esse irure ipsum minim laborum reprehenderit irure ut. Tempor excepteur nisi nulla nostrud amet id cillum. Sint velit sint officia aliqua sint quis deserunt.\n\nAliquip dolor cillum deserunt enim nulla dolor amet irure cupidatat commodo laboris id aliqua. Labore aliqua adipisicing Lorem id adipisicing. Ad cupidatat et do anim ex commodo elit magna ad consequat. Nostrud sit eu laborum ut consequat fugiat aute culpa. Lorem tempor quis sunt ad consequat excepteur est. Enim voluptate cillum Lorem ex fugiat ea qui. Irure aute magna dolore eiusmod minim non ad anim dolore sint et.",
         "comments": ["qwerqwer", "lkjhsdlfkg", "zxcvzcxvzxcv", "fghjfghjfghj", "ertyoertywte"]
     },
@@ -137,7 +137,7 @@ export default [
     {
         "id": "56c782f18990ecf954f6e027",
         "date": "2016-06-09T15:03:23.000Z",
-        "title": "Commodo qui incididunt",
+        "title": "Commodo qui incididunt 4",
         "text": "Commodo qui incididunt ex ut ea nulla et eu aliquip duis. Aute deserunt excepteur ullamco fugiat sunt aliquip exercitation do sint incididunt. Amet consectetur sint irure reprehenderit fugiat amet mollit. In commodo mollit ullamco cillum pariatur eiusmod cillum aute mollit. Culpa non sint eiusmod ad dolor velit dolore voluptate do adipisicing. Cupidatat sint est magna officia qui magna eu elit qui excepteur fugiat duis ex labore.\n\nAliquip veniam ad reprehenderit mollit exercitation id enim ut exercitation. Esse irure ipsum minim laborum reprehenderit irure ut. Tempor excepteur nisi nulla nostrud amet id cillum. Sint velit sint officia aliqua sint quis deserunt.\n\nAliquip dolor cillum deserunt enim nulla dolor amet irure cupidatat commodo laboris id aliqua. Labore aliqua adipisicing Lorem id adipisicing. Ad cupidatat et do anim ex commodo elit magna ad consequat. Nostrud sit eu laborum ut consequat fugiat aute culpa. Lorem tempor quis sunt ad consequat excepteur est. Enim voluptate cillum Lorem ex fugiat ea qui. Irure aute magna dolore eiusmod minim non ad anim dolore sint et.",
         "comments": [
             {
@@ -269,4 +269,4 @@ export default [
         "text": "Commodo laborum sit nostrud reprehenderit cupidatat officia laboris. Ipsum minim culpa in enim. Voluptate dolor ea irure nisi incididunt enim magna.\n\nCupidatat quis cillum velit culpa tempor esse irure nostrud ea consectetur officia fugiat irure qui. Enim quis officia do in. Velit veniam ipsum consequat aliqua duis voluptate. Minim nisi ex aute ad.\n\nNisi Lorem ex tempor adipisicing labore. Quis occaecat fugiat pariatur labore culpa cillum laboris. Labore occaecat ut laborum sit ex do sit. Deserunt consectetur elit aute laboris est deserunt officia ullamco sit laboris officia aliquip. Aliqua ut sunt nostrud voluptate excepteur quis incididunt Lorem ut."
     }
 
-]
\ No newline at end of file
+]
diff --git a/src/reducer/articles.js b/src/reducer/articles.js
index 70de103..f654788 100644
--- a/src/reducer/articles.js
+++ b/src/reducer/articles.js
@@ -1,5 +1,5 @@
-import normalizedArticles from '../fixtures'
-import { DELETE_ARTICLE } from '../constants'
+import {normalizedArticles} from '../fixtures'
+import { DELETE_ARTICLE, ADD_COMMENT } from '../constants'
 
 const defaultArticles = normalizedArticles.reduce((acc, article) => ({
     ...acc,
@@ -10,7 +10,13 @@ const defaultArticles = normalizedArticles.reduce((acc, article) => ({
 export default (articlesState = defaultArticles, action) => {
     const { type, payload } = action
 
+    console.log('ARTICLES', articlesState)
     switch (type) {
+        case ADD_COMMENT:
+            let id = Object.keys(articlesState)[0]
+            articlesState[id].comments.push(action.payload.uuid)
+            return articlesState
+
         case DELETE_ARTICLE:
             return articlesState.filter(article => article.id !== payload.id)
 
diff --git a/src/reducer/comments.js b/src/reducer/comments.js
index 0bd398a..b9503ae 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 } from '../fixtures'
 
 const defaultComments = normalizedComments.reduce((acc, comment) => ({
@@ -11,8 +11,16 @@ export default (commentsState = defaultComments, action) => {
     const {type} = action
 
     switch (type) {
+        case ADD_COMMENT:
+            let comment = {}
+            comment['id'] = action.payload.uuid
+            comment['text'] = action.payload.text
+            comment['user'] = 'USER1'
+            commentsState[action.payload.uuid] = comment
+            console.log('COMMENT STATE', commentsState)
+            return commentsState
 
         default:
             return commentsState
     }
-}
\ No newline at end of file
+}