HT2

src/components/article-list.js

@@ -2,32 +2,15 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import Article from './article'
 import accordion from '../decorators/accordion'
-//import useAccordion from '../custom-hooks/accordion'
-
-/*
-export default function ArticleList({ articles, fetchAll }) {
-  const { openItemId, toggleOpenItem } = useAccordion()
-    useEffect(() => {
-        fetchAll()
-    })
-
-  const articleItems = articles.map((article) => (
-    <li key={article.id}>
-      <Article
-        article={article}
-        onBtnClick={toggleOpenItem(article.id)}
-        isOpen={article.id === openItemId}
-      />
-    </li>
-  ))
-
-  return <ul className="test--article-list__container">{articleItems}</ul>
-}
-*/
-
-//import AccodrionComponent from './accordion-component'
 
 class ArticleList extends Component {
+  static propTypes = {
+    fetchAll: PropTypes.func,
+    articles: PropTypes.array,
+    toggleOpenItem: PropTypes.func,
+    openItemId: PropTypes.number
+  }
+
   componentDidMount() {
     this.props.fetchAll && this.props.fetchAll()
   }

src/components/article-list.test.js

@@ -3,6 +3,7 @@ import Enzyme, { mount } from 'enzyme'
 import Adapter from 'enzyme-adapter-react-16'
 import ArticleList from './article-list'
 import articles from '../fixtures'
+import CommentList from './comment-list'
 
 Enzyme.configure({ adapter: new Adapter() })
 
@@ -31,9 +32,48 @@ describe('ArticleList', () => {
 
   it('should fetch all articles on mount', function() {
     const fn = jest.fn()
-
     mount(<ArticleList articles={articles} fetchAll={fn} />)
-
     expect(fn.mock.calls.length).toBe(1)
   })
 })
+
+describe('Article', () => {
+  it('after expand article it body should appear with button for expand comments with collapsed comments', () => {
+    const container = mount(<ArticleList articles={articles} />)
+    container
+      .find('.test--article__btn')
+      .at(0)
+      .simulate('click')
+
+    expect(container.find('.test--article__body').length).toBe(1)
+    expect(container.find('.test--commentlist__btn').length).toBe(1)
+    expect(container.find('.test--comment__body').length).toBe(0)
+  })
+})
+
+describe('CommentList', () => {
+  it('all comments should by collapsed after expand first article', () => {
+    const container = mount(<ArticleList articles={articles} />)
+    container
+      .find('.test--article__btn')
+      .at(0)
+      .simulate('click')
+
+    expect(container.find('.test--comment__body').length).toBe(0)
+  })
+
+  it('should open 5 comments on click in first article', () => {
+    const container = mount(<ArticleList articles={articles} />)
+    container
+      .find('.test--article__btn')
+      .at(0)
+      .simulate('click')
+
+    container
+      .find('.test--commentlist__btn')
+      .at(0)
+      .simulate('click')
+
+    expect(container.find('.test--comment__body').length).toBe(5)
+  })
+})

src/components/article.js

@@ -1,14 +1,18 @@
 import React, { Component } from 'react'
-import { findDOMNode } from 'react-dom'
 import CommentList from './comment-list'
+import PropTypes from 'prop-types'
 
 class Article extends Component {
-  /*
-    componentDidCatch(error) {
-        console.log('---', error)
-    }
+  static propTypes = {
+    article: PropTypes.shape({
+      title: PropTypes.string,
+      text: PropTypes.string,
+      comments: PropTypes.array
+    }),
+    isOpen: PropTypes.bool,
+    onBtnClick: PropTypes.func
+  }
 
-*/
   render() {
     const { article, isOpen, onBtnClick } = this.props
     return (
@@ -34,11 +38,7 @@ class Article extends Component {
     )
   }
 
-  setCommentsRef = (ref) => {
-    //      window.comments = ref
-    //    console.log('---', 'comments', ref)
-    //    console.log('---', 'comments DOM', findDOMNode(ref))
-  }
+  setCommentsRef = (ref) => {}
 }
 
 export default Article

src/components/comment-list.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import Comment from './comment'
 import toggleOpen from '../decorators/toggle-open'
+import NewCommentForm from './new-comment-form'
 
 class CommentList extends Component {
   static propTypes = {
@@ -10,19 +11,16 @@ class CommentList extends Component {
     toggleOpen: PropTypes.func
   }
 
-  /*
-  static defaultProps = {
-    comments: []
-  }
-*/
-
   render() {
     const { isOpen, toggleOpen } = this.props
     const text = isOpen ? 'hide comments' : 'show comments'
     return (
       <div>
-        <button onClick={toggleOpen}>{text}</button>
+        <button onClick={toggleOpen} className="test--commentlist__btn">
+          {text}
+        </button>
         {this.getBody()}
+        <NewCommentForm />
       </div>
     )
   }
@@ -31,17 +29,18 @@ class CommentList extends Component {
     const { comments, isOpen } = this.props
     if (!isOpen) return null
 
-    const body = comments.length ? (
-      <ul ref={this.setListRef}>
-        {comments.map((comment) => (
-          <li key={comment.id}>
-            <Comment comment={comment} />
-          </li>
-        ))}
-      </ul>
-    ) : (
-      <h3>No comments yet</h3>
-    )
+    const body =
+      comments && comments.length ? (
+        <ul ref={this.setListRef}>
+          {comments.map((comment) => (
+            <li key={comment.id}>
+              <Comment comment={comment} />
+            </li>
+          ))}
+        </ul>
+      ) : (
+        <h3>No comments yet</h3>
+      )
 
     return <div>{body}</div>
   }

src/components/comment.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 
 function Comment({ comment }) {
   return (
-    <div>
+    <div className="test--comment__body">
       {comment.text} <b>by {comment.user}</b>
     </div>
   )

src/components/new-comment-form.js

@@ -0,0 +1,43 @@
+import React, { Component } from 'react'
+
+class NewCommentForm extends Component {
+  state = {
+    comment: '',
+    username: ''
+  }
+
+  render() {
+    return (
+      <div>
+        <p>
+          Comment: <textarea value={this.state.comment} onChange={this.commentChangeHandler} />
+        </p>
+        <p>
+          Username: <input value={this.state.username} onChange={this.usernameChangeHandler} />
+        </p>
+        <p>
+          <button
+            onClick={this.postComment}
+            disabled={this.state.comment && this.state.username ? null : 'disabled'}
+          >
+            Post comment
+          </button>
+        </p>
+      </div>
+    )
+  }
+
+  postComment = () => {
+    console.log('sumbit')
+  }
+
+  commentChangeHandler = (evt) => {
+    this.setState({ comment: evt.target.value })
+  }
+
+  usernameChangeHandler = (evt) => {
+    this.setState({ username: evt.target.value })
+  }
+}
+
+export default NewCommentForm