ht4 done

package.json

@@ -26,5 +26,9 @@
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
+  },
+  "devDependencies": {
+    "enzyme": "^3.3.0",
+    "enzyme-adapter-react-16": "^1.1.1"
   }
 }

src/AC/index.js

@@ -4,30 +4,37 @@ import {
 } from '../constants'
 
 export function increment() {
-    return {
-        type: INCREMENT
-    }
+  return {
+    type: INCREMENT
+  }
 }
 
 export function deleteArticle(id) {
-    return {
-        type: DELETE_ARTICLE,
-        payload: { id }
-    }
+  return {
+    type: DELETE_ARTICLE,
+    payload: { id }
+  }
 }
 
 export function changeDateRange(dateRange) {
-    return {
-        type: CHANGE_DATE_RANGE,
-        payload: { dateRange }
-    }
+  return {
+    type: CHANGE_DATE_RANGE,
+    payload: { dateRange }
+  }
 }
 
 export function changeSelection(selected) {
-    return {
-        type: CHANGE_SELECTION,
-        payload: { selected }
-    }
+  return {
+    type: CHANGE_SELECTION,
+    payload: { selected }
+  }
+}
+
+export function addComment(comment, articleId){
+  return {
+    type: ADD_COMMENT,
+    payload: {comment, articleId}
+  }
 }
 
 export function addComment(comment, articleId) {
@@ -74,4 +81,4 @@ export function loadArticleById(id) {
                 }))
         }, 1000)
     }
-}
+}

src/App.js

@@ -1,5 +1,4 @@
 import React, { Component } from 'react'
-import {findDOMNode} from 'react-dom'
 import ArticleList from './components/article-list'
 import UserForm from './components/user-form'
 import Filters from './components/filters'
@@ -16,15 +15,10 @@ class App extends Component {
                 <UserForm />
                 <Counter />
                 <Filters />
-                <ArticleList ref = {this.setListRef} />
+                <ArticleList />
             </div>
         )
     }
-
-    setListRef = ref => {
-        this.listRef = ref
-        console.log(findDOMNode(ref))
-    }
 }
 
-export default App
+export default App

src/components/article-list/index.js

@@ -12,10 +12,10 @@ export class ArticleList extends Component {
         articles: PropTypes.array.isRequired,
         loading: PropTypes.bool,
 
-        //from accordion decorator
-        openItemId: PropTypes.string,
-        toggleItem: PropTypes.func
-    };
+    //from accordion decorator
+    openItemId: PropTypes.string,
+    toggleItem: PropTypes.func
+  };
 
     componentDidMount() {
         this.props.loadAllArticles()
@@ -44,4 +44,4 @@ export class ArticleList extends Component {
 export default connect(state => ({
     articles: filtratedArticles(state),
     loading: loadingArticlesSelector(state)
-}), { loadAllArticles })(accordion(ArticleList))
+}), { loadAllArticles })(accordion(ArticleList))

src/components/article/articles.spec.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import {render, mount} from 'enzyme'
+import Article from './index.js'
+import articles from '../../fixtures'
+
+describe('Article', () => {
+  it('should render Article', () => {
+    const wrapper = render(<Article article={articles[0]} onButtonClick={() => console.log('click')} isOpen = {true} />)
+
+    expect(wrapper.find('.test__article--button').length).toEqual(1)
+  })
+
+  it('should open comment on button click', () => {
+    const wrapper = mount(<Article article={articles[0]} onButtonClick={() => console.log('click')} isOpen = {true} />)
+
+    wrapper.find('.comments__button').at(0).simulate('click')
+
+    expect(wrapper.find('.comments-list').length).toEqual(1)
+  })
+})

src/components/article/index.js

@@ -82,4 +82,4 @@ Article.propTypes = {
     onButtonClick: PropTypes.func
 }
 
-export default connect(null, { deleteArticle, loadArticleById })(Article)
+export default connect(null, { deleteArticle, loadArticleById })(Article)

src/components/chart.js

@@ -23,4 +23,4 @@ class Chart extends Component {
     }
 }
 
-export default Chart
+export default Chart

src/components/comment-list/index.js

@@ -18,7 +18,9 @@ class CommentList extends Component {
         toggleOpen: PropTypes.func
     }
 
+
     render() {
+        console.log('render comments list');
         const {isOpen, toggleOpen} = this.props
         const text = isOpen ? 'hide comments' : 'show comments'
         return (
@@ -66,4 +68,4 @@ class CommentList extends Component {
 }
 
 
-export default toggleOpen(CommentList)
+export default toggleOpen(CommentList)

src/components/comment-list/style.css

@@ -1,17 +1,46 @@
 .comments-enter {
-    opacity: 0;
+  opacity: 0;
 }
 
 .comments-enter.comments-enter-active {
-    opacity: 1;
-    transition: opacity 500ms ease-in;
+  opacity: 1;
+  transition: opacity 500ms ease-in;
 }
 
 .comments-leave {
-    opacity: 1;
+  opacity: 1;
 }
 
 .comments-leave.comments-leave-active {
-    opacity: 0;
-    transition: opacity 500ms ease-in;
-}
+  opacity: 0;
+  transition: opacity 500ms ease-in;
+}
+
+.comments-list__name{
+  display:block;
+  width:200px;
+  height:24px;
+  padding:0 7px;
+  margin-bottom: 10px;
+  box-sizing: border-box;
+  margin-top: -10px;
+}
+
+.comments-list__text{
+  display:block;
+  width:200px;
+  height:100px;
+  padding:5px 7px;
+  resize:none;
+  overfow:hidden;
+  margin-bottom: 10px;
+  box-sizing: border-box;
+}
+
+.comments-list__add{
+  display:block;
+  width:200px;
+  height:24px;
+  text-align:center;
+  box-sizing: border-box;
+}

src/components/comment/comment-add.js

@@ -0,0 +1,67 @@
+import React, {Component} from 'react'
+import { connect } from 'react-redux'
+import PropTypes from 'prop-types'
+import { addComment } from '../../AC'
+
+class CommentAddForm extends Component {
+    static propTypes = {
+      articleId: PropTypes.string.isRequired,
+    }
+
+    state = {
+        textIsEmpty: true,
+        nameIsEmpty: true
+    }
+
+    handeChangeName = (e) => {
+        e.target.value.trim().length ? this.setState({ nameIsEmpty: false }) : this.setState({ nameIsEmpty: true })
+    }
+
+    handeChangeText = (e) => {
+        e.target.value.trim().length ? this.setState({ textIsEmpty: false }) : this.setState({ textIsEmpty: true })
+    }
+
+    handleAddComment = () => {
+        const { addComment, articleId } = this.props
+        addComment({
+          "user": this.refs.commentName.value,
+          "text": this.refs.commentText.value
+        }, articleId)
+
+        this.refs.commentName.value = ''
+        this.refs.commentText.value = ''
+    }
+
+    render() {
+        return (
+          <div>
+              <p><b>Добавить комментарий:</b></p>
+              <input
+                  type="text"
+                  ref="commentName"
+                  className="comments-list__name"
+                  placeholder="Ваше имя"
+                  onChange = { this.handeChangeName }
+              />
+              <textarea
+                  placeholder="Текст комментария"
+                  className="comments-list__text"
+                  ref="commentText"
+                  onChange = { this.handeChangeText }
+                  >
+              </textarea>
+              <button
+                  className="comments-list__add"
+                  onClick = { this.handleAddComment }
+                  disabled = { this.state.textIsEmpty || this.state.nameIsEmpty }
+                  >
+                  Добавить
+              </button>
+          </div>
+        )
+    }
+
+}
+
+
+export default connect(null, { addComment })(CommentAddForm)

src/components/comment.js → src/components/comment/index.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
-import { createCommentSelector } from '../selectors'
+import { createCommentSelector } from '../../selectors'
 
 function Comment({comment}) {
     return (
@@ -13,17 +13,17 @@ function Comment({comment}) {
 
 Comment.propTypes = {
     comment: PropTypes.shape({
-        text: PropTypes.string.isRequired,
-        user: PropTypes.string
+      id: "",
+      text: PropTypes.string.isRequired,
+      user: PropTypes.string
     }).isRequired
 }
 
 const createMapStateToProps = () => {
     const commentSelector = createCommentSelector()
-
     return (state, ownProps) => ({
         comment: commentSelector(state, ownProps)
     })
 }
 
-export default connect(createMapStateToProps)(Comment)
+export default connect(createMapStateToProps)(Comment)

src/components/counter.js

@@ -29,4 +29,4 @@ const mapStateToProps = state => ({
     count: state.counter
 })
 
-export default connect(mapStateToProps)(Counter)
+export default connect(mapStateToProps)(Counter)

src/components/filters/date-range.js

@@ -25,9 +25,8 @@ class DateRange extends Component {
             </div>
         );
     }
-
 }
 
 export default connect(state => ({
     range: state.filters.dateRange
-}), { changeDateRange })(DateRange)
+}), { changeDateRange })(DateRange)

src/components/filters/index.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react'
 import DateRange from './date-range'
 import SelectFilter from './select'
+import {connect} from 'react-redux'
 
 class Filters extends Component {
     static propTypes = {
@@ -16,4 +17,6 @@ class Filters extends Component {
     }
 }
 
-export default Filters
+export default connect(state => ({
+    articles: state.articles
+}))(Filters)

src/components/filters/select.js

@@ -9,14 +9,14 @@ import 'react-select/dist/react-select.css'
 
 class SelectFilter extends Component {
     static propTypes = {
-        articles: PropTypes.array.isRequired
+        articles: PropTypes.object.isRequired
     };
 
     handleChange = selected => this.props.changeSelection(selected.map(option => option.value))
 
     render() {
         const { articles, selected } = this.props
-        const options = articles.map(article => ({
+        const options = Object.values(articles).map(article => ({
             label: article.title,
             value: article.id
         }))
@@ -33,4 +33,4 @@ class SelectFilter extends Component {
 export default connect(state => ({
     selected: state.filters.selected,
     articles: articleListSelector(state)
-}), { changeSelection })(SelectFilter)
+}), { changeSelection })(SelectFilter)

src/components/user-form.js

@@ -28,4 +28,4 @@ class UserForm extends Component {
     }
 }
 
-export default UserForm
+export default UserForm

src/constants/index.js

@@ -11,4 +11,4 @@ export const ADD_COMMENT = 'ADD_COMMENT'
 
 export const START = '_START'
 export const SUCCESS = '_SUCCESS'
-export const FAIL = '_FAIL'
+export const FAIL = '_FAIL'