From 482127fceefebb126f61b8b94b98faca0bf252d2 Mon Sep 17 00:00:00 2001 From: boombarashk Date: Wed, 14 Mar 2018 07:30:35 +0300 Subject: [PATCH 1/2] HW-5 0.01 --- src/AC/index.js | 9 ++++++++- src/constants/index.js | 1 + src/reducer/comments.js | 8 ++++++++ 3 files changed, 17 insertions(+), 1 deletion(-) diff --git a/src/AC/index.js b/src/AC/index.js index 401b5b1..abfb432 100644 --- a/src/AC/index.js +++ b/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 loadComments(id) { + return { + type: LOAD_COMMENTS, + callAPI: '/api/comment?article=${id}' + } } \ No newline at end of file diff --git a/src/constants/index.js b/src/constants/index.js index f34f842..8a18b45 100644 --- a/src/constants/index.js +++ b/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' diff --git a/src/reducer/comments.js b/src/reducer/comments.js index 9f32503..cb15390 100644 --- a/src/reducer/comments.js +++ b/src/reducer/comments.js @@ -1,6 +1,14 @@ import { ADD_COMMENT } from '../constants' import {normalizedComments} from '../fixtures' import {arrToMap} from './utils' +/* + +const CommemtsRecord = Record({ + id: null, + user: null, + text: null, + loading: false +})*/ export default (state = arrToMap(normalizedComments), action) => { const { type, payload, randomId } = action From 9f058a304cbbab30b3d52e5f0b925f48162e263e Mon Sep 17 00:00:00 2001 From: boombarashk Date: Thu, 15 Mar 2018 01:21:09 +0300 Subject: [PATCH 2/2] HW-5 loading.. --- src/AC/index.js | 4 +-- src/components/comment-list/index.js | 39 +++++++++++++++++++++++----- src/reducer/comments.js | 37 +++++++++++++++++++------- src/selectors/index.js | 4 +++ 4 files changed, 66 insertions(+), 18 deletions(-) diff --git a/src/AC/index.js b/src/AC/index.js index abfb432..6f4d806 100644 --- a/src/AC/index.js +++ b/src/AC/index.js @@ -76,9 +76,9 @@ export function loadArticleById(id) { } } -export function loadComments(id) { +export function loadCommentsByArticleId(id) { return { type: LOAD_COMMENTS, - callAPI: '/api/comment?article=${id}' + callAPI: `/api/comment?article=${id}` } } \ No newline at end of file diff --git a/src/components/comment-list/index.js b/src/components/comment-list/index.js index 173cb68..47e2f62 100644 --- a/src/components/comment-list/index.js +++ b/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 const text = isOpen ? 'hide comments' : 'show comments' return (
@@ -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 => +
  • + +
    • + ) return (
    { - comments.length - ? this.getComments() + commentsMap.size + ?
      + { + commentElements + } +
    :

    No comments yet

    } @@ -55,7 +78,7 @@ class CommentList extends Component { return (
      { - this.props.article.comments.map(id => + this.props./*article.*/comments.map(id =>
      • ) @@ -66,4 +89,8 @@ class CommentList extends Component { } -export default toggleOpen(CommentList) \ No newline at end of file +export default connect(state => ({ + comments: state.comments, + commentsMap: commentsMapSelector(state), + loading: loadingCommentsSelector(state) +}), { loadCommentsByArticleId })(toggleOpen(CommentList)) \ No newline at end of file diff --git a/src/reducer/comments.js b/src/reducer/comments.js index cb15390..5f5adae 100644 --- a/src/reducer/comments.js +++ b/src/reducer/comments.js @@ -1,26 +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' -const CommemtsRecord = Record({ + +const CommentRecord = Record({ id: null, user: null, - text: null, - loading: false -})*/ + text: null +}) + +const ReducerState = Record({ + entities: arrToMap([], CommentRecord), + loading: false, + loaded: false +}) -export default (state = arrToMap(normalizedComments), action) => { - const { type, payload, randomId } = action +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 } } \ No newline at end of file diff --git a/src/selectors/index.js b/src/selectors/index.js index 0f58db6..c169ab6 100644 --- a/src/selectors/index.js +++ b/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