Hometask6

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_ALL_COMMENTS
 } from '../constants'
 
 export function increment() {
@@ -47,11 +47,11 @@ export function loadAllArticles() {
 
 /*
 export function loadArticle(id) {
-    return {
-        type: LOAD_ARTICLE,
-        payload: { id },
-        callAPI: `/api/article/${id}`
-    }
+  return {
+    type: LOAD_ARTICLE,
+    payload: { id },
+    callAPI: `/api/article/${id}`
+  }
 }
 */
 
@@ -70,6 +70,13 @@ export function loadArticle(id) {
                     payload: { id, response }
                 }))
 
-        }, 1000)
+        }, 300)
+    }
+}
+
+export function loadAllComments(id) {
+    return {
+        type: LOAD_ALL_COMMENTS,
+        callAPI: `/api/comment?article=${id}`,
     }
 }

src/components/Comment.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 import {createCommentSelector} from '../selectors'
 
-function Comment({comment}) {
+export default function Comment({comment}) {
     return (
         <div>
             {comment.text} <b>by {comment.user}</b>
@@ -20,7 +20,7 @@ Comment.propTypes = {
     }).isRequired
 }
 
-const createMapStateToProps = () => {
+/* const createMapStateToProps = () => {
     const commentSelector = createCommentSelector()
     return (state, ownProps) => {
         return {
@@ -29,4 +29,4 @@ const createMapStateToProps = () => {
     }
 }
 
-export default connect(createMapStateToProps)(Comment)
+export default connect(createMapStateToProps)(Comment) */

src/components/CommentList.js

@@ -3,6 +3,11 @@ import PropTypes from 'prop-types'
 import CommentForm from './CommentForm'
 import Comment from './Comment'
 import toggleOpen from '../decorators/toggleOpen'
+import { loadAllComments } from '../AC';
+import { connect } from 'react-redux';
+import Loader from './common/Loader';
+import { commentListSelector } from '../selectors';
+import { commentsLoadingSelector } from '../selectors/';
 
 class CommentList extends Component {
     static propTypes = {
@@ -23,24 +28,36 @@ class CommentList extends Component {
         )
     }
 
+    componentWillReceiveProps(nextProps) {
+        if(!this.props.comments.loaded && nextProps.isOpen && !this.props.isOpen) {
+            const { loadAllComments } = this.props;
+            loadAllComments(this.props.article.id);
+        }
+    }
+
     getBody() {
-        const {article: { comments, id }, isOpen} = this.props
+        const {article: { id: articleId }, comments, isOpen, loading, error } = this.props
         if (!isOpen) return null
+        if(loading) return <Loader />
+        if(error) return <h3>Error</h3>
 
-        const body = comments.length ? (
+        const body = comments.entities.size > 0 ? (
             <ul>
-                {comments.map(id => <li key = {id}><Comment id = {id} /></li>)}
+                {comments.entities.valueSeq().map(comment => <li key = {comment.id}><Comment comment={comment} /></li>)}
             </ul>
         ) : <h3>No comments yet</h3>
 
         return (
             <div>
                 {body}
-                <CommentForm articleId = {id} />
+                <CommentForm articleId = {articleId} />
             </div>
         )
     }
 }
 
 
-export default toggleOpen(CommentList)
+export default connect(state => ({
+    loading: commentsLoadingSelector(state),
+    comments: commentListSelector(state),
+}), {loadAllComments})(toggleOpen(CommentList));

src/constants/index.js

@@ -8,6 +8,7 @@ export const CHANGE_SELECTION = 'CHANGE_SELECTION'
 export const CHANGE_DATE_RANGE = 'CHANGE_DATE_RANGE'
 
 export const ADD_COMMENT = 'ADD_COMMENT'
+export const LOAD_ALL_COMMENTS = 'LOAD_ALL_COMMENTS'
 
 export const START = '_START'
 export const SUCCESS = '_SUCCESS'

src/reducer/comments.js

@@ -1,17 +1,49 @@
-import { ADD_COMMENT } from '../constants'
+import { ADD_COMMENT, LOAD_ALL_COMMENTS, START, FAIL, SUCCESS } from '../constants'
+import {Record} from 'immutable'
 import {normalizedComments} from '../fixtures'
 import {arrToMap} from './utils'
 
-export default (state = arrToMap(normalizedComments), action) => {
-    const { type, payload, randomId } = action
+const CommentRecord = Record({
+    id: null,
+    text: null,
+    author: null,
+    loading: true,
+})
+
+const ReducerRecord = Record({
+    entities: arrToMap([], CommentRecord),
+    loading: false,
+    loaded: false,
+    error: null
+})
+
+// export default (comments = arrToMap(normalizedComments), action) => {
+export default (comments = new ReducerRecord(), action) => {
+    const { type, payload, randomId, response, error } = action
 
     switch (type) {
         case ADD_COMMENT:
-            return state.set(randomId, {
+            return comments.set(randomId, {
                 ...payload.comment,
                 id: randomId
             })
+
+        case LOAD_ALL_COMMENTS + START:
+            return comments
+                .set('loading', true)
+                .set('loaded', false)
+
+        case LOAD_ALL_COMMENTS + FAIL:
+            return comments
+                .set('loading', false)
+                .set('error', error)
+
+        case LOAD_ALL_COMMENTS + SUCCESS:
+            return comments
+                .set('loading', false)
+                .set('loaded', true)
+                .set('entities', arrToMap(response, CommentRecord));
     }
 
-    return state
+    return comments
 }

src/selectors/index.js

@@ -1,10 +1,15 @@
 import {createSelector} from 'reselect'
 
 export const articlesMapSelector = state => state.articles.entities
-export const articlesLoadingSelector = state => state.articles.loading
+export const articlesLoadingSelector = state => {
+    return state.articles.loading;
+}
 export const filtersSelector = state => state.filters
 export const commentListSelector = state => state.comments
 export const idSelector = (_, props) => props.id
+export const commentsLoadingSelector = state => {
+    return state.comments.loading;
+}
 
 export const articlesSelector = createSelector(articlesMapSelector, articles => articles.valueSeq().toArray())