ht5 done

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
+    LOAD_COMMENTS, START, SUCCESS, FAIL
 } from '../constants'
 
 export function increment() {
@@ -74,4 +74,26 @@ export function loadArticleById(id) {
                 }))
         }, 1000)
     }
-}
+}
+
+export function loadCommentsByArticleId(id) {
+    return (dispatch) => {
+        dispatch({
+            type: LOAD_COMMENTS + START,
+            payload: { id }
+        })
+
+        setTimeout(() => {
+            fetch(`/api/comment?article=${id}`)
+                .then(res => res.json())
+                .then(response => dispatch({
+                    type: LOAD_COMMENTS + SUCCESS,
+                    payload: { id, response }
+                }))
+                .catch(error => dispatch({
+                    type: LOAD_COMMENTS + FAIL,
+                    payload: { id, error }
+                }))
+        }, 1000)
+    }
+}

src/components/comment-list/index.js

@@ -4,6 +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 {loadingCommentsSelect, loadedCommentsSelect} from '../../selectors'
+import {connect} from 'react-redux'
+import {loadCommentsByArticleId} from '../../AC'
+import Loader from '../loader'
 import './style.css'
 
 class CommentList extends Component {
@@ -18,6 +22,10 @@ class CommentList extends Component {
         toggleOpen: PropTypes.func
     }
 
+    componentWillReceiveProps({isOpen, loadCommentsByArticleId, article}){
+        if (!this.props.isOpen && isOpen && !article.commentsLoaded) loadCommentsByArticleId(article.id)
+    }
+
     render() {
         const {isOpen, toggleOpen} = this.props
         const text = isOpen ? 'hide comments' : 'show comments'
@@ -36,19 +44,21 @@ class CommentList extends Component {
     }
 
     getBody() {
-        const {article: { comments, id }, isOpen} = this.props
+        const {article: { comments, id, commentsLoaded }, isOpen, loading, loaded} = this.props
         if (!isOpen) return null
-
-        return (
-            <div className="test__comment-list--body">
-                {
-                    comments.length
-                        ? this.getComments()
-                        : <h3 className="test__comment-list--empty">No comments yet</h3>
-                }
-                <CommentForm articleId = {id} />
-            </div>
-        )
+        if (loading) return <Loader />
+        if (commentsLoaded){
+            return (
+                <div className="test__comment-list--body">
+                    {
+                        comments.length
+                            ? this.getComments()
+                            : <h3 className="test__comment-list--empty">No comments yet</h3>
+                    }
+                    <CommentForm articleId = {id} />
+                </div>
+            )
+        }
     }
 
     getComments() {
@@ -66,4 +76,7 @@ class CommentList extends Component {
 }
 
 
-export default toggleOpen(CommentList)
+export default connect(state => ({
+    loading: loadingCommentsSelect(state),
+    loaded: loadedCommentsSelect(state)
+}), {loadCommentsByArticleId})(toggleOpen(CommentList))

src/constants/index.js

@@ -8,7 +8,8 @@ export const CHANGE_SELECTION = 'CHANGE_SELECTION'
 export const CHANGE_DATE_RANGE = 'CHANGE_DATE_RANGE'
 
 export const ADD_COMMENT = 'ADD_COMMENT'
+export const LOAD_COMMENTS = 'LOAD_COMMENTS'
 
 export const START = '_START'
 export const SUCCESS = '_SUCCESS'
-export const FAIL = '_FAIL'
+export const FAIL = '_FAIL'

src/reducer/articles.js

@@ -1,4 +1,4 @@
-import { DELETE_ARTICLE, ADD_COMMENT, LOAD_ALL_ARTICLES, LOAD_ARTICLE, START, SUCCESS, FAIL } from '../constants'
+import { DELETE_ARTICLE, ADD_COMMENT, LOAD_ALL_ARTICLES, LOAD_ARTICLE, LOAD_COMMENTS, START, SUCCESS } from '../constants'
 import { arrToMap } from './utils'
 import { Record } from 'immutable'
 
@@ -8,7 +8,8 @@ const ArticleRecord = Record({
     text: null,
     date: null,
     loading: false,
-    comments: []
+    comments: [],
+    commentsLoaded: false,
 })
 
 const ReducerState = Record({
@@ -46,8 +47,10 @@ export default (articles = new ReducerState(), action) => {
         case LOAD_ARTICLE + SUCCESS:
             return articles.setIn(['entities', payload.id], new ArticleRecord(payload.response))
 
+        case LOAD_COMMENTS + SUCCESS:
+            return articles.setIn(['entities', payload.id, 'commentsLoaded'], true)
 
         default:
             return articles
     }
-}
+}

src/reducer/comments.js

@@ -1,18 +1,37 @@
-import { ADD_COMMENT } from '../constants'
-import {normalizedComments} from '../fixtures'
+import { ADD_COMMENT, LOAD_COMMENTS, SUCCESS, START } from '../constants'
 import {arrToMap} from './utils'
+import {Record} from 'immutable'
 
-export default (state = arrToMap(normalizedComments), action) => {
+const CommentRecord = Record({
+    id: null,
+    text: null,
+    user: null,
+})
+
+const ReducerState = Record({
+    entities: arrToMap([], CommentRecord),
+    loading: false,
+    loaded: false,
+    error: null
+})
+
+export default (comments = new ReducerState(), action) => {
     const { type, payload, randomId } = action
 
     switch (type) {
         case ADD_COMMENT:
-            return state.set(randomId, {
-                ...payload.comment,
-                id: randomId
-            })
+            return comments.setIn(['entities', randomId], { ...payload.comment, id: randomId })
+
+        case LOAD_COMMENTS + START:
+            return comments.set('loading', true)
+
+        case LOAD_COMMENTS + SUCCESS:
+            return comments
+              .update('entities', comments => Object.assign(comments, arrToMap(payload.response, CommentRecord)))
+              .set('loading', false)
+              .set('loaded', true)
 
         default:
-            return state
+            return comments
     }
-}
+}

src/selectors/index.js

@@ -4,7 +4,10 @@ export const articlesMapSelector = state => state.articles.entities
 export const articleListSelector = createSelector(articlesMapSelector, articlesMap => articlesMap.valueSeq().toArray())
 export const loadingArticlesSelector = state => state.articles.loading
 
-const commentsSelector = state => state.comments
+const commentsSelector = state => state.comments.entities
+export const loadingCommentsSelect = state => state.comments.loading
+export const loadedCommentsSelect = state => state.comments.loaded
+
 const filtersSelector = state => state.filters
 const idSelector = (_, props) => props.id
 
@@ -19,4 +22,4 @@ export const filtratedArticles = createSelector(articleListSelector, filtersSele
     })
 })
 
-export const createCommentSelector = () => createSelector(commentsSelector, idSelector, (comments, id) => comments.get(id))
+export const createCommentSelector = () => createSelector(commentsSelector, idSelector, (comments, id) => comments.get(id))