fetch comments HT5

src/AC/index.js

@@ -1,6 +1,6 @@
 import {
     INCREMENT, DELETE_ARTICLE, CHANGE_DATE_RANGE, CHANGE_SELECTION, ADD_COMMENT, LOAD_ALL_ARTICLES, LOAD_ARTICLE,
-    START, SUCCESS, FAIL
+    START, SUCCESS, FAIL, LOAD_COMMENTS
 } from '../constants'
 
 export function increment() {
@@ -74,4 +74,27 @@ export function loadArticleById(id) {
                 }))
         }, 1000)
     }
+}
+
+export function loadCommenstById(id) {
+    return (dispatch) => {
+        dispatch({
+            type: LOAD_COMMENTS + START,
+            payload: {id}
+        })
+
+        fetch(`/api/comment?article=${id}`)
+            .then(res => {
+                return res.json()
+            })
+            .then(response => dispatch({
+                type: LOAD_COMMENTS + SUCCESS,
+                payload: {id, response}
+            }))
+            .catch(error => dispatch({
+                type: LOAD_COMMENTS + FAIL,
+                payload: {id, error}
+            }))
+
+    }
 }

src/components/article-list/index.js

@@ -24,15 +24,18 @@ export class ArticleList extends Component {
     render() {
         const { articles, openItemId, toggleItem, loading } = this.props
         if (loading) return <Loader />
-        const articleElements = articles.map(article =>
-            <li key = {article.id} className = "test__article-list--item">
+
+
+        const articleElements = articles.map(article => (
+            <li key={article.id} className="test__article-list--item">
                 <Article
-                    article = {article}
-                    onButtonClick = {toggleItem}
-                    isOpen = {openItemId === article.id}
+                    article={article}
+                    id={article.id}
+                    onButtonClick={toggleItem}
+                    isOpen={openItemId === article.id}
                 />
             </li>
-        )
+        ))
         return (
             <ul>
                 {articleElements}

src/components/article/index.js

@@ -4,7 +4,8 @@ import CSSTransition from 'react-addons-css-transition-group'
 import { connect } from 'react-redux'
 import CommentList from '../comment-list'
 import Loader from '../loader'
-import { deleteArticle, loadArticleById } from '../../AC'
+import { deleteArticle, loadArticleById, loadCommenstById } from '../../AC'
+import { createCommentSelector } from '../../selectors'
 import './style.css'
 
 class Article extends PureComponent {
@@ -54,14 +55,18 @@ class Article extends PureComponent {
     }
 
     getBody() {
-        const { article, isOpen } = this.props
+        const { comments, isOpen, article, loadAllArticles, loadCommenstById } = this.props
+
         if (!isOpen) return null
         if (article.loading) return <Loader/>
 
         return (
             <section className = "test__article--body">
                 {article.text}
-                <CommentList article = {article}/>
+                <CommentList
+                    comments = {comments}
+                    loadCommenstById = {loadCommenstById}
+                    article = {article}/>
             </section>
         )
     }
@@ -82,4 +87,12 @@ Article.propTypes = {
     onButtonClick: PropTypes.func
 }
 
-export default connect(null, { deleteArticle, loadArticleById })(Article)
+const createMapStateToProps = () => {
+    const commentSelector = createCommentSelector()
+
+    return (state, ownProps) => ({
+        comments: commentSelector(state, ownProps)
+    })
+}
+
+export default connect(createMapStateToProps, { deleteArticle, loadArticleById, loadCommenstById })(Article)

src/components/comment-list/index.js

@@ -4,12 +4,10 @@ import CSSTransition from 'react-addons-css-transition-group'
 import Comment from '../comment'
 import CommentForm from '../comment-form'
 import toggleOpen from '../../decorators/toggleOpen'
+import Loader from '../loader'
 import './style.css'
 
 class CommentList extends Component {
-    static defaultProps = {
-        comments: []
-    }
 
     static propTypes = {
         article: PropTypes.object.isRequired,
@@ -18,6 +16,10 @@ class CommentList extends Component {
         toggleOpen: PropTypes.func
     }
 
+    componentWillReceiveProps({isOpen, comments, article: {id}}) {
+        if (!this.props.isOpen && isOpen && !comments) this.props.loadCommenstById(id)
+    }
+
     render() {
         const {isOpen, toggleOpen} = this.props
         const text = isOpen ? 'hide comments' : 'show comments'
@@ -36,13 +38,14 @@ class CommentList extends Component {
     }
 
     getBody() {
-        const {article: { comments, id }, isOpen} = this.props
-        if (!isOpen) return null
+        const {article: {id}, isOpen, comments} = this.props
+        if (!isOpen || !comments) return null
+        if (comments && comments.get('loading')) return <Loader/>
 
         return (
             <div className="test__comment-list--body">
                 {
-                    comments.length
+                    comments.get('articleComments')
                         ? this.getComments()
                         : <h3 className="test__comment-list--empty">No comments yet</h3>
                 }
@@ -55,10 +58,11 @@ class CommentList extends Component {
         return (
             <ul>
                 {
-                    this.props.article.comments.map(id =>
-                        <li key = {id} className = "test__comment-list--item">
-                            <Comment id = {id}/>
-                        </li>)
+                    this.props.comments.get('articleComments').toJS().map(comment => (
+                        <li key = {comment.id} className = "test__comment-list--item">
+                            <Comment comment = {comment}/>
+                        </li>
+                    ))
                 }
             </ul>
         )

src/components/comment.js

@@ -1,9 +1,9 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { connect } from 'react-redux'
-import { createCommentSelector } from '../selectors'
 
-function Comment({comment}) {
+function Comment(props) {
+    const {comment} = props;
+
     return (
         <div>
             {comment.text} <b>by {comment.user}</b>
@@ -18,12 +18,5 @@ Comment.propTypes = {
     }).isRequired
 }
 
-const createMapStateToProps = () => {
-    const commentSelector = createCommentSelector()
-
-    return (state, ownProps) => ({
-        comment: commentSelector(state, ownProps)
-    })
-}
 
-export default connect(createMapStateToProps)(Comment)
+export default Comment

src/constants/index.js

@@ -3,6 +3,7 @@ export const INCREMENT = 'INCREMENT'
 export const DELETE_ARTICLE = 'DELETE_ARTICLE'
 export const LOAD_ALL_ARTICLES = 'LOAD_ALL_ARTICLES'
 export const LOAD_ARTICLE = 'LOAD_ARTICLE'
+export const LOAD_COMMENTS = 'LOAD_COMMENTS'
 
 export const CHANGE_SELECTION = 'CHANGE_SELECTION'
 export const CHANGE_DATE_RANGE = 'CHANGE_DATE_RANGE'

src/reducer/articles.js

@@ -7,8 +7,7 @@ const ArticleRecord = Record({
     title: null,
     text: null,
     date: null,
-    loading: false,
-    comments: []
+    loading: false
 })
 
 const ReducerState = Record({

src/reducer/comments.js

@@ -1,8 +1,9 @@
-import { ADD_COMMENT } from '../constants'
+import { ADD_COMMENT, LOAD_COMMENTS, START, SUCCESS, FAIL } from '../constants'
 import {normalizedComments} from '../fixtures'
 import {arrToMap} from './utils'
+import { Record, OrderedMap, fromJS } from 'immutable'
 
-export default (state = arrToMap(normalizedComments), action) => {
+export default (state = fromJS({}), action) => {
     const { type, payload, randomId } = action
 
     switch (type) {
@@ -11,6 +12,16 @@ export default (state = arrToMap(normalizedComments), action) => {
                 ...payload.comment,
                 id: randomId
             })
+        case LOAD_COMMENTS + START:
+            return state.set(payload.id, fromJS({
+                loading: true
+            }))
+        case LOAD_COMMENTS + SUCCESS:
+            return state.set(payload.id, fromJS({
+                loading: false,
+                articleComments: fromJS(payload.response)
+            }))
+
 
         default:
             return state