diff --git a/src/AC/index.js b/src/AC/index.js index dda2dd6..f0b77ae 100644 --- a/src/AC/index.js +++ b/src/AC/index.js @@ -1,4 +1,4 @@ -import {INCREMENT, DELETE_ARTICLE, CHANGE_DATE_RANGE, CHANGE_SELECTION} from '../constants' +import {INCREMENT, DELETE_ARTICLE, CHANGE_DATE_RANGE, CHANGE_SELECTION, ADD_COMMENT} from '../constants' export function increment() { return { @@ -26,3 +26,10 @@ export function changeSelection(selected) { payload: { selected } } } + +export function addComment(articleId, comment) { + return { + type: ADD_COMMENT, + payload: { articleId, comment } + } +} diff --git a/src/components/Article/index.js b/src/components/Article/index.js index a3e834e..57bc8a5 100644 --- a/src/components/Article/index.js +++ b/src/components/Article/index.js @@ -5,6 +5,7 @@ import CSSTransition from 'react-addons-css-transition-group' import {connect} from 'react-redux' import CommentList from '../CommentList' import {deleteArticle} from '../../AC' +import {createArticleSelector} from '../../selectors' import './style.css' class Article extends PureComponent { @@ -29,11 +30,11 @@ class Article extends PureComponent { render() { console.log('---', 'rerendering') - const {article, isOpen, toggleOpen} = this.props + const {article, isOpen, toggleOpen, id} = this.props const body = isOpen && (
{article.text}
- +
) return ( @@ -85,5 +86,13 @@ class Article extends PureComponent { } +const createMapStateToProps = () => { + const articleSelector = createArticleSelector() + return (state, ownProps) => { + return { + article: articleSelector(state, ownProps) + } + } +} -export default connect(null, { deleteArticle })(Article) \ No newline at end of file +export default connect(createMapStateToProps, { deleteArticle })(Article) \ No newline at end of file diff --git a/src/components/ArticleList.js b/src/components/ArticleList.js index bc1c261..4ec975e 100644 --- a/src/components/ArticleList.js +++ b/src/components/ArticleList.js @@ -10,10 +10,10 @@ class ArticleList extends Accordion { console.log('---', 'rerendering article list') const {articles} = this.props if (!articles.length) return

No Articles

- const articleElements = articles.map((article) =>
  • -
  • +
  • ) return ( diff --git a/src/components/CommentForm/index.js b/src/components/CommentForm/index.js index 3685a10..862dd1e 100644 --- a/src/components/CommentForm/index.js +++ b/src/components/CommentForm/index.js @@ -1,4 +1,6 @@ import React, { Component } from 'react' +import {connect} from 'react-redux' +import { addComment } from '../../AC' import './style.css' class CommentForm extends Component { @@ -26,6 +28,11 @@ class CommentForm extends Component { handleSubmit = ev => { ev.preventDefault() + const {user, text} = this.state + this.props.addComment(this.props.articleId, { + user, + text + }) this.setState({ user: '', text: '' @@ -58,4 +65,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 8592d22..c60214f 100644 --- a/src/components/CommentList.js +++ b/src/components/CommentList.js @@ -24,7 +24,7 @@ class CommentList extends Component { } getBody() { - const {comments, isOpen} = this.props + const {comments, isOpen, articleId} = this.props if (!isOpen) return null const body = comments.length ? ( @@ -36,7 +36,7 @@ class CommentList extends Component { return (
    {body} - +
    ) } diff --git a/src/components/Filters/Select.js b/src/components/Filters/Select.js index 1a91857..969f9bd 100644 --- a/src/components/Filters/Select.js +++ b/src/components/Filters/Select.js @@ -8,16 +8,16 @@ 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).map(i => ({ + label: articles[i].title, + value: articles[i].id })) return