HT-6 Sitnikov Anton

src/ac/index.js

@@ -7,6 +7,7 @@ import {
   LOAD_ALL_ARTICLES,
   LOAD_ARTICLE,
   LOAD_ARTICLE_COMMENTS,
+  LOAD_COMMENTS,
   SUCCESS,
   FAIL,
   START
@@ -80,6 +81,17 @@ export function loadArticleById(id) {
   }
 }
 
+export function loadCommentsByPage(page) {
+  const limit = 5
+  const offset = (page - 1) * limit
+
+  return {
+    type: LOAD_COMMENTS,
+    payload: { page },
+    callAPI: `/api/comment?limit=${limit}&offset=${offset}`
+  }
+}
+
 export function loadArticleComments(articleId) {
   return {
     type: LOAD_ARTICLE_COMMENTS,

src/components/app.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react'
 import { Route, NavLink, Switch } from 'react-router-dom'
 import ArticlesPage from './routes/articles-page'
+import Comments from './routes/comments-page'
 import UserForm from './user-form'
 import Filters from './filters'
 import Counter from './counter'
@@ -25,6 +26,11 @@ class App extends Component {
               counter
             </NavLink>
           </div>
+          <div>
+            <NavLink to="/comments/1" activeStyle={{ color: 'red' }}>
+              comments
+            </NavLink>
+          </div>
         </nav>
         <UserForm />
 
@@ -36,6 +42,7 @@ class App extends Component {
             render={() => <h1>New Article Page</h1>}
           />
           <Route path="/articles" component={ArticlesPage} />
+          <Route path="/comments" component={Comments} />
           <Route path="*" render={() => <h1>Not Found Page</h1>} />
         </Switch>
       </div>

src/components/comments-rss.js

@@ -0,0 +1,51 @@
+import React, { PureComponent } from 'react'
+import { connect } from 'react-redux'
+import { loadCommentsByPage } from './../ac'
+import Comment from './comment'
+import Loader from './common/loader'
+import { pageStateSelector } from '../selectors'
+import Pagination from './pagination'
+
+class Article extends PureComponent {
+  state = {
+    error: null
+  }
+
+  componentDidCatch(error) {
+    this.setState({ error })
+  }
+
+  componentDidMount() {
+    const { page } = this.props
+    const { loadCommentsByPage, pageState } = this.props
+    if (!pageState) loadCommentsByPage(page)
+  }
+
+  render() {
+    const { pageState } = this.props
+    if (!pageState || pageState.loading) return <Loader />
+
+    return (
+      <div>
+        <ul>
+          {pageState.commentIds.map((id) => (
+            <li key={id}>
+              <Comment id={id} />
+            </li>
+          ))}
+        </ul>
+
+        <Pagination count={pageState.total} perPage="5" />
+      </div>
+    )
+  }
+}
+
+export default connect(
+  (state, props) => {
+    return {
+      pageState: pageStateSelector(state, props.page)
+    }
+  },
+  { loadCommentsByPage }
+)(Article)

src/components/pagination.js

@@ -0,0 +1,37 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { NavLink } from 'react-router-dom'
+
+class Pagination extends Component {
+  static propTypes = {
+    count: PropTypes.number,
+    perPage: PropTypes.string
+  }
+
+  render() {
+    return (
+      <ul>
+        {this.pagesArray.map((val, idx) => (
+          <li key={idx}>
+            <NavLink to={`/comments/${val}`} activeStyle={{ color: 'red' }}>
+              {val}
+            </NavLink>
+          </li>
+        ))}
+      </ul>
+    )
+  }
+
+  get pagesArray() {
+    const number = Math.ceil(this.props.count / this.props.perPage)
+    let arr = []
+
+    for (let i = 1; i <= number; i++) {
+      arr.push(i)
+    }
+
+    return arr
+  }
+}
+
+export default Pagination

src/components/routes/comments-page.js

@@ -0,0 +1,20 @@
+import React, { Component, Fragment } from 'react'
+import { Route } from 'react-router-dom'
+import CommentsRss from '../comments-rss'
+
+class CommentsPage extends Component {
+  render() {
+    return (
+      <Fragment>
+        <Route path="/comments/:page" children={this.getComments} />
+      </Fragment>
+    )
+  }
+
+  getComments = ({ match }) => {
+    const { page } = match.params
+
+    return <CommentsRss page={page} key={page} />
+  }
+}
+export default CommentsPage

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_ARTICLE_COMMENTS = 'LOAD_ARTICLE_COMMENTS'
 
+export const LOAD_COMMENTS = 'LOAD_COMMENTS'
+
 export const START = '_START'
 export const SUCCESS = '_SUCCESS'
 export const FAIL = '_FAIL'

src/reducer/comments.js

@@ -1,4 +1,10 @@
-import { ADD_COMMENT, LOAD_ARTICLE_COMMENTS, SUCCESS } from '../constants'
+import {
+  ADD_COMMENT,
+  LOAD_COMMENTS,
+  LOAD_ARTICLE_COMMENTS,
+  SUCCESS,
+  START
+} from '../constants'
 import { Record, OrderedMap } from 'immutable'
 import { arrToMap } from './utils'
 
@@ -8,8 +14,16 @@ const CommentRecord = Record({
   user: null
 })
 
+const PageRecord = Record({
+  commentIds: new OrderedMap({}),
+  loading: false,
+  loaded: false,
+  total: 0
+})
+
 const ReducerRecord = Record({
-  entities: new OrderedMap({})
+  entities: new OrderedMap({}),
+  byPageEntities: arrToMap([], PageRecord)
 })
 
 export default (state = new ReducerRecord(), action) => {
@@ -26,8 +40,25 @@ export default (state = new ReducerRecord(), action) => {
       )
 
     case LOAD_ARTICLE_COMMENTS + SUCCESS:
+      console.log(response)
       return state.mergeIn(['entities'], arrToMap(response, CommentRecord))
 
+    case LOAD_COMMENTS + START:
+      return state
+        .setIn(['byPageEntities', payload.page], new PageRecord())
+        .setIn(['byPageEntities', payload.page, 'loading'], true)
+
+    case LOAD_COMMENTS + SUCCESS:
+      return state
+        .mergeIn(['entities'], arrToMap(response.records, CommentRecord))
+        .setIn(['byPageEntities', payload.page, 'loading'], false)
+        .setIn(['byPageEntities', payload.page, 'loaded'], true)
+        .setIn(['byPageEntities', payload.page, 'total'], response.total)
+        .setIn(
+          ['byPageEntities', payload.page, 'commentIds'],
+          response.records.map((comment) => comment.id)
+        )
+
     default:
       return state
   }

src/selectors/index.js

@@ -5,12 +5,15 @@ export const dateRangeSelector = (state) => state.filters.dateRange
 export const articlesLoadingSelector = (state) => state.articles.loading
 export const articlesLoadedSelector = (state) => state.articles.loaded
 export const articlesMapSelector = (state) => state.articles.entities
+export const pagesStateMapSelector = (state) => state.comments.byPageEntities
+
 export const articleListSelector = createSelector(
   articlesMapSelector,
   (articlesMap) => articlesMap.valueSeq().toArray()
 )
 export const commentsSelector = (state) => state.comments
 export const idSelector = (_, props) => props.id
+export const pageSelector = (_, page) => page
 
 export const filtratedArticlesSelector = createSelector(
   selectionSelector,
@@ -41,3 +44,11 @@ export const articleSelector = createSelector(
   idSelector,
   (articles, id) => articles.get(id)
 )
+
+export const pageStateSelector = createSelector(
+  pagesStateMapSelector,
+  pageSelector,
+  (pagesList, page) => {
+    return pagesList.get(page)
+  }
+)