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 && (
-
+
)
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