From 1e4128f3516a87ca78047fd7ec4e1279863c7109 Mon Sep 17 00:00:00 2001
From: asapovk <asapovk@gmail.com>
Date: Sun, 18 Jun 2017 15:33:41 +0300
Subject: [PATCH 1/3] homework No1 is complete

---
 src/Article.js     |  9 +++++++--
 src/Comment.js     |  6 ++++++
 src/CommentList.js | 38 ++++++++++++++++++++++++++++++++++++++
 3 files changed, 51 insertions(+), 2 deletions(-)
 create mode 100644 src/Comment.js
 create mode 100644 src/CommentList.js

diff --git a/src/Article.js b/src/Article.js
index c263495..e623b79 100644
--- a/src/Article.js
+++ b/src/Article.js
@@ -1,4 +1,5 @@
 import React, {Component} from 'react'
+import CommentList from './CommentList'
 
 export default class Article extends Component {
     constructor(props) {
@@ -26,7 +27,11 @@ export default class Article extends Component {
     getBody() {
         if (!this.state.isOpen) return null
         const {article} = this.props
-        return <section>{article.text}</section>
+        return (<div>
+                  <section>{article.text}</section>
+                <CommentList comments={this.props.article.comments}/>
+                </div>
+              )
     }
 
     toggleOpen = (ev) => {
@@ -36,4 +41,4 @@ export default class Article extends Component {
             isOpen: !this.state.isOpen
         })
     }
-}
\ No newline at end of file
+}
diff --git a/src/Comment.js b/src/Comment.js
new file mode 100644
index 0000000..85c496f
--- /dev/null
+++ b/src/Comment.js
@@ -0,0 +1,6 @@
+import React from 'react'
+
+export default function Comment (props) {
+  const comment = props.comment
+  return (<li><h4>{comment.user}</h4><p>{comment.text}</p></li>)
+}
diff --git a/src/CommentList.js b/src/CommentList.js
new file mode 100644
index 0000000..4f0bf85
--- /dev/null
+++ b/src/CommentList.js
@@ -0,0 +1,38 @@
+import React , {Component} from 'react'
+import Comment from './Comment'
+
+export default class CommentList extends Component  {
+  static defaultProps = {
+    comments: []
+  }
+  constructor(props) {
+    super(props)
+    this.state = {
+      isShown: false
+    }
+  }
+
+  toggleShowComments = (ev) => {
+    ev.preventDefault();
+    console.log('---', ev.nativeEvent)
+    //if(!this.state.isShown) return null
+    this.setState({isShown: !this.state.isShown})
+  }
+  showComments () {
+    if (this.state.isShown) {
+      const comments = this.props.comments;
+      const commentElements = comments.map(comment => <Comment key ={comment.id} comment = {comment}/>);
+      return  (<ul>{commentElements}</ul>)
+    }
+  }
+
+  render() {
+    const isShown = this.state.isShown;
+    return (
+      <div>
+        <button onClick={this.toggleShowComments}>{isShown ? 'show comments' : 'hide comments'}</button>
+        {this.showComments()}
+      </div>
+    )
+  }
+}

From 1636d7edc36bb261222fd1586054ef12e4b4ae7c Mon Sep 17 00:00:00 2001
From: Roman <kaboom.ua@gmail.com>
Date: Mon, 19 Jun 2017 12:14:15 +0300
Subject: [PATCH 2/3] Update toggleOpenArticle.js

---
 src/decorators/toggleOpenArticle.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/decorators/toggleOpenArticle.js b/src/decorators/toggleOpenArticle.js
index c8bd1f5..3b116a7 100644
--- a/src/decorators/toggleOpenArticle.js
+++ b/src/decorators/toggleOpenArticle.js
@@ -1,8 +1,10 @@
 import React, {Component as ReactComponent} from 'react'
 
+//WrappedComponent я называл чтоб легче понять было. Лучше выбирай более значущее название
 export default (OriginalComponent) => class WrappedComponent extends ReactComponent {
 
   state = {
+      //Не привязывайся к названиям сущностей, вся суть декораторов в универсальности. Сделай openItemId
       openArticleId: null
   }
 

From ec068613eb4e145f46bc8361ae00ca3e07f88810 Mon Sep 17 00:00:00 2001
From: Roman <kaboom.ua@gmail.com>
Date: Mon, 19 Jun 2017 12:14:53 +0300
Subject: [PATCH 3/3] Update ArticleList.js

---
 src/components/ArticleList.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/ArticleList.js b/src/components/ArticleList.js
index 8387b3c..2f3a0b8 100644
--- a/src/components/ArticleList.js
+++ b/src/components/ArticleList.js
@@ -2,6 +2,7 @@ import React, {Component} from 'react'
 import Article from './Article'
 import toggleOpenArticle from '../decorators/toggleOpenArticle'
 
+//еще propTypes нужны были
 class ArticleList extends Component {
     render() {
         const articleElements = this.props.articles.map(article => <li key={article.id}>