HW-6

src/AC/index.js

@@ -1,8 +1,9 @@
 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() {
     return {
         type: INCREMENT
@@ -72,4 +73,12 @@ export function loadArticle(id) {
 
         }, 1000)
     }
+}
+
+export function loadComments(id) {
+        return {
+            type: LOAD_COMMENTS,
+            payload: {id},
+            callAPI: `/api/comment?article=${id}`
+         }
 }

src/components/Article/index.js

@@ -5,7 +5,7 @@ import CSSTransition from 'react-addons-css-transition-group'
 import {connect} from 'react-redux'
 import CommentList from '../CommentList'
 import Loader from '../common/Loader'
-import {deleteArticle, loadArticle} from '../../AC'
+import {deleteArticle, loadArticle, loadComments} from '../../AC'
 import './style.css'
 
 class Article extends PureComponent {
@@ -34,6 +34,7 @@ class Article extends PureComponent {
 
     render() {
         const {article, isOpen, toggleOpen} = this.props
+
         return (
             <div>
                 <h2 ref = {this.setTitleRef} onClick = {this.increment}>
@@ -45,7 +46,7 @@ class Article extends PureComponent {
                         delete
                     </button>
                 </h2>
-                <CSSTransition
+                <CSSTransition 
                     transitionAppear
                     component = "div"
                     transitionName = "article"
@@ -62,13 +63,13 @@ class Article extends PureComponent {
 
     getBody() {
         const { isOpen, article } = this.props
+
         if (!isOpen) return null
         if (article.loading) return <Loader/>
-
         return (
             <div>
                 <section>{article.text}</section>
-                <CommentList article = {article} ref = {this.setCommentsRef} key = {this.state.count}/>
+                <CommentList article = {article} ref = {this.setCommentsRef} key = {this.state.count} loadComments={this.props.loadComments} />
             </div>
         )
 
@@ -98,4 +99,4 @@ class Article extends PureComponent {
 }
 
 
-export default connect(null, { deleteArticle, loadArticle })(Article)
+export default connect(null, { deleteArticle, loadArticle, loadComments })(Article)

src/components/ArticleList.js

@@ -14,9 +14,9 @@ class ArticleList extends Accordion {
 
     render() {
         const {articles, loading} = this.props
-
         if (loading) return <Loader />
         if (!articles.length) return <h3>No Articles</h3>
+
         const articleElements = articles.map((article) => <li key={article.id}>
             <Article article={article}
                      isOpen={article.id === this.state.openItemId}

src/components/Comment.js

@@ -12,8 +12,6 @@ function Comment({comment}) {
 }
 
 Comment.propTypes = {
-    id: PropTypes.string,
-    //from connect
     comment: PropTypes.shape({
         text: PropTypes.string.isRequired,
         user: PropTypes.string
@@ -22,11 +20,10 @@ Comment.propTypes = {
 
 const createMapStateToProps = () => {
     const commentSelector = createCommentSelector()
-    return (state, ownProps) => {
-        return {
-            comment: commentSelector(state, ownProps)
-        }
-    }
+
+    return (state, ownProps) => ({
+        comment: commentSelector(state, ownProps)
+    })
 }
 
 export default connect(createMapStateToProps)(Comment)

src/components/CommentList.js

@@ -2,7 +2,10 @@ import React, {Component} from 'react'
 import PropTypes from 'prop-types'
 import CommentForm from './CommentForm'
 import Comment from './Comment'
+import {connect} from 'react-redux'
 import toggleOpen from '../decorators/toggleOpen'
+import {loadComments} from '../AC'
+import Loader from './common/Loader'
 
 class CommentList extends Component {
     static propTypes = {
@@ -12,9 +15,14 @@ class CommentList extends Component {
         toggleOpen: PropTypes.func
     }
 
+    componentWillReceiveProps({isOpen, loadComments, article:{commentsLoading, commentsLoaded, id}}) {
+            if (isOpen && !commentsLoaded && !commentsLoading) loadComments(id)
+    }
+
     render() {
         const {isOpen, toggleOpen} = this.props
         const text = isOpen ? 'hide comments' : 'show comments'
+
         return (
             <div>
                 <button onClick={toggleOpen}>{text}</button>
@@ -24,12 +32,14 @@ class CommentList extends Component {
     }
 
     getBody() {
-        const {article: { comments, id }, isOpen} = this.props
+        const {article: {id, comments, commentsLoaded, commentsLoading}, isOpen} = this.props
+
         if (!isOpen) return null
+        if (commentsLoading || !commentsLoaded) return <Loader/>
 
         const body = comments.length ? (
             <ul>
-                {comments.map(id => <li key = {id}><Comment id = {id} /></li>)}
+                 {comments.map(id => <li key={id}> <Comment id={id}/> </li>)}
             </ul>
         ) : <h3>No comments yet</h3>
 
@@ -42,5 +52,4 @@ class CommentList extends Component {
     }
 }
 
-
 export default toggleOpen(CommentList)

src/constants/index.js

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

src/reducer/articles.js

@@ -1,5 +1,5 @@
 import { Map, Record } from 'immutable'
-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, START, SUCCESS, FAIL, LOAD_COMMENTS } from '../constants'
 import {arrToMap} from './utils'
 
 const ArticleRecord = Record({
@@ -8,7 +8,9 @@ const ArticleRecord = Record({
     text: null,
     date: null,
     loading: false,
-    comments: []
+    comments: [],
+    commentsLoading: false,
+    commentsLoaded: false
 })
 
 const ReducerRecord = Record({
@@ -50,6 +52,18 @@ export default (articles = new ReducerRecord(), action) => {
 
         case LOAD_ARTICLE + SUCCESS:
             return articles.setIn(['entities', payload.id], new ArticleRecord(payload.response))
+
+        case LOAD_COMMENTS + START:
+            return articles.setIn(['entities', payload.id, 'commentsLoading'], true)
+
+        case LOAD_COMMENTS + FAIL:
+            return articles
+                .set('error', error)
+
+        case LOAD_COMMENTS + SUCCESS:
+            return articles
+                .setIn(['entities', payload.id, 'commentsLoading'], false)
+                .setIn(['entities', payload.id, 'commentsLoaded'], true)
    }
 
     return articles

src/reducer/comments.js

@@ -1,16 +1,22 @@
-import { ADD_COMMENT } from '../constants'
-import {normalizedComments} from '../fixtures'
+import { Map, Record } from 'immutable'
+import { LOAD_COMMENTS, ADD_COMMENT, START, SUCCESS, FAIL } from '../constants'
 import {arrToMap} from './utils'
 
-export default (state = arrToMap(normalizedComments), action) => {
-    const { type, payload, randomId } = action
+const CommentRecord = Record({
+    id: null,
+    user: null,
+    text: null
+})
+
+export default (state = new CommentRecord(), action) => {
+    const {type, payload, randomId, response} = action
 
     switch (type) {
+        case LOAD_COMMENTS + SUCCESS:
+            return arrToMap(response, CommentRecord).mergeDeep(state)
+
         case ADD_COMMENT:
-            return state.set(randomId, {
-                ...payload.comment,
-                id: randomId
-            })
+            return state.set(randomId, new CommentRecord(payload.comment))
     }
 
     return state

src/selectors/index.js

@@ -3,12 +3,15 @@ import {createSelector} from 'reselect'
 export const articlesMapSelector = state => state.articles.entities
 export const articlesLoadingSelector = state => state.articles.loading
 export const filtersSelector = state => state.filters
-export const commentListSelector = state => state.comments
+
+export const commentListSelector = state => state.comments.toObject()
+
 export const idSelector = (_, props) => props.id
 
 export const articlesSelector = createSelector(articlesMapSelector, articles => articles.valueSeq().toArray())
 
 export const filtratedArticlesSelector = createSelector(articlesSelector, filtersSelector, (articles, filters) => {
+
     const {selected, dateRange: {from, to}} = filters
 
     return articles.filter(article => {
@@ -19,5 +22,5 @@ export const filtratedArticlesSelector = createSelector(articlesSelector, filter
 })
 
 export const createCommentSelector = () => createSelector(commentListSelector, idSelector, (comments, id) => {
-    return comments.get(id)
+    return comments[id]
 })