ht6 done

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

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,17 +20,19 @@ class App extends Component {
                     <li><NavLink to = "/counter" activeStyle = {{ color: 'red' }}>counter</NavLink></li>
                     <li><NavLink to = "/filters" activeStyle = {{ color: 'red' }}>filters</NavLink></li>
                     <li><NavLink to = "/articles" activeStyle = {{ color: 'red' }}>articles</NavLink></li>
+                    <li><NavLink to = "/comments/1" activeStyle = {{ color: 'red' }}>comments</NavLink></li>
                 </ul>
                 <Switch>
                     <Route path = "/counter" component = {Counter} exact />
                     <Route path = "/filters" component = {Filters} />
                     <Route path = "/articles/new" render = {() => <h1>New Article Form</h1>} />
                     <Route path = "/articles" component = {ArticlesPage} />
+                    <Route path = "/comments" component = {CommentsPage} />
                     <Route path = "*" render = {() => <h1>Not Found Page</h1>} />
                 </Switch>
             </div>
         )
     }
 }
 
-export default App
+export default App

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 <Loader />
+
+        return (
+            <div>
+                {this.renderComments()}
+                {this.renderPagination()}
+            </div>
+        )
+    }
+
+    renderComments() {
+        const {loading, comments} = this.props
+        if (loading || !comments) return <Loader />
+        return(
+            <ul>
+                {comments.map(id => <li key={id}><Comment id={id}/></li>)}
+            </ul>
+        )
+    }
+
+    renderPagination() {
+        const { total } = this.props
+        return (
+            <ul>
+                {Array.from({ length: Math.ceil(total / 5) }, (_, k) => k + 1).map(i =>
+                    <li key={i}><NavLink to = {`/comments/${i}`} activeStyle = {{ color: 'red' }}>{i}</NavLink></li>
+                )}
+            </ul>
+        )
+    }
+
+}
+
+export default connect((state, { page }) => {
+    const { total, pagination } = state.comments
+    return {
+        total,
+        loading: pagination.getIn([page, 'loading']),
+        comments: pagination.getIn([page, 'ids'])
+    }
+}, { loadPageComments })(CommentsPagination)

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 (
+      <div>
+        <h2>Comments page</h2>
+        <Route path = {`${this.props.match.path}/:page`} render = {(props) => (
+            <CommentsPagination page = {props.match.params.page} />
+        )}/>
+      </div>
+    )
+  }
+
+}
+
+export default CommentsRoute

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'
+export const FAIL = '_FAIL'

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