Hometask7

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}`
+    }
+
 }

src/components/AllComments.js

@@ -0,0 +1,57 @@
+import React, { Component } from 'react';
+import  Paginator from './Paginator'
+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 , total,  loadAllCommentsForPaginator}  = this.props 
+        console.log("===="+  page )
+        const {limit}  =  0   
+        const {offset}  = 0
+        if( total ==0 ){ 
+        this.props.loadAllCommentsForPaginator ( page, 0 , 0  );  }
+        // можно менять лимит и оффсет но это будет сново загрузка это плохо 
+    } 
+
+
+
+  render() {
+      const { page ,  path,  comments, total }  = this.props  
+
+
+      if (!comments.length) return <h3>load</h3>
+      const maxpage = Math.floor(total / 5) + 1;
+    //   console.log("==="+maxpage);
+
+
+    //    console.log(comments)
+      const body =  comments.map(comment => <li key = {comment.id}><Comment id = {comment.id} /> <br/>  </li>)    
+
+
+    return (
+      <div>
+    PAGE = {page} <br/>
+    totalcom = {total}
+<ul>
+{body}
+</ul>  
+      <Paginator path = {path}  page = {page} maxpage = {maxpage}  />
+      </div>
+    )
+  }
+}
+
+export default connect(  (state, ownProps)=>{
+    // console.log(ownProps.page)
+    return{ 
+       comments: commentsAllSelector( state, ownProps), 
+       total :  commentsGetTotal(state),
+    }
+} , { loadAllCommentsForPaginator} )  (AllComments)

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,13 +15,15 @@ class App extends Component {
                     <li><NavLink to = "/articles" activeStyle = {{ color: 'red' }}>Articles</NavLink></li>
                     <li><NavLink to = "/filters" activeStyle = {{ color: 'red' }}>Filters</NavLink></li>
                     <li><NavLink to = "/counter" activeStyle = {{ color: 'red' }}>Counter</NavLink></li>
+                    <li><NavLink to = "/comments" activeStyle = {{ color: 'red' }}>comments</NavLink></li>
                 </ul>
                 <UserForm />
                 <Switch>
                     <Route path = "/counter" component = {CounterPage} exact/>
                     <Route path = "/filters" component = {FiltersPage}/>
                     <Route path = "/articles/new" render = {() => <h2>Add new Article form</h2>}/>
                     <Route path = "/articles" component = {ArticleListPage}/>
+                    <Route path="/comments" component= {CommentPaginator}  />
                     <Route path = "*" render = {() => <h1>Nor found</h1>}/>
                 </Switch>
             </div>

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) => 
+      <li key={index}>    <NavLink to = {linkPaginator.to} >  {linkPaginator.text.toString()}  </NavLink>  </li> 
+       )
+
+
+    return (
+      <div>
+          <ul>
+          {body} 
+          </ul>    
+      </div>
+    )
+  }
+};

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 (
+      <div>
+           <h4> ALL COMMENTS </h4>
+           <Route path = {`${this.props.match.path}/:page`} render = {this.getCommentsPaginator} />
+
+      </div>
+    )
+  }
+
+  getCommentsPaginator = ({ match }) => {
+
+    console.log( match)
+
+    const page = match.params.page
+
+    if (!match) return <h2>Please select an article</h2>
+    return   <AllComments page = {page}  path = {this.props.match.path} />
+}
+
+
+}
+

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'

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

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,19 @@ 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 commentsGetTotal = state => state.comments.get('total')