From 861fd6c642c90ef8d843277c3c351653da900792 Mon Sep 17 00:00:00 2001 From: boombarashk Date: Sun, 18 Mar 2018 20:19:49 +0300 Subject: [PATCH] HW-6 http://localhost:3000/comments/ only 1 page --- src/AC/index.js | 12 +++++- src/App.js | 5 ++- src/components/routes/comments.js | 63 +++++++++++++++++++++++++++++++ src/constants/index.js | 2 + src/reducer/comments.js | 16 +++++++- src/selectors/index.js | 1 + 6 files changed, 94 insertions(+), 5 deletions(-) create mode 100644 src/components/routes/comments.js diff --git a/src/AC/index.js b/src/AC/index.js index d3d7bdb..b89290c 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 + INCREMENT, DELETE_ARTICLE, CHANGE_DATE_RANGE, CHANGE_SELECTION, ADD_COMMENT, LOAD_ALL_ARTICLES, LOAD_ARTICLE, LOAD_COMMENTS, + LOAD_ARTICLE_COMMENTS, LIMIT, START, SUCCESS, FAIL } from '../constants' export function increment() { @@ -82,4 +82,12 @@ export function loadArticleComments(articleId) { payload: { articleId }, callAPI: `/api/comment?article=${articleId}` } +} + +export function loadCommentsList(i = 1) { + return { + type: LOAD_COMMENTS, + payload: { i }, + callAPI: `/api/comment?limit=${LIMIT * i}&offset=${LIMIT * ++i}` + } } \ No newline at end of file diff --git a/src/App.js b/src/App.js index e7c257c..6b6b379 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 CommentsLists from './components/routes/comments' import UserForm from './components/user-form' import Filters from './components/filters' import Counter from './components/counter' @@ -25,6 +26,7 @@ class App extends Component {

New Article Form

} /> +

Not Found Page

} /> @@ -32,4 +34,5 @@ class App extends Component { } } -export default App \ No newline at end of file +export default App +//export default withRouter(connect(mapStateToProps)(App)) \ No newline at end of file diff --git a/src/components/routes/comments.js b/src/components/routes/comments.js new file mode 100644 index 0000000..d50aed1 --- /dev/null +++ b/src/components/routes/comments.js @@ -0,0 +1,63 @@ +import React, { Component } from 'react' +import { Route, NavLink } from 'react-router-dom' +import { connect } from 'react-redux' +import Loader from '../loader' +import { commentListSelector } from '../../selectors' +import { loadCommentsList } from '../../AC' +import { LIMIT } from '../../constants' + +class CommentsRoute extends Component { + componentDidMount(){ + const {loadCommentsList} = this.props + loadCommentsList() + } + componentWillReceiveProps(){ + //console.log("need rerender!") + } + render(){ + const {total} = this.props + + return ( +
+ { this.getLinks(total) } + +
+ ) + } + + getComments = ({ match }) => { + if (!match) return

Select comments list

+ const {loadedComments} = this.props + if (!loadedComments) return + const list = loadedComments[match.params.list - 1] + if ( !list || !list.length) return + const commentElement = list.map( comment => { + return( +
+ {comment.user}: {comment.text} +
+ ) + }) + return
{ commentElement }
+ } + + getLinks = (total) => { + if (!total) return + const count = Math.floor(total/ LIMIT) +( total % LIMIT === 0 ? 0 : 1) + const links =(Array.from(Array(count).keys())).map( i => { + const p = i + 1 + return
  • + {p} +
    • + }) + return
      + {links} +
    + } +} + + +export default connect(state => ({ + loadedComments: commentListSelector(state), + total: state.comments.total +}), { loadCommentsList })(CommentsRoute) \ No newline at end of file diff --git a/src/constants/index.js b/src/constants/index.js index c71387f..6618296 100644 --- a/src/constants/index.js +++ b/src/constants/index.js @@ -9,6 +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_COMMENTS = 'LOAD_COMMENTS' +export const LIMIT = 5 export const START = '_START' export const SUCCESS = '_SUCCESS' diff --git a/src/reducer/comments.js b/src/reducer/comments.js index 6586253..622ebbd 100644 --- a/src/reducer/comments.js +++ b/src/reducer/comments.js @@ -1,4 +1,4 @@ -import { ADD_COMMENT, LOAD_ARTICLE_COMMENTS, SUCCESS } from '../constants' +import { ADD_COMMENT, LOAD_ARTICLE_COMMENTS, LOAD_COMMENTS, START, SUCCESS } from '../constants' import {Record, OrderedMap} from 'immutable' import {arrToMap} from './utils' @@ -9,7 +9,9 @@ const CommentRecord = Record({ }) const ReducerState = Record({ - entities: new OrderedMap({}) + entities: new OrderedMap({}), + loadedComments: [], + total: null }) export default (state = new ReducerState(), action) => { @@ -25,6 +27,16 @@ export default (state = new ReducerState(), action) => { case LOAD_ARTICLE_COMMENTS + SUCCESS: return state.mergeIn(['entities'], arrToMap(response, CommentRecord)) + case LOAD_COMMENTS + START: + let item = state.loadedComments[payload.i - 1] + return typeof item === 'undefined' ? state.setIn(['loadedComments', payload.i - 1], false) : state + + case LOAD_COMMENTS + SUCCESS: + console.log("SUCCESS load comments: ", response) + + return state.set('total', response.total) + .setIn(['loadedComments', payload.i - 1], response.records)//arrToMap(response.records, CommentRecord)) + default: return state } diff --git a/src/selectors/index.js b/src/selectors/index.js index 421e61a..623bc23 100644 --- a/src/selectors/index.js +++ b/src/selectors/index.js @@ -8,6 +8,7 @@ export const loadedArticlesSelector = state => state.articles.loaded const commentsSelector = state => state.comments.entities const filtersSelector = state => state.filters const idSelector = (_, props) => props.id +export const commentListSelector = state => state.comments.get('loadedComments') export const filtratedArticles = createSelector(articleListSelector, filtersSelector, (articles, filters) => { const {selected, dateRange: {from, to}} = filters