From 524128feafc0b439e01af054e0123df09bb639ce Mon Sep 17 00:00:00 2001 From: Nikita Kuvykin Date: Sun, 18 Mar 2018 22:11:18 +0500 Subject: [PATCH] ht6 done --- src/AC/index.js | 17 +++++++- src/App.js | 5 ++- src/components/comments-pagination.js | 62 +++++++++++++++++++++++++++ src/components/routes/comments.js | 22 ++++++++++ src/constants/index.js | 3 +- src/reducer/comments.js | 18 ++++++-- 6 files changed, 119 insertions(+), 8 deletions(-) create mode 100644 src/components/comments-pagination.js create mode 100644 src/components/routes/comments.js diff --git a/src/AC/index.js b/src/AC/index.js index d3d7bdb..1f9cdd9 100644 --- a/src/AC/index.js +++ b/src/AC/index.js @@ -1,6 +1,6 @@ import { INCREMENT, DELETE_ARTICLE, CHANGE_DATE_RANGE, CHANGE_SELECTION, ADD_COMMENT, LOAD_ALL_ARTICLES, LOAD_ARTICLE, - LOAD_ARTICLE_COMMENTS, START, SUCCESS, FAIL + LOAD_ARTICLE_COMMENTS, LOAD_PAGE_COMMENTS, START, SUCCESS, FAIL } from '../constants' export function increment() { @@ -82,4 +82,17 @@ export function loadArticleComments(articleId) { payload: { articleId }, callAPI: `/api/comment?article=${articleId}` } -} \ No newline at end of file +} + +export function loadPageComments(page) { + return (dispatch) => { + setTimeout(() => { + fetch(`/api/comment?limit=5&offset=${(page - 1) * 5}`) + .then(res => res.json()) + .then(response => dispatch({ + type: LOAD_PAGE_COMMENTS + SUCCESS, + payload: { response, page } + })) + }, 1000) + } +} diff --git a/src/App.js b/src/App.js index e7c257c..526dcd0 100644 --- a/src/App.js +++ b/src/App.js @@ -2,6 +2,7 @@ import React, { Component } from 'react' import {findDOMNode} from 'react-dom' import {Route, NavLink, Switch} from 'react-router-dom' import ArticlesPage from './components/routes/articles' +import CommentsPage from './components/routes/comments' import UserForm from './components/user-form' import Filters from './components/filters' import Counter from './components/counter' @@ -19,12 +20,14 @@ class App extends Component {
  • counter
  • filters
  • articles
    • +
  • comments

    • New Article Form

    } /> +

    Not Found Page

    } />     @@ -32,4 +35,4 @@ class App extends Component { } } -export default App \ No newline at end of file +export default App diff --git a/src/components/comments-pagination.js b/src/components/comments-pagination.js new file mode 100644 index 0000000..de69cfe --- /dev/null +++ b/src/components/comments-pagination.js @@ -0,0 +1,62 @@ +import React, { Component } from 'react' +import { connect } from 'react-redux' +import { NavLink } from 'react-router-dom' +import { loadPageComments } from '../AC' +import Loader from './loader' +import Comment from './comment' + +class CommentsPagination extends Component { + + componentWillMount() { + const {loading, comments, loadPageComments, page} = this.props + if (!comments && !loading) loadPageComments(page) + } + + componentWillReceiveProps( {loading, comments, loadPageComments, page}) { + if (!comments && !loading) loadPageComments(page) + } + + render() { + const { total } = this.props + + if (!total) return + + return ( +
    + {this.renderComments()} + {this.renderPagination()} +
    + ) + } + + renderComments() { + const {loading, comments} = this.props + if (loading || !comments) return + return( +
      + {comments.map(id =>
      • )} +
    + ) + } + + renderPagination() { + const { total } = this.props + return ( +
      + {Array.from({ length: Math.ceil(total / 5) }, (_, k) => k + 1).map(i => +
    • {i}
      • + )} +
    + ) + } + +} + +export default connect((state, { page }) => { + const { total, pagination } = state.comments + return { + total, + loading: pagination.getIn([page, 'loading']), + comments: pagination.getIn([page, 'ids']) + } +}, { loadPageComments })(CommentsPagination) diff --git a/src/components/routes/comments.js b/src/components/routes/comments.js new file mode 100644 index 0000000..e27aef3 --- /dev/null +++ b/src/components/routes/comments.js @@ -0,0 +1,22 @@ +import React, { Component } from 'react' +import { Route } from 'react-router-dom' +import CommentsPagination from '../comments-pagination' + +class CommentsRoute extends Component { + + static propTypes = {}; + + render() { + return ( +
    +

    Comments page

    + ( + + )}/> +
    + ) + } + +} + +export default CommentsRoute diff --git a/src/constants/index.js b/src/constants/index.js index c71387f..a45013e 100644 --- a/src/constants/index.js +++ b/src/constants/index.js @@ -9,7 +9,8 @@ export const CHANGE_SELECTION = 'CHANGE_SELECTION' export const CHANGE_DATE_RANGE = 'CHANGE_DATE_RANGE' export const ADD_COMMENT = 'ADD_COMMENT' +export const LOAD_PAGE_COMMENTS = 'LOAD_PAGE_COMMENTS' export const START = '_START' export const SUCCESS = '_SUCCESS' -export const FAIL = '_FAIL' \ No newline at end of file +export const FAIL = '_FAIL' diff --git a/src/reducer/comments.js b/src/reducer/comments.js index 6586253..0842ab3 100644 --- a/src/reducer/comments.js +++ b/src/reducer/comments.js @@ -1,5 +1,5 @@ -import { ADD_COMMENT, LOAD_ARTICLE_COMMENTS, SUCCESS } from '../constants' -import {Record, OrderedMap} from 'immutable' +import { ADD_COMMENT, LOAD_ARTICLE_COMMENTS, LOAD_PAGE_COMMENTS, SUCCESS } from '../constants' +import {Record, OrderedMap, Map} from 'immutable' import {arrToMap} from './utils' const CommentRecord = Record({ @@ -9,7 +9,9 @@ const CommentRecord = Record({ }) const ReducerState = Record({ - entities: new OrderedMap({}) + entities: new OrderedMap({}), + pagination: new Map({}), // pagination: {page: {ids(obj), v} } + total: null }) export default (state = new ReducerState(), action) => { @@ -25,7 +27,15 @@ export default (state = new ReducerState(), action) => { case LOAD_ARTICLE_COMMENTS + SUCCESS: return state.mergeIn(['entities'], arrToMap(response, CommentRecord)) + case LOAD_PAGE_COMMENTS + SUCCESS: + const data = payload.response + return state + .mergeIn(['entities'], arrToMap(data.records, CommentRecord)) + .setIn(['pagination', payload.page, 'loading'], false) + .setIn(['pagination', payload.page, 'ids'], data.records.map(comment => comment.id)) + .set('total', data.total) + default: return state } -} \ No newline at end of file +}