Ht3 opanasiuk

src/components/article.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react'
+import CommponentsList from './comments'
 
 class Article extends Component {
   render() {
@@ -17,7 +18,7 @@ class Article extends Component {
   getBody() {
     const { isOpen, article } = this.props
     if (!isOpen) return null
-    return <section>{article.text}</section>
+    return <CommponentsList article={article} />
   }
 }
 

src/components/comments.js

@@ -0,0 +1,36 @@
+import React, { Component } from 'react'
+
+class CommponentsList extends Component {
+  state = {
+    show: false
+  }
+
+  handleToggleShow = () => {
+    this.setState({ show: !this.state.show })
+  }
+  render() {
+    const { article } = this.props
+    const { show } = this.state
+    return (
+      <div>
+        <section>{article.text}</section>
+        <button onClick={this.handleToggleShow}>{show ? 'Hide comments' : 'Open comments'}</button>
+        {show && (
+          <div>
+            <h4>Comments:</h4>
+            <ul>
+              {article.comments.map((comment) => (
+                <li key={comment.id}>
+                  <p>User name: {comment.user}</p>
+                  <p>{comment.text}</p>
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+      </div>
+    )
+  }
+}
+
+export default CommponentsList

src/decorators/componentShowHOC.js

@@ -0,0 +1,39 @@
+import React, { Component } from 'react'
+
+// export default function (WrappedComponent) {
+//   return class ComponentShowHOC extends Component {
+//     state = {
+//       show: false
+//     }
+//     handleToggleShow = () => this.setState({ show: !this.state.show })
+
+//     render() {
+//       return (
+//         <WrappedComponent
+//           {...this.props}
+//           show={this.state.show}
+//           handleToggleShow={this.handleToggleShow}
+//         />
+//       )
+//     }
+//   }
+// }
+
+export default (OriginalComponent) =>
+  class ComponentShowHOC extends Component {
+    state = {
+      show: false
+    }
+
+    handleToggleShow = () => this.setState({ show: !this.state.show })
+
+    render() {
+      return (
+        <OriginalComponent
+          {...this.props}
+          show={this.state.show}
+          handleToggleShow={this.handleToggleShow}
+        />
+      )
+    }
+  }