From f2f66d358ac42d10eaf7d85c7fbc5e98c1a56db9 Mon Sep 17 00:00:00 2001 From: Sergey Breslavets Date: Sun, 11 Feb 2018 18:20:07 +0300 Subject: [PATCH 1/3] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D0=BB?= =?UTF-8?q?=20=D1=81=D0=BA=D0=B5=D0=BB=D0=B5=D1=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/AllComments.js | 17 ++++++++++++ src/components/App.js | 3 +++ src/components/Paginator.js | 30 +++++++++++++++++++++ src/components/routes/CommentPaginator.js | 33 +++++++++++++++++++++++ 4 files changed, 83 insertions(+) create mode 100644 src/components/AllComments.js create mode 100644 src/components/Paginator.js create mode 100644 src/components/routes/CommentPaginator.js diff --git a/src/components/AllComments.js b/src/components/AllComments.js new file mode 100644 index 0000000..03a24bc --- /dev/null +++ b/src/components/AllComments.js @@ -0,0 +1,17 @@ +import React, { Component } from 'react'; +import Paginator from './Paginator' +export default class AllComments extends Component { + render() { + const { page , path } = this.props + + + + return ( +
+ PAGE = {page} + + +
+ ) + } +}; diff --git a/src/components/App.js b/src/components/App.js index 64c1c09..9647102 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -3,6 +3,7 @@ import ArticleListPage from './routes/ArticleList' import UserForm from './UserForm' import FiltersPage from './routes/Filters' import CounterPage from './routes/Counter' +import CommentPaginator from './routes/CommentPaginator' import { Route, Switch, NavLink } from 'react-router-dom' class App extends Component { @@ -14,6 +15,7 @@ class App extends Component {
  • Articles
  • Filters
  • Counter
    • +
  • comments
    • @@ -21,6 +23,7 @@ class App extends Component {

    Add new Article form

    }/> +

    Nor found

    }/>     diff --git a/src/components/Paginator.js b/src/components/Paginator.js new file mode 100644 index 0000000..0e69ebe --- /dev/null +++ b/src/components/Paginator.js @@ -0,0 +1,30 @@ +import React, { Component } from 'react'; +import { NavLink } from 'react-router-dom' + + +export default class Paginator extends Component { + render() { + + const {path , page , maxpage} = this.props + console.log({path}) + + const paginatorMas = [] ; + for (let index = 1; index <= maxpage; index++) { + paginatorMas.push( { "to": path +'/'+index , "text": index } ) + } + + + const body = paginatorMas.map((linkPaginator, index) => +
  • {linkPaginator.text.toString()}
    • + ) + + + return ( +
    +
      + {body} +
    +
    + ) + } +}; diff --git a/src/components/routes/CommentPaginator.js b/src/components/routes/CommentPaginator.js new file mode 100644 index 0000000..9811a44 --- /dev/null +++ b/src/components/routes/CommentPaginator.js @@ -0,0 +1,33 @@ +import React, { Component } from 'react'; +import AllComments from '../AllComments' +import {Route} from 'react-router-dom' + + +export default class CommentPaginator extends Component { + render() { + +console.log(this.props.match) + + + return ( +
    +

    ALL COMMENTS

    + + +
    + ) + } + + getCommentsPaginator = ({ match }) => { + + console.log( match) + + const page = match.params.page + + if (!match) return

    Please select an article

    + return +} + + +} + From f01c00175f03f27448ff0ebf04e7b8b0190952c5 Mon Sep 17 00:00:00 2001 From: Sergey Breslavets Date: Sun, 11 Feb 2018 19:55:09 +0300 Subject: [PATCH 2/3] =?UTF-8?q?=D0=BF=D0=BE=D0=BA=D0=B0=D0=B7=D0=B0=D0=BB?= =?UTF-8?q?=20=D0=B2=D1=81=D0=B5=20=D0=BA=D0=BE=D0=BC=D0=B5=D0=BD=D1=82?= =?UTF-8?q?=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/AC/index.js | 23 +++++++++++++++-- src/components/AllComments.js | 47 +++++++++++++++++++++++++++++------ src/components/Paginator.js | 2 +- src/constants/index.js | 2 ++ src/reducer/comments.js | 14 ++++++++--- src/selectors/index.js | 9 ++++--- 6 files changed, 80 insertions(+), 17 deletions(-) diff --git a/src/AC/index.js b/src/AC/index.js index b6fc854..4f5162e 100644 --- a/src/AC/index.js +++ b/src/AC/index.js @@ -1,6 +1,16 @@ 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_ARTICLE_COMMENTS, + START, + SUCCESS, + FAIL, + LOAD_ALL_COMMENTS } from '../constants' export function increment() { @@ -73,4 +83,13 @@ export function loadArticleComments(articleId) { payload: { articleId }, callAPI: `/api/comment?article=${articleId}` } +} + +export function loadAllCommentsForPaginator(page, limit, offset) { + return { + type: LOAD_ALL_COMMENTS, + payload: { page, limit, offset }, + callAPI: `/api/comment?limit=${limit}&offset=${offset}` + } + } \ No newline at end of file diff --git a/src/components/AllComments.js b/src/components/AllComments.js index 03a24bc..0b7e3e6 100644 --- a/src/components/AllComments.js +++ b/src/components/AllComments.js @@ -1,17 +1,48 @@ import React, { Component } from 'react'; import Paginator from './Paginator' -export default class AllComments extends Component { +import {connect} from 'react-redux' +import { loadAllCommentsForPaginator} from '../AC' + import Comment from './Comment' +import { commentsAllSelector, commentsGetTotal } from '../selectors' + + class AllComments extends Component { + + componentDidMount() { + const { page , path , loadAllCommentsForPaginator} = this.props + console.log("===="+ page ) + const {limit} = 0 + const {offset} = 0 + this.props.loadAllCommentsForPaginator ( page, 0 , 0 ); + } + + + render() { - const { page , path } = this.props - - - + const { page , path, comments, total } = this.props + if (!comments.length) return

    loading...

    + + + +console.log(comments) + const body = comments.map(comment =>

    • ) + + return (
    - PAGE = {page} - + PAGE = {page}
    + totalcom = {total} +
      +{body} +
    ) } -}; +} + +export default connect( state=>{ + return{ + comments: commentsAllSelector(state), + total : commentsGetTotal(state), + } +} , { loadAllCommentsForPaginator} ) (AllComments) \ No newline at end of file diff --git a/src/components/Paginator.js b/src/components/Paginator.js index 0e69ebe..a47d66f 100644 --- a/src/components/Paginator.js +++ b/src/components/Paginator.js @@ -15,7 +15,7 @@ export default class Paginator extends Component { const body = paginatorMas.map((linkPaginator, index) => -
  • {linkPaginator.text.toString()}
    • +
  • {linkPaginator.text.toString()}
    • ) diff --git a/src/constants/index.js b/src/constants/index.js index c71387f..77f1d05 100644 --- a/src/constants/index.js +++ b/src/constants/index.js @@ -10,6 +10,8 @@ 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' export const FAIL = '_FAIL' \ No newline at end of file diff --git a/src/reducer/comments.js b/src/reducer/comments.js index 8cff558..d377a8d 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, SUCCESS, LOAD_ALL_COMMENTS } from '../constants' import { arrToMap } from './utils' import { OrderedMap, Record } from 'immutable' @@ -9,7 +9,8 @@ const CommentRecord = Record({ }) const ReducerState = Record({ - entities: new OrderedMap({}) + entities: new OrderedMap({}), + total: 0 }) @@ -18,10 +19,17 @@ export default (state = new ReducerState(), action) => { switch (type) { case ADD_COMMENT: - return state.setIn(['entities', randomId], new CommentRecord({...payload.comment, id: randomId})) + return state.setIn(['entities', randomId], new CommentRecord({...payload.comment, id: randomId })) case LOAD_ARTICLE_COMMENTS + SUCCESS: return state.mergeIn(['entities'], arrToMap(response, CommentRecord)) + + + case LOAD_ALL_COMMENTS + SUCCESS: + console.log(action) + console.log(" resp==", response) + return state.set(['entities'], arrToMap(response.records, CommentRecord)) + .set('total', response.total) } return state diff --git a/src/selectors/index.js b/src/selectors/index.js index 95a4230..923dcc1 100644 --- a/src/selectors/index.js +++ b/src/selectors/index.js @@ -1,4 +1,4 @@ -import {createSelector} from 'reselect' +import { createSelector } from 'reselect' export const articlesMapSelector = state => state.articles.entities export const articlesLoadingSelector = state => state.articles.loading @@ -9,7 +9,7 @@ export const idSelector = (_, props) => props.id export const articlesSelector = createSelector(articlesMapSelector, articles => articles.valueSeq().toArray()) export const filtratedArticlesSelector = createSelector(articlesSelector, filtersSelector, (articles, filters) => { - const {selected, dateRange: {from, to}} = filters + const { selected, dateRange: { from, to } } = filters return articles.filter(article => { const published = Date.parse(article.date) @@ -24,4 +24,7 @@ export const articleSelector = createSelector(articlesMapSelector, idSelector, export const createCommentSelector = () => createSelector(commentMapSelector, idSelector, (comments, id) => { return comments.get(id) -}) \ No newline at end of file +}) + +export const commentsAllSelector = createSelector(commentMapSelector, comments => comments.valueSeq().toArray()) +export const commentsGetTotal = state => state.comments.get('total') \ No newline at end of file From 771789287ae89ce0fb6a95163912a0b8ffe76cc7 Mon Sep 17 00:00:00 2001 From: Sergey Breslavets Date: Sun, 11 Feb 2018 20:34:48 +0300 Subject: [PATCH 3/3] =?UTF-8?q?=D0=B2=D1=8B=D0=B2=D0=BE=D0=B4=20=D0=BF?= =?UTF-8?q?=D0=B0=D0=B3=D0=B8=D0=BD=D0=B0=D1=86=D0=B8=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/AllComments.js | 31 ++++++++++++++++++++----------- src/selectors/index.js | 14 +++++++++++++- 2 files changed, 33 insertions(+), 12 deletions(-) diff --git a/src/components/AllComments.js b/src/components/AllComments.js index 0b7e3e6..5b22275 100644 --- a/src/components/AllComments.js +++ b/src/components/AllComments.js @@ -6,24 +6,32 @@ import { loadAllCommentsForPaginator} from '../AC' import { commentsAllSelector, commentsGetTotal } from '../selectors' class AllComments extends Component { - - componentDidMount() { - const { page , path , loadAllCommentsForPaginator} = this.props + + + + + componentDidMount() { // + const { page , path , total, loadAllCommentsForPaginator} = this.props console.log("===="+ page ) const {limit} = 0 const {offset} = 0 - this.props.loadAllCommentsForPaginator ( page, 0 , 0 ); + if( total ==0 ){ + this.props.loadAllCommentsForPaginator ( page, 0 , 0 ); } + // можно менять лимит и оффсет но это будет сново загрузка это плохо } render() { const { page , path, comments, total } = this.props - if (!comments.length) return

    loading...

    - + + + if (!comments.length) return

    load

    + const maxpage = Math.floor(total / 5) + 1; + // console.log("==="+maxpage); -console.log(comments) + // console.log(comments) const body = comments.map(comment =>

    • ) @@ -33,16 +41,17 @@ console.log(comments) totalcom = {total}
      {body} -
    - + + ) } } -export default connect( state=>{ +export default connect( (state, ownProps)=>{ + // console.log(ownProps.page) return{ - comments: commentsAllSelector(state), + comments: commentsAllSelector( state, ownProps), total : commentsGetTotal(state), } } , { loadAllCommentsForPaginator} ) (AllComments) \ No newline at end of file diff --git a/src/selectors/index.js b/src/selectors/index.js index 923dcc1..02d63f4 100644 --- a/src/selectors/index.js +++ b/src/selectors/index.js @@ -25,6 +25,18 @@ export const articleSelector = createSelector(articlesMapSelector, idSelector, export const createCommentSelector = () => createSelector(commentMapSelector, idSelector, (comments, id) => { return comments.get(id) }) +export const pageId = (_, props) => props.page +export const commentsAllSelector = createSelector(commentMapSelector, pageId, (comments, page) => { + + // console.log("zloo") + // console.log(page) + + + let end = page * 5; // 1 = 5 2 = 10 3 = 15 + let start = end - 5; + console.log(comments.valueSeq().toArray()) + + return comments.valueSeq().toArray().slice(start, end) +}) -export const commentsAllSelector = createSelector(commentMapSelector, comments => comments.valueSeq().toArray()) export const commentsGetTotal = state => state.comments.get('total') \ No newline at end of file