diff --git a/src/AC/index.js b/src/AC/index.js index 67c4b5a..4cdf75b 100644 --- a/src/AC/index.js +++ b/src/AC/index.js @@ -1,4 +1,4 @@ -import {DELETE_ARTICLE, INCREMENT, CHANGE_DATE_RANGE, CHANGE_SELECTION} from '../constants' +import {DELETE_ARTICLE, INCREMENT, CHANGE_DATE_RANGE, CHANGE_SELECTION, ADD_COMMENT} from '../constants' export function increment() { return { @@ -26,3 +26,14 @@ export function changeSelection(selected) { payload: { selected } } } + +export function addComment(user, text, parentArticleId) { + return { + type: ADD_COMMENT, + payload: { + user, + text, + parentArticleId + } + } +} diff --git a/src/components/Article/index.js b/src/components/Article/index.js index 0a744e7..9fb4a8b 100644 --- a/src/components/Article/index.js +++ b/src/components/Article/index.js @@ -69,7 +69,7 @@ class Article extends PureComponent {
{article.text} - +
) } diff --git a/src/components/ArticleList.js b/src/components/ArticleList.js index 24568b6..5bfb096 100644 --- a/src/components/ArticleList.js +++ b/src/components/ArticleList.js @@ -8,7 +8,7 @@ import {filtratedArticlesSelector} from '../selectors' class ArticleList extends Component { static propTypes = { //from connect - articles: PropTypes.array.isRequired, + articles: PropTypes.object.isRequired, //from accordion openItemId: PropTypes.string, toggleOpenItem: PropTypes.func.isRequired @@ -17,11 +17,12 @@ class ArticleList extends Component { render() { console.log('---', 'update article list') const { articles, openItemId, toggleOpenItem } = this.props - const articleElements = articles.map(article =>
  • + const articleElements = Object.keys(articles).map(key => +
  • ) diff --git a/src/components/CommentForm/index.js b/src/components/CommentForm/index.js index 08b837f..6a582de 100644 --- a/src/components/CommentForm/index.js +++ b/src/components/CommentForm/index.js @@ -1,10 +1,14 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import './style.css' +import {connect} from 'react-redux' +import {addComment} from '../../AC' class CommentForm extends Component { static propTypes = { - + articleId: PropTypes.string, + // from connect + addComment: PropTypes.func }; state = { @@ -28,6 +32,7 @@ class CommentForm extends Component { handleSubmit = ev => { ev.preventDefault() + this.props.addComment(this.state.user, this.state.text, this.props.articleId) this.setState({ user: '', text: '' @@ -57,4 +62,4 @@ const limits = { } } -export default CommentForm \ No newline at end of file +export default connect(null, { addComment })(CommentForm) \ No newline at end of file diff --git a/src/components/CommentList.js b/src/components/CommentList.js index 1071384..2997710 100644 --- a/src/components/CommentList.js +++ b/src/components/CommentList.js @@ -4,24 +4,25 @@ import Comment from './Comment' import CommentForm from './CommentForm' import toggleOpen from '../decorators/toggleOpen' -function CommentList({comments = [], isOpen, toggleOpen}) { +function CommentList({comments = [], isOpen, toggleOpen, articleId}) { const text = isOpen ? 'hide comments' : 'show comments' return (
    - {getBody({comments, isOpen})} + {getBody({comments, isOpen, articleId})}
    ) } CommentList.propTypes = { comments: PropTypes.array, + articleId: PropTypes.string, //from toggleOpen decorator isOpen: PropTypes.bool, toggleOpen: PropTypes.func } -function getBody({comments, isOpen}) { +function getBody({comments, isOpen, articleId}) { if (!isOpen) return null if (!comments.length) return (
    @@ -35,7 +36,7 @@ function getBody({comments, isOpen}) { - +
    ) } diff --git a/src/components/Filters/Select.js b/src/components/Filters/Select.js index fdd66aa..9c2ad23 100644 --- a/src/components/Filters/Select.js +++ b/src/components/Filters/Select.js @@ -7,18 +7,22 @@ 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 => ({ - label: article.title, - value: article.id - })) + const options = [] + Object.keys(articles).forEach(key => { + options.push({ + label: articles[key].title, + value: key + }) + }) + return