HT6 - comments page, pagination

src/App.js

@@ -1,9 +1,10 @@
 import React, { Component } from 'react'
-import { Route, NavLink, Switch } from 'react-router-dom'
+import { NavLink, Route, Switch } from 'react-router-dom'
 import ArticlesRoute from './components/routes/articles'
 import Filters from './components/filters'
 import UserForm from './components/user-form'
 import Counter from './components/counter'
+import CommentsPage from './components/routes/comments-page'
 
 class App extends Component {
   render() {
@@ -27,6 +28,11 @@ class App extends Component {
                 Counter
               </NavLink>
             </div>
+            <div>
+              <NavLink to="/comments" activeStyle={{ color: 'red' }}>
+                Comments
+              </NavLink>
+            </div>
           </div>
         </div>
         <UserForm />
@@ -35,6 +41,7 @@ class App extends Component {
           <Route path="/filters" component={Filters} />
           <Route path="/articles/new" render={() => <h1>New article form</h1>} />
           <Route path="/articles" component={ArticlesRoute} />
+          <Route path="/comments/:page?" component={CommentsPage} />
           <Route path="/" render={() => <h1>Not Found Page</h1>} />
         </Switch>
       </div>

src/ac/index.js

@@ -1,15 +1,16 @@
 import {
-  INCREMENT,
-  DELETE_ARTICLE,
+  ADD_COMMENT,
   CHANGE_DATE_RANGE,
   CHANGE_SELECTION,
-  ADD_COMMENT,
+  DELETE_ARTICLE,
+  INCREMENT,
   LOAD_ALL_ARTICLES,
   LOAD_ARTICLE,
+  LOAD_ARTICLE_COMMENTS,
   START,
-  SUCCESS,
-  LOAD_ARTICLE_COMMENTS
+  SUCCESS
 } from '../constants'
+import { LOAD_COMMENTS } from '../constants/index'
 
 export function increment() {
   return {
@@ -88,3 +89,21 @@ export function loadArticleComments(articleId) {
     callAPI: `/api/comment?article=${articleId}`
   }
 }
+
+export function loadComments(page) {
+  return async (dispatch) => {
+    dispatch({
+      type: LOAD_COMMENTS + START,
+      payload: { page }
+    })
+
+    const rawRes = await fetch(`/api/comment/?limit=5&offset=${(page - 1) * 5}`)
+    const response = await rawRes.json()
+
+    dispatch({
+      type: LOAD_COMMENTS + SUCCESS,
+      payload: { page },
+      response
+    })
+  }
+}

src/components/comment.js

@@ -4,6 +4,8 @@ import { connect } from 'react-redux'
 import { createCommentSelector } from '../selectors'
 
 function Comment({ comment }) {
+  console.log(comment)
+
   return (
     <div>
       {comment.text} <b>by {comment.user}</b>

src/components/comments-navigation.js

@@ -0,0 +1,33 @@
+import React, { Component } from 'react'
+import { Link } from 'react-router-dom'
+import PropTypes from 'prop-types'
+
+class CommentsNavigation extends Component {
+  static propTypes = {
+    activePage: PropTypes.number,
+    hasNext: PropTypes.bool
+  }
+
+  static defaultProps = {
+    activePage: 1,
+    hasNext: false
+  }
+
+  render() {
+    const { activePage, hasNext } = this.props
+
+    return (
+      <div>
+        {activePage > 1 ? this.renderPageLink('Prev', activePage - 1) : null}
+        <strong style={{ margin: '0 20px', display: 'inline-block' }}>Page: {activePage}</strong>
+        {hasNext ? this.renderPageLink('Next', activePage + 1) : null}
+      </div>
+    )
+  }
+
+  renderPageLink(label, page) {
+    return <Link to={`/comments/${page}`}>{label}</Link>
+  }
+}
+
+export default CommentsNavigation

src/components/comments-page-list.js

@@ -0,0 +1,46 @@
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+import { loadComments } from '../ac/index'
+
+class CommentsPageList extends Component {
+  componentDidMount() {
+    const { page, loadComments } = this.props
+    loadComments(page)
+  }
+
+  componentDidUpdate(oldProps) {
+    const { page, loadComments } = this.props
+
+    if (page !== oldProps.page) {
+      loadComments(page)
+    }
+  }
+
+  render() {
+    const { items } = this.props
+
+    if (!items) {
+      return null
+    }
+
+    return items.map((model) => {
+      return (
+        <p>
+          {model.text} <br />
+          <b>by {model.user}</b>
+        </p>
+      )
+    })
+  }
+}
+
+function mapStateToProps(state, ownProps) {
+  return {
+    items: state.allComments.entities.get(ownProps.page)
+  }
+}
+
+export default connect(
+  mapStateToProps,
+  { loadComments }
+)(CommentsPageList)

src/components/routes/comments-page.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import { connect } from 'react-redux'
+import CommentsNavigation from '../comments-navigation'
+import CommentsPageList from '../comments-page-list'
+
+function CommentsPage({ match, hasNext }) {
+  const page = match.params.page || 1
+  return (
+    <div>
+      <CommentsPageList page={page} />
+      <CommentsNavigation activePage={+page} hasNext={hasNext} />
+    </div>
+  )
+}
+
+function mapStateToProps(state, ownProps) {
+  const totalPagesCount = Math.ceil(state.allComments.itemsCount / 5)
+
+  return {
+    hasNext: totalPagesCount > +ownProps.match.params.page
+  }
+}
+
+export default connect(mapStateToProps)(CommentsPage)

src/constants/index.js

@@ -5,6 +5,8 @@ export const LOAD_ALL_ARTICLES = 'LOAD_ALL_ARTICLES'
 export const LOAD_ARTICLE = 'LOAD_ARTICLE'
 export const LOAD_ARTICLE_COMMENTS = 'LOAD_ARTICLE_COMMENTS'
 
+export const LOAD_COMMENTS = 'LOAD_COMMENTS'
+
 export const CHANGE_SELECTION = 'CHANGE_SELECTION'
 export const CHANGE_DATE_RANGE = 'CHANGE_DATE_RANGE'
 

src/reducer/all-comments.js

@@ -0,0 +1,33 @@
+import { OrderedMap, Record } from 'immutable'
+import { LOAD_COMMENTS, SUCCESS } from '../constants/index'
+
+import { arrToMap } from './utils'
+
+const ReducerState = Record({
+  entities: new OrderedMap({}),
+  itemsCount: 0,
+  loading: false,
+  loaded: false,
+  error: null
+})
+
+const CommentRecord = Record({
+  id: null,
+  user: null,
+  text: null
+})
+
+export default (state = new ReducerState(), action) => {
+  switch (action.type) {
+    case LOAD_COMMENTS + SUCCESS:
+      return state
+        .setIn(
+          ['entities', action.payload.page],
+          action.response.records.map((item) => new CommentRecord(item))
+        )
+        .set('itemsCount', action.response.total)
+
+    default:
+      return state
+  }
+}

src/reducer/index.js

@@ -2,11 +2,13 @@ import { combineReducers } from 'redux'
 import counterReducer from './counter'
 import articles from './articles'
 import comments from './comments'
+import allComments from './all-comments'
 import filters from './filters'
 
 export default combineReducers({
   counter: counterReducer,
   articles,
   comments,
-  filters
+  filters,
+  allComments
 })