Hw 5

src/AC/index.js

@@ -1,5 +1,5 @@
 import {
-    INCREMENT, DELETE_ARTICLE, CHANGE_DATE_RANGE, CHANGE_SELECTION, ADD_COMMENT, LOAD_ALL_ARTICLES, LOAD_ARTICLE,
+    INCREMENT, DELETE_ARTICLE, CHANGE_DATE_RANGE, CHANGE_SELECTION, ADD_COMMENT, LOAD_ALL_ARTICLES, LOAD_ARTICLE, LOAD_COMMENTS,
     START, SUCCESS, FAIL
 } from '../constants'
 
@@ -74,4 +74,11 @@ export function loadArticleById(id) {
                 }))
         }, 1000)
     }
+}
+
+export function loadCommentsByArticleId(id) {
+    return {
+        type: LOAD_COMMENTS,
+        callAPI: `/api/comment?article=${id}`
+    }
 }

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 Loader from '../loader'
+import {loadingCommentsSelector, commentsMapSelector} from '../../selectors'
+import { connect } from 'react-redux'
+import { loadCommentsByArticleId } from '../../AC'
 import './style.css'
 
 class CommentList extends Component {
@@ -18,8 +22,18 @@ class CommentList extends Component {
         toggleOpen: PropTypes.func
     }
 
+    componentWillReceiveProps({ isOpen, loadCommentsByArticleId, article, comments }) {
+        if (!this.props.isOpen && isOpen) {
+            loadCommentsByArticleId(article.id)
+            console.log("!!!" + comments)
+        }
+    }
+   /* componentDidMount() {
+        console.log(this.props)//loadCommentsByArticleId
+    }*/
     render() {
-        const {isOpen, toggleOpen} = this.props
+        const {isOpen, toggleOpen, loading} = this.props
+        if (loading) return <Loader />
         const text = isOpen ? 'hide comments' : 'show comments'
         return (
             <div>
@@ -36,14 +50,23 @@ class CommentList extends Component {
     }
 
     getBody() {
-        const {article: { comments, id }, isOpen} = this.props
+        const {article: { id }, comments, commentsMap, isOpen} = this.props
         if (!isOpen) return null
 
+        const commentElements = commentsMap.toSeq(id =>
+            <li key = {id} className = "test__comment-list--item">
+                <Comment id = {id}/>
+            </li>
+        )
         return (
             <div className="test__comment-list--body">
                 {
-                    comments.length
-                        ? this.getComments()
+                    commentsMap.size
+                        ? <ul>
+                        {
+                            commentElements
+                        }
+                    </ul>
                         : <h3 className="test__comment-list--empty">No comments yet</h3>
                 }
                 <CommentForm articleId = {id} />
@@ -55,7 +78,7 @@ class CommentList extends Component {
         return (
             <ul>
                 {
-                    this.props.article.comments.map(id =>
+                    this.props./*article.*/comments.map(id =>
                         <li key = {id} className = "test__comment-list--item">
                             <Comment id = {id}/>
                         </li>)
@@ -66,4 +89,8 @@ class CommentList extends Component {
 }
 
 
-export default toggleOpen(CommentList)
+export default connect(state => ({
+    comments: state.comments,
+    commentsMap: commentsMapSelector(state),
+    loading: loadingCommentsSelector(state)
+}), { loadCommentsByArticleId })(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_COMMENTS = 'LOAD_COMMENTS'
 
 export const START = '_START'
 export const SUCCESS = '_SUCCESS'

src/reducer/comments.js

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

src/selectors/index.js

@@ -4,6 +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
 
+export const commentsMapSelector = state => state.comments.entities
+export const commentListSelector = createSelector(commentsMapSelector, commentMap => commentMap.valueSeq().toArray())
+export const loadingCommentsSelector = state => state.comments.loading
+
 const commentsSelector = state => state.comments
 const filtersSelector = state => state.filters
 const idSelector = (_, props) => props.id