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