ht2

src/components/article-list.js

@@ -48,7 +48,12 @@ class ArticleList extends Component {
   }
 }
 ArticleList.propTypes = {
-  articles: PropTypes.array.isRequired
+  articles: PropTypes.array.isRequired,
+  toggleOpenItem: PropTypes.func.isRequired,
+  openItemId: PropTypes.string
+}
+ArticleList.defaultProps = {
+  openItemId: null
 }
 
 export default accordion(ArticleList)

src/components/article.js

@@ -1,8 +1,17 @@
 import React, { Component } from 'react'
 import { findDOMNode } from 'react-dom'
 import CommentList from './comment-list'
+import PropTypes from 'prop-types'
 
 class Article extends Component {
+  static propTypes = {
+    article: PropTypes.object.isRequired,
+    isOpen: PropTypes.bool,
+    onBtnClick: PropTypes.func.isRequired
+  }
+  static defaultProps = {
+    isOpen: false
+  }
   /*
     componentDidCatch(error) {
         console.log('---', error)

src/components/comment-form/index.js

@@ -0,0 +1,69 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import './style.css'
+
+export default class CommentForm extends Component {
+  static propTypes = {
+    username: PropTypes.string
+  }
+  static defaultProps = {
+    username: ''
+  }
+
+  initState = (username) => {
+    return {
+      username,
+      text: '',
+      isValidName: !!this.isNameValid(username),
+      isValidText: false
+    }
+  }
+
+  isNameValid = (name) => name.length < 5
+  isTextValid = (text) => text.length < 10 && text.length % 2 === 1
+
+  state = this.initState(this.props.username)
+
+  render() {
+    const { username, isValidName, isValidText, text } = this.state
+
+    console.log(this.state)
+    const nameBorderColor = isValidName ? 'green' : 'red'
+    const textBorderColor = isValidText ? 'green' : 'red'
+    const buttonEnabled = isValidText && isValidName
+    return (
+      <div>
+        <p>comment form</p>
+        <p>Your name validation({this.isNameValid.toString()})</p>
+        <input value={username} className={nameBorderColor} onChange={this.onUsernameChange} />
+        <p>Your comment validation({this.isTextValid.toString()}) </p>
+        <textarea onChange={this.onTextChange} value={text} className={textBorderColor}>
+          {' '}
+        </textarea>
+        <button onClick={this.onCompleteForm} disabled={!buttonEnabled}>
+          Send
+        </button>
+      </div>
+    )
+  }
+
+  onCompleteForm = () => {
+    console.log(this.state)
+  }
+  onTextChange = (ev) => {
+    const text = ev.target.value
+    this.setState({
+      text,
+      isValidText: this.isTextValid(text)
+    })
+  }
+
+  onUsernameChange = (ev) => {
+    const username = ev.target.value
+
+    this.setState({
+      username,
+      isValidName: this.isNameValid(username)
+    })
+  }
+}

src/components/comment-form/style.css

@@ -0,0 +1,8 @@
+.red {
+    border: 2px solid red;
+    border-radius: 4px;
+}
+.green {
+    border: 2px solid green;
+    border-radius: 4px;
+}

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 CommentForm from './comment-form'
 
 class CommentList extends Component {
   static propTypes = {
@@ -10,11 +11,10 @@ class CommentList extends Component {
     toggleOpen: PropTypes.func
   }
 
-  /*
   static defaultProps = {
-    comments: []
+    comments: [],
+    isOpen: false
   }
-*/
 
   render() {
     const { isOpen, toggleOpen } = this.props
@@ -23,10 +23,15 @@ class CommentList extends Component {
       <div>
         <button onClick={toggleOpen}>{text}</button>
         {this.getBody()}
+        {this.commentForm()}
       </div>
     )
   }
 
+  commentForm() {
+    return this.props.isOpen ? <CommentForm /> : null
+  }
+
   getBody() {
     const { comments, isOpen } = this.props
     if (!isOpen) return null

src/components/comment.js

@@ -11,7 +11,7 @@ function Comment({ comment }) {
 
 Comment.propTypes = {
   comment: PropTypes.shape({
-    text: PropTypes.string,
+    text: PropTypes.string.isRequired,
     user: PropTypes.string
   })
 }

src/components/filters/index.js

@@ -1,9 +1,15 @@
 import React, { Component } from 'react'
 import DateRange from './date-range'
 import SelectFilter from './select'
+import PropTypes from 'prop-types'
 
 class Filters extends Component {
-  static propTypes = {}
+  static propTypes = {
+    articles: PropTypes.array
+  }
+  static defaultProps = {
+    articles: []
+  }
 
   render() {
     return (

src/components/filters/select.js

@@ -1,4 +1,5 @@
 import React, { useState } from 'react'
+import PropTypes from 'prop-types'
 import Select from 'react-select'
 
 function SelectFilter({ articles }) {
@@ -12,4 +13,11 @@ function SelectFilter({ articles }) {
   return <Select options={options} value={selected} onChange={setSelection} isMulti />
 }
 
+SelectFilter.propTypes = {
+  article: PropTypes.shape({
+    title: PropTypes.string.isRequired,
+    id: PropTypes.string.isRequired
+  })
+}
+
 export default SelectFilter