HT-2

src/components/ArticleList.js

@@ -1,17 +1,21 @@
 import React, {Component} from 'react'
 import Article from './Article'
+import accordeon from '../decorators/accordeon'
+import PropTypes from 'prop-types'
 
-export default class ArticleList extends Component {
-    state = {
-        openArticleId: null
+class ArticleList extends Component {
+    static propTypes = {
+        articles: PropTypes.array,
+        openArticleId: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]).isRequired,
+        toggleOpenArticle: PropTypes.func.isRequired
     }
-
+    
     render() {
         const articleElements = this.props.articles.map(article => <li key={article.id}>
             <Article
                 article = {article}
-                isOpen = {article.id === this.state.openArticleId}
-                toggleOpen = {this.toggleOpenArticle(article.id)}
+                isOpen = {article.id === this.props.openArticleId}
+                toggleOpen = {this.props.toggleOpenArticle(article.id)}
             />
         </li>)
 
@@ -21,8 +25,6 @@ export default class ArticleList extends Component {
             </ul>
         )
     }
+}
 
-    toggleOpenArticle = openArticleId => ev => {
-        this.setState({ openArticleId })
-    }
-}
+export default accordeon(ArticleList)

src/components/CommentList.js

@@ -1,6 +1,7 @@
 import React, {Component} from 'react'
 import Comment from './Comment'
 import toggleOpen from '../decorators/toggleOpen'
+import PropTypes from 'prop-types'
 
 function CommentList({comments = [], isOpen, toggleOpen}) {
     const text = isOpen ? 'hide comments' : 'show comments'
@@ -11,6 +12,9 @@ function CommentList({comments = [], isOpen, toggleOpen}) {
         </div>
     )
 }
+CommentList.propTypes = {
+    toggleOpen: PropTypes.func
+}
 
 function getBody({comments, isOpen}) {
     if (!isOpen) return null
@@ -23,4 +27,4 @@ function getBody({comments, isOpen}) {
     )
 }
 
-export default toggleOpen(CommentList)
+export default toggleOpen(CommentList)

src/decorators/accordeon.js

@@ -0,0 +1,21 @@
+import React, {Component as ReactComponent} from 'react'
+
+export default (OriginalComponent) => class WrappedComponent extends ReactComponent {    
+    state = {
+        openArticleId: null
+    }
+
+    render() {
+        return <OriginalComponent {...{...this.props, ...this.state, toggleOpenArticle: this.toggleOpenArticle}}/>
+    }
+
+    toggleOpenArticle = openArticleId => ev => {
+        let { openArticleId: openedId } = this.state;
+
+        if (openedId === openArticleId) {
+            this.setState({openArticleId: null})
+        } else {
+            this.setState({ openArticleId })
+        }
+    }
+}