From 0ef0c7e1f782216d481e83cd0bbed0de6c9a3870 Mon Sep 17 00:00:00 2001
From: Eli Kry <eljobemail@gmail.com>
Date: Sun, 11 Feb 2018 00:25:42 +0300
Subject: [PATCH 1/2] pagination

---
 src/AC/index.js                             | 10 +++-
 src/components/App.js                       |  3 +
 src/components/routes/CommentsPagination.js | 62 +++++++++++++++++++++
 src/constants/index.js                      |  2 +
 src/reducer/comments.js                     | 11 +++-
 src/selectors/index.js                      |  6 +-
 6 files changed, 90 insertions(+), 4 deletions(-)
 create mode 100644 src/components/routes/CommentsPagination.js

diff --git a/src/AC/index.js b/src/AC/index.js
index b6fc854..e9e7537 100644
--- a/src/AC/index.js
+++ b/src/AC/index.js
@@ -1,6 +1,7 @@
 import {
     INCREMENT, DELETE_ARTICLE, CHANGE_DATE_RANGE, CHANGE_SELECTION, ADD_COMMENT,
-    LOAD_ALL_ARTICLES, LOAD_ARTICLE, LOAD_ARTICLE_COMMENTS, START, SUCCESS, FAIL
+    LOAD_ALL_ARTICLES, LOAD_ARTICLE, LOAD_ARTICLE_COMMENTS, START, SUCCESS, FAIL,
+    LOAD_COMMENTS_PAGE
 } from '../constants'
 
 export function increment() {
@@ -73,4 +74,11 @@ export function loadArticleComments(articleId) {
         payload: { articleId },
         callAPI: `/api/comment?article=${articleId}`
     }
+}
+
+export function loadCommentsPage(url) {
+    return {
+        type: LOAD_COMMENTS_PAGE,
+        callAPI: url,
+    }
 }
\ No newline at end of file
diff --git a/src/components/App.js b/src/components/App.js
index 64c1c09..928fec7 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 CommentsPage from './routes/CommentsPagination'
 import { Route, Switch, NavLink } from 'react-router-dom'
 
 class App extends Component {
@@ -14,11 +15,13 @@ 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/1" activeStyle = {{ color: 'red' }}>Comments</NavLink></li>
                 </ul>
                 <UserForm />
                 <Switch>
                     <Route path = "/counter" component = {CounterPage} exact/>
                     <Route path = "/filters" component = {FiltersPage}/>
+                    <Route path = "/comments/1" component = {CommentsPage}/>
                     <Route path = "/articles/new" render = {() => <h2>Add new Article form</h2>}/>
                     <Route path = "/articles" component = {ArticleListPage}/>
                     <Route path = "*" render = {() => <h1>Nor found</h1>}/>
diff --git a/src/components/routes/CommentsPagination.js b/src/components/routes/CommentsPagination.js
new file mode 100644
index 0000000..511e000
--- /dev/null
+++ b/src/components/routes/CommentsPagination.js
@@ -0,0 +1,62 @@
+import React, { Component } from 'react'
+import Comment from '../Comment'
+import {connect} from 'react-redux'
+import {Route} from 'react-router-dom'
+import {commentsSelector} from '../../selectors'
+import {loadCommentsPage} from '../../AC'
+import {commentsTotal} from '../../selectors'
+import {NavLink} from 'react-router-dom'
+
+class CommentsPagination extends Component {
+    static propTypes = {
+
+    };
+
+    componentDidMount() {
+        const {loadCommentsPage} = this.props;
+        //console.log('---total', comments.total)
+        loadCommentsPage(`/api/comment?limit=5&offset=0`);
+    }
+
+    render() {
+        const {comments, total} = this.props
+        const number = 5;
+
+        if (!comments.length) return <h3>loading...</h3>
+
+        const commentElements = comments.map((comment) => <li key={comment.id}>
+            {comment.text} <b>by {comment.user}</b>
+        </li>)
+
+        /*let pagination = [];
+
+        for (let i = 0; i < total; i+5) {
+            pagination.push(<NavLink to = {`/comment?limit=5&offset=${i}`} activeStyle = {{color: 'red'}}>{i}</NavLink>)
+        }*/
+
+        return (
+            <div>
+            <ul>
+                
+            </ul>
+            <ul>
+                {commentElements}
+            </ul>
+            </div>
+        )
+        /*return (
+            <div>
+                <h2>Comments: {comments.length}, {total}</h2>
+            </div>
+        )*/
+    }
+
+}
+
+export default connect(state => {
+    return {
+        total: commentsTotal(state),
+        comments: commentsSelector(state),
+    }
+}, {loadCommentsPage})(CommentsPagination)
+
diff --git a/src/constants/index.js b/src/constants/index.js
index c71387f..7e4d177 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_COMMENTS_PAGE = 'LOAD_COMMENTS_PAGE'
+
 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..9d681b7 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_COMMENTS_PAGE } 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
 })
 
 
@@ -22,6 +23,12 @@ export default (state = new ReducerState(), action) => {
 
         case LOAD_ARTICLE_COMMENTS + SUCCESS:
             return state.mergeIn(['entities'], arrToMap(response, CommentRecord))
+
+        case LOAD_COMMENTS_PAGE + SUCCESS:
+            console.log('---response', 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..7a6e04c 100644
--- a/src/selectors/index.js
+++ b/src/selectors/index.js
@@ -2,12 +2,15 @@ import {createSelector} from 'reselect'
 
 export const articlesMapSelector = state => state.articles.entities
 export const articlesLoadingSelector = state => state.articles.loading
+export const commentsTotal = state => state.comments.total
 export const filtersSelector = state => state.filters
 export const commentMapSelector = state => state.comments.get('entities')
 export const idSelector = (_, props) => props.id
 
 export const articlesSelector = createSelector(articlesMapSelector, articles => articles.valueSeq().toArray())
 
+export const commentsSelector = createSelector(commentMapSelector, comments => comments.valueSeq().toArray())
+
 export const filtratedArticlesSelector = createSelector(articlesSelector, filtersSelector, (articles, filters) => {
     const {selected, dateRange: {from, to}} = filters
 
@@ -24,4 +27,5 @@ export const articleSelector = createSelector(articlesMapSelector, idSelector,
 
 export const createCommentSelector = () => createSelector(commentMapSelector, idSelector, (comments, id) => {
     return comments.get(id)
-})
\ No newline at end of file
+})
+

From 3670772548b3aec01e92f21ab3c67d2677ef3417 Mon Sep 17 00:00:00 2001
From: Eli Kry <eljobemail@gmail.com>
Date: Sun, 11 Feb 2018 16:33:02 +0300
Subject: [PATCH 2/2] pagination + CommentPage

---
 src/components/App.js                       |  6 +--
 src/components/routes/ArticleList.js        |  1 +
 src/components/routes/Comment.js            | 41 ++++++++++++++++
 src/components/routes/CommentsPagination.js | 52 +++++++--------------
 4 files changed, 63 insertions(+), 37 deletions(-)
 create mode 100644 src/components/routes/Comment.js

diff --git a/src/components/App.js b/src/components/App.js
index 928fec7..6ffdc18 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -21,10 +21,10 @@ class App extends Component {
                 <Switch>
                     <Route path = "/counter" component = {CounterPage} exact/>
                     <Route path = "/filters" component = {FiltersPage}/>
-                    <Route path = "/comments/1" component = {CommentsPage}/>
+                    <Route path = "/comments" component = {CommentsPage}/>
                     <Route path = "/articles/new" render = {() => <h2>Add new Article form</h2>}/>
-                    <Route path = "/articles" component = {ArticleListPage}/>
-                    <Route path = "*" render = {() => <h1>Nor found</h1>}/>
+                    <Route path = "/articles/1" component = {ArticleListPage}/>
+                    <Route path = "*" render = {() => <h1>Not found</h1>}/>
                 </Switch>
             </div>
         )
diff --git a/src/components/routes/ArticleList.js b/src/components/routes/ArticleList.js
index 1585f91..fba4509 100644
--- a/src/components/routes/ArticleList.js
+++ b/src/components/routes/ArticleList.js
@@ -19,6 +19,7 @@ class ArticleListPage extends Component {
     }
 
     getArticle = ({ match }) => {
+        console.log('---match', match)
         if (!match) return <h2>Please select an article</h2>
         return <Article id = {match.params.id} isOpen key = {match.params.id} />
     }
diff --git a/src/components/routes/Comment.js b/src/components/routes/Comment.js
new file mode 100644
index 0000000..a886c6c
--- /dev/null
+++ b/src/components/routes/Comment.js
@@ -0,0 +1,41 @@
+import React, { Component } from 'react'
+import {connect} from 'react-redux'
+import {Route} from 'react-router-dom'
+import {commentsSelector} from '../../selectors'
+import {loadCommentsPage} from '../../AC'
+import {propTypes} from 'prop-types'
+
+class Comment extends Component {
+    static propTypes = {
+
+    };
+
+    componentDidMount() {
+        const {loadCommentsPage, page} = this.props;
+        const offset = 5*page
+        loadCommentsPage(`/api/comment?limit=5&offset=${offset}`);
+    }
+
+    render() {
+        const {comments} = this.props
+
+        if (!comments.length) return <h3>loading...</h3>
+
+        const commentElements = comments.map((comment) => <li key={comment.id}>
+            {comment.text} <b>by {comment.user}</b>
+        </li>)
+
+        return (
+            <ul>
+                {commentElements}
+            </ul>
+        )
+    }
+}
+
+export default connect(state => {
+    return {
+        comments: commentsSelector(state),
+    }
+}, {loadCommentsPage})(Comment)
+
diff --git a/src/components/routes/CommentsPagination.js b/src/components/routes/CommentsPagination.js
index 511e000..759c994 100644
--- a/src/components/routes/CommentsPagination.js
+++ b/src/components/routes/CommentsPagination.js
@@ -1,62 +1,46 @@
 import React, { Component } from 'react'
-import Comment from '../Comment'
+import Comment from './Comment'
 import {connect} from 'react-redux'
 import {Route} from 'react-router-dom'
-import {commentsSelector} from '../../selectors'
-import {loadCommentsPage} from '../../AC'
 import {commentsTotal} from '../../selectors'
 import {NavLink} from 'react-router-dom'
+import {propTypes} from 'prop-types'
 
 class CommentsPagination extends Component {
     static propTypes = {
 
     };
 
-    componentDidMount() {
-        const {loadCommentsPage} = this.props;
-        //console.log('---total', comments.total)
-        loadCommentsPage(`/api/comment?limit=5&offset=0`);
-    }
-
     render() {
         const {comments, total} = this.props
-        const number = 5;
-
-        if (!comments.length) return <h3>loading...</h3>
-
-        const commentElements = comments.map((comment) => <li key={comment.id}>
-            {comment.text} <b>by {comment.user}</b>
-        </li>)
+        let pagination = [];
 
-        /*let pagination = [];
-
-        for (let i = 0; i < total; i+5) {
-            pagination.push(<NavLink to = {`/comment?limit=5&offset=${i}`} activeStyle = {{color: 'red'}}>{i}</NavLink>)
-        }*/
+        for (let i = 0; i < total; i += 5) {
+            pagination.push(<li key={i}>
+                <NavLink to = {`/comments/${i/5 + 1}`} activeStyle = {{color: 'red'}}>{i/5 + 1}</NavLink>
+            </li>)
+        }
 
         return (
             <div>
-            <ul>
-                
-            </ul>
-            <ul>
-                {commentElements}
-            </ul>
+                <ul>
+                    {pagination}
+                </ul>
+                <Route path = {`/comments/:page`} children = {this.getComment} />
             </div>
         )
-        /*return (
-            <div>
-                <h2>Comments: {comments.length}, {total}</h2>
-            </div>
-        )*/
     }
 
+    getComment = ({ match }) => {
+        console.log('match', match);
+        if (!match) return <h2>Please select an comment</h2>
+        return <Comment page = {match.params.page - 1} key = {match.params.page} />
+    }
 }
 
 export default connect(state => {
     return {
         total: commentsTotal(state),
-        comments: commentsSelector(state),
     }
-}, {loadCommentsPage})(CommentsPagination)
+})(CommentsPagination)