From 4664a5a41379dfe992a22f644af814eb67a1cd00 Mon Sep 17 00:00:00 2001
From: Dmitrii Lazucov <palzuncoff@MacBook-Dmitrii.local>
Date: Fri, 16 Mar 2018 16:15:58 +0200
Subject: [PATCH 01/11] Create Router

---
 src/App.js                          |  5 ++++-
 src/components/AllComments/index.js | 18 ++++++++++++++++++
 2 files changed, 22 insertions(+), 1 deletion(-)
 create mode 100644 src/components/AllComments/index.js

diff --git a/src/App.js b/src/App.js
index e7c257c..7981c71 100644
--- a/src/App.js
+++ b/src/App.js
@@ -5,6 +5,7 @@ import ArticlesPage from './components/routes/articles'
 import UserForm from './components/user-form'
 import Filters from './components/filters'
 import Counter from './components/counter'
+import AllComments from './components/AllComments'
 import 'react-select/dist/react-select.css'
 
 class App extends Component {
@@ -19,8 +20,10 @@ 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/5" activeStyle = {{ color: 'red' }}>comments</NavLink></li>
                 </ul>
                 <Switch>
+                    <Route path = "/comments/:count" component = {AllComments} />
                     <Route path = "/counter" component = {Counter} exact />
                     <Route path = "/filters" component = {Filters} />
                     <Route path = "/articles/new" render = {() => <h1>New Article Form</h1>} />
@@ -32,4 +35,4 @@ class App extends Component {
     }
 }
 
-export default App
\ No newline at end of file
+export default App
diff --git a/src/components/AllComments/index.js b/src/components/AllComments/index.js
new file mode 100644
index 0000000..21484aa
--- /dev/null
+++ b/src/components/AllComments/index.js
@@ -0,0 +1,18 @@
+import React from 'react'
+import { NavLink } from 'react-router-dom'
+import PropTypes from 'prop-types'
+import Comment from '../comment'
+
+class AllComments extends React.Component {
+  render() {
+    return(
+      <h1>{this.props.match.params.count}</h1>
+    )
+  }
+}
+
+AllComments.propTypes = {
+  match: PropTypes.object
+}
+
+export default AllComments

From 568f6f01bece6e5d96e17fe4a0e41405c8a410fb Mon Sep 17 00:00:00 2001
From: Dmitrii Lazucov <palzuncoff@MacBook-Dmitrii.local>
Date: Fri, 16 Mar 2018 16:33:39 +0200
Subject: [PATCH 02/11] Add AC

---
 src/AC/index.js                     | 12 ++++++++++--
 src/components/AllComments/index.js | 12 +++++++++++-
 src/constants/index.js              |  3 ++-
 3 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/src/AC/index.js b/src/AC/index.js
index d3d7bdb..ef14466 100644
--- a/src/AC/index.js
+++ b/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, START, SUCCESS, FAIL, LOAD_ALL_COMMENTS
 } from '../constants'
 
 export function increment() {
@@ -82,4 +82,12 @@ export function loadArticleComments(articleId) {
         payload: { articleId },
         callAPI: `/api/comment?article=${articleId}`
     }
-}
\ No newline at end of file
+}
+
+export function loadAllcomments(limit, offset) {
+  return {
+    type: LOAD_ALL_COMMENTS,
+    payload: { limit, offset },
+    callAPI: `/api/comment?limit=${limit}&offset=${offset}`
+  }
+}
diff --git a/src/components/AllComments/index.js b/src/components/AllComments/index.js
index 21484aa..707e405 100644
--- a/src/components/AllComments/index.js
+++ b/src/components/AllComments/index.js
@@ -1,9 +1,15 @@
 import React from 'react'
 import { NavLink } from 'react-router-dom'
 import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
 import Comment from '../comment'
+import { loadAllcomments } from '../../AC'
 
 class AllComments extends React.Component {
+  componentWillMount() {
+    this.props.loadAllcomments(this.props.match.params.count, 0)
+  }
+
   render() {
     return(
       <h1>{this.props.match.params.count}</h1>
@@ -15,4 +21,8 @@ AllComments.propTypes = {
   match: PropTypes.object
 }
 
-export default AllComments
+const mapDispatchToProps = {
+  loadAllcomments
+}
+
+export default connect(null, mapDispatchToProps)(AllComments)
diff --git a/src/constants/index.js b/src/constants/index.js
index c71387f..64d40c2 100644
--- a/src/constants/index.js
+++ b/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_ALL_COMMENTS = 'LOAD_ALL_COMMENTS'
 
 export const START = '_START'
 export const SUCCESS = '_SUCCESS'
-export const FAIL = '_FAIL'
\ No newline at end of file
+export const FAIL = '_FAIL'

From 78bc10391f273f0f3c43976b571e87e075dad9d2 Mon Sep 17 00:00:00 2001
From: Dmitrii Lazucov <palzuncoff@MacBook-Dmitrii.local>
Date: Sat, 17 Mar 2018 13:06:11 +0200
Subject: [PATCH 03/11] Add loadedIds to comments

---
 src/components/AllComments/index.js | 31 +++++++++++++++++++++++++----
 src/reducer/comments.js             | 12 ++++++++---
 src/selectors/index.js              |  4 +++-
 3 files changed, 39 insertions(+), 8 deletions(-)

diff --git a/src/components/AllComments/index.js b/src/components/AllComments/index.js
index 707e405..9f52193 100644
--- a/src/components/AllComments/index.js
+++ b/src/components/AllComments/index.js
@@ -4,25 +4,48 @@ import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import Comment from '../comment'
 import { loadAllcomments } from '../../AC'
+import { allCommentsSelector } from '../../selectors'
 
 class AllComments extends React.Component {
   componentWillMount() {
-    this.props.loadAllcomments(this.props.match.params.count, 0)
+    this.props.loadAllcomments(this.props.match.params.count, 4)
   }
 
   render() {
+    const { comments } = this.props
     return(
-      <h1>{this.props.match.params.count}</h1>
+      <div>
+        <h1>{this.props.match.params.count}</h1>
+        <ul>
+          {
+            comments.map(id =>
+              <li key = {id} className = "test__comment-list--item">
+                  <Comment id = {id}/>
+              </li>)
+          }
+        </ul>
+      </div>
     )
   }
 }
 
 AllComments.propTypes = {
-  match: PropTypes.object
+  match: PropTypes.object,
+  comments: PropTypes.array
+}
+
+AllComments.defaultProps = {
+  comments: []
+}
+
+const mapStateToProps = state => {
+  return {
+    comments: allCommentsSelector(state)
+  }
 }
 
 const mapDispatchToProps = {
   loadAllcomments
 }
 
-export default connect(null, mapDispatchToProps)(AllComments)
+export default connect(mapStateToProps, mapDispatchToProps)(AllComments)
diff --git a/src/reducer/comments.js b/src/reducer/comments.js
index 6586253..c79d25a 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_ALL_COMMENTS } from '../constants'
 import {Record, OrderedMap} from 'immutable'
 import {arrToMap} from './utils'
 
@@ -9,7 +9,8 @@ const CommentRecord = Record({
 })
 
 const ReducerState = Record({
-    entities: new OrderedMap({})
+    entities: new OrderedMap({}),
+    loadedIds: [],
 })
 
 export default (state = new ReducerState(), action) => {
@@ -25,7 +26,12 @@ export default (state = new ReducerState(), action) => {
         case LOAD_ARTICLE_COMMENTS + SUCCESS:
             return state.mergeIn(['entities'], arrToMap(response, CommentRecord))
 
+        case LOAD_ALL_COMMENTS + SUCCESS:
+            const ids = response.records.map(comment => comment.id)
+            return state.mergeIn(['entities'], arrToMap(response.records, CommentRecord))
+                .mergeIn(['loadedIds'], ids)
+
         default:
             return state
     }
-}
\ No newline at end of file
+}
diff --git a/src/selectors/index.js b/src/selectors/index.js
index 421e61a..ace466f 100644
--- a/src/selectors/index.js
+++ b/src/selectors/index.js
@@ -22,4 +22,6 @@ export const filtratedArticles = createSelector(articleListSelector, filtersSele
 
 export const articleSelector = createSelector(articlesMapSelector, idSelector, (articles, id) => articles.get(id))
 
-export const createCommentSelector = () => createSelector(commentsSelector, idSelector, (comments, id) => comments.get(id))
\ No newline at end of file
+export const createCommentSelector = () => createSelector(commentsSelector, idSelector, (comments, id) => comments.get(id))
+
+export const allCommentsSelector = state => state.comments.loadedIds

From 63f9460e71e48b799d856c9dd631f0db7dec1ac4 Mon Sep 17 00:00:00 2001
From: Dmitrii Lazucov <palzuncoff@MacBook-Dmitrii.local>
Date: Sat, 17 Mar 2018 13:22:21 +0200
Subject: [PATCH 04/11] Add total niumber to comments

---
 src/reducer/comments.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/reducer/comments.js b/src/reducer/comments.js
index c79d25a..f56c8e0 100644
--- a/src/reducer/comments.js
+++ b/src/reducer/comments.js
@@ -11,6 +11,7 @@ const CommentRecord = Record({
 const ReducerState = Record({
     entities: new OrderedMap({}),
     loadedIds: [],
+    total: null
 })
 
 export default (state = new ReducerState(), action) => {
@@ -30,6 +31,7 @@ export default (state = new ReducerState(), action) => {
             const ids = response.records.map(comment => comment.id)
             return state.mergeIn(['entities'], arrToMap(response.records, CommentRecord))
                 .mergeIn(['loadedIds'], ids)
+                .updateIn(['total'], value => response.total === value ? value : response.total )
 
         default:
             return state

From 634c84d36427cf12fe9d40c9b724be436d40e6fe Mon Sep 17 00:00:00 2001
From: Dmitrii Lazucov <palzuncoff@MacBook-Dmitrii.local>
Date: Sat, 17 Mar 2018 15:10:15 +0200
Subject: [PATCH 05/11] Add pagination buttons

---
 src/components/AllComments/index.js | 14 +++++++++++---
 src/selectors/index.js              |  3 +++
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/components/AllComments/index.js b/src/components/AllComments/index.js
index 9f52193..b1b0a69 100644
--- a/src/components/AllComments/index.js
+++ b/src/components/AllComments/index.js
@@ -4,15 +4,21 @@ import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import Comment from '../comment'
 import { loadAllcomments } from '../../AC'
-import { allCommentsSelector } from '../../selectors'
+import { allCommentsSelector, totalComments } from '../../selectors'
 
 class AllComments extends React.Component {
   componentWillMount() {
     this.props.loadAllcomments(this.props.match.params.count, 4)
   }
 
+  renderButtons = total => {
+    const count = new Array(Math.ceil(total / 5)).fill(null)
+    return count.map((_, index) => (
+      <button>{index + 1}</button>))
+  }
+
   render() {
-    const { comments } = this.props
+    const { comments, total } = this.props
     return(
       <div>
         <h1>{this.props.match.params.count}</h1>
@@ -24,6 +30,7 @@ class AllComments extends React.Component {
               </li>)
           }
         </ul>
+        {this.renderButtons(total)}
       </div>
     )
   }
@@ -40,7 +47,8 @@ AllComments.defaultProps = {
 
 const mapStateToProps = state => {
   return {
-    comments: allCommentsSelector(state)
+    comments: allCommentsSelector(state),
+    total: totalComments(state)
   }
 }
 
diff --git a/src/selectors/index.js b/src/selectors/index.js
index ace466f..6aae3a7 100644
--- a/src/selectors/index.js
+++ b/src/selectors/index.js
@@ -25,3 +25,6 @@ export const articleSelector = createSelector(articlesMapSelector, idSelector, (
 export const createCommentSelector = () => createSelector(commentsSelector, idSelector, (comments, id) => comments.get(id))
 
 export const allCommentsSelector = state => state.comments.loadedIds
+
+const totalCommentsSelector = state => state.comments.total
+export const totalComments = createSelector(totalCommentsSelector, total => total)

From 4d6937d0facb2d8bc597a42b59625c89d08a60d3 Mon Sep 17 00:00:00 2001
From: Dmitrii Lazucov <palzuncoff@MacBook-Dmitrii.local>
Date: Sat, 17 Mar 2018 15:37:22 +0200
Subject: [PATCH 06/11] Add page button handler

---
 src/components/AllComments/index.js | 29 ++++++++++++++++++++---------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/components/AllComments/index.js b/src/components/AllComments/index.js
index b1b0a69..7188fda 100644
--- a/src/components/AllComments/index.js
+++ b/src/components/AllComments/index.js
@@ -8,17 +8,26 @@ import { allCommentsSelector, totalComments } from '../../selectors'
 
 class AllComments extends React.Component {
   componentWillMount() {
-    this.props.loadAllcomments(this.props.match.params.count, 4)
+    this.props.loadAllcomments(this.props.match.params.count, 0)
   }
 
-  renderButtons = total => {
-    const count = new Array(Math.ceil(total / 5)).fill(null)
+  handlePageButton = () => {
+    this.props.loadAllcomments(this.props.match.params.count, this.props.comments.length)
+  }
+
+  renderButtons = (total, pages) => {
+    const count = new Array(Math.ceil(total / pages)).fill(null)
     return count.map((_, index) => (
-      <button>{index + 1}</button>))
+      <button
+        key={`button-page-${index + 1}`}
+        onClick={this.handlePageButton}
+      >
+        {index + 1}
+      </button>))
   }
 
   render() {
-    const { comments, total } = this.props
+    const { comments, total, count } = this.props
     return(
       <div>
         <h1>{this.props.match.params.count}</h1>
@@ -30,7 +39,7 @@ class AllComments extends React.Component {
               </li>)
           }
         </ul>
-        {this.renderButtons(total)}
+        {this.renderButtons(total, count)}
       </div>
     )
   }
@@ -38,17 +47,19 @@ class AllComments extends React.Component {
 
 AllComments.propTypes = {
   match: PropTypes.object,
-  comments: PropTypes.array
+  comments: PropTypes.array,
+  count: PropTypes.string
 }
 
 AllComments.defaultProps = {
   comments: []
 }
 
-const mapStateToProps = state => {
+const mapStateToProps = (state, ownProps) => {
   return {
     comments: allCommentsSelector(state),
-    total: totalComments(state)
+    total: totalComments(state),
+    count: ownProps.match.params.count
   }
 }
 

From 95cee38a55bbc7c9518aceaf2adc2dce9407f6d0 Mon Sep 17 00:00:00 2001
From: Dmitrii Lazucov <palzuncoff@MacBook-Dmitrii.local>
Date: Sun, 18 Mar 2018 15:53:26 +0200
Subject: [PATCH 07/11] Create link for comment page

---
 src/AC/index.js                            |  6 +--
 src/App.js                                 |  4 +-
 src/components/AllComments/CommentsPage.js | 50 ++++++++++++++++++++
 src/components/AllComments/index.js        | 54 +++++++++-------------
 src/reducer/comments.js                    |  4 +-
 src/reducer/utils.js                       |  2 +-
 src/selectors/index.js                     |  4 +-
 7 files changed, 82 insertions(+), 42 deletions(-)
 create mode 100644 src/components/AllComments/CommentsPage.js

diff --git a/src/AC/index.js b/src/AC/index.js
index ef14466..f515c4d 100644
--- a/src/AC/index.js
+++ b/src/AC/index.js
@@ -84,10 +84,10 @@ export function loadArticleComments(articleId) {
     }
 }
 
-export function loadAllcomments(limit, offset) {
+export function loadAllcomments(offset, page) {
   return {
     type: LOAD_ALL_COMMENTS,
-    payload: { limit, offset },
-    callAPI: `/api/comment?limit=${limit}&offset=${offset}`
+    payload: { offset, page },
+    callAPI: `/api/comment?limit=5&offset=${offset}`
   }
 }
diff --git a/src/App.js b/src/App.js
index 7981c71..e86b2c7 100644
--- a/src/App.js
+++ b/src/App.js
@@ -20,10 +20,10 @@ 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/5" activeStyle = {{ color: 'red' }}>comments</NavLink></li>
+                    <li><NavLink to = "/comments" activeStyle = {{ color: 'red' }}>comments</NavLink></li>
                 </ul>
                 <Switch>
-                    <Route path = "/comments/:count" component = {AllComments} />
+                    <Route path = "/comments" component = {AllComments} />
                     <Route path = "/counter" component = {Counter} exact />
                     <Route path = "/filters" component = {Filters} />
                     <Route path = "/articles/new" render = {() => <h1>New Article Form</h1>} />
diff --git a/src/components/AllComments/CommentsPage.js b/src/components/AllComments/CommentsPage.js
new file mode 100644
index 0000000..d91bc25
--- /dev/null
+++ b/src/components/AllComments/CommentsPage.js
@@ -0,0 +1,50 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+import Comment from '../comment'
+import { commentsByPage } from '../../selectors'
+import { loadAllcomments } from '../../AC'
+
+class CommentsPage extends React.Component {
+
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.page !== this.props.page) {
+      const { comments } = this.props
+      this.props.loadAllcomments((nextProps.page - 1)*5, nextProps.page)
+    }
+  }
+
+  render() {
+    const { comments } = this.props
+    return(
+      <ul>
+        {
+          comments.map(id =>
+            <li key = {id} className = "test__comment-list--item">
+                <Comment id = {id}/>
+            </li>)
+        }
+      </ul>
+    )
+  }
+}
+
+CommentsPage.propTypes = {
+  comments: PropTypes.array,
+}
+
+CommentsPage.defaultProps = {
+  comments: [],
+}
+
+const mapStateToProps = (state, ownProps) => {
+  return {
+    comments: commentsByPage(state, ownProps),
+  }
+}
+
+const mapDispatchToProps = {
+  loadAllcomments
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(CommentsPage)
diff --git a/src/components/AllComments/index.js b/src/components/AllComments/index.js
index 7188fda..0f1ff19 100644
--- a/src/components/AllComments/index.js
+++ b/src/components/AllComments/index.js
@@ -1,65 +1,53 @@
 import React from 'react'
-import { NavLink } from 'react-router-dom'
+import { NavLink, Route } from 'react-router-dom'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import Comment from '../comment'
+import CommentsPage from './CommentsPage'
 import { loadAllcomments } from '../../AC'
 import { allCommentsSelector, totalComments } from '../../selectors'
 
 class AllComments extends React.Component {
-  componentWillMount() {
-    this.props.loadAllcomments(this.props.match.params.count, 0)
-  }
 
-  handlePageButton = () => {
-    this.props.loadAllcomments(this.props.match.params.count, this.props.comments.length)
+  componentWillMount() {
+    this.props.loadAllcomments(0, 1)
   }
 
-  renderButtons = (total, pages) => {
-    const count = new Array(Math.ceil(total / pages)).fill(null)
+  renderButtons = total => {
+    const count = new Array(Math.ceil(total / 5)).fill(null)
     return count.map((_, index) => (
-      <button
-        key={`button-page-${index + 1}`}
-        onClick={this.handlePageButton}
-      >
-        {index + 1}
-      </button>))
+      <NavLink to={`/comments/${index + 1}`} key={`button-page-${index + 1}`} >
+        <button>{index + 1}</button>
+      </NavLink>
+      ))
   }
 
   render() {
-    const { comments, total, count } = this.props
+    const { total, match } = this.props
     return(
       <div>
-        <h1>{this.props.match.params.count}</h1>
-        <ul>
-          {
-            comments.map(id =>
-              <li key = {id} className = "test__comment-list--item">
-                  <Comment id = {id}/>
-              </li>)
-          }
-        </ul>
-        {this.renderButtons(total, count)}
+        <Route path = {`${match.path}/:page`} children = {this.getCommentsPage}/>
+        {this.renderButtons(total)}
       </div>
     )
   }
+
+  getCommentsPage = ({ match }) => {
+    if (!match) {
+      return <CommentsPage page={1} />
+    }
+    return <CommentsPage page={match.params.page} />
+  }
 }
 
 AllComments.propTypes = {
   match: PropTypes.object,
-  comments: PropTypes.array,
-  count: PropTypes.string
-}
-
-AllComments.defaultProps = {
-  comments: []
+  total: PropTypes.number
 }
 
 const mapStateToProps = (state, ownProps) => {
   return {
-    comments: allCommentsSelector(state),
     total: totalComments(state),
-    count: ownProps.match.params.count
   }
 }
 
diff --git a/src/reducer/comments.js b/src/reducer/comments.js
index f56c8e0..d3a4745 100644
--- a/src/reducer/comments.js
+++ b/src/reducer/comments.js
@@ -10,7 +10,7 @@ const CommentRecord = Record({
 
 const ReducerState = Record({
     entities: new OrderedMap({}),
-    loadedIds: [],
+    loadedPages: new OrderedMap({}),
     total: null
 })
 
@@ -30,7 +30,7 @@ export default (state = new ReducerState(), action) => {
         case LOAD_ALL_COMMENTS + SUCCESS:
             const ids = response.records.map(comment => comment.id)
             return state.mergeIn(['entities'], arrToMap(response.records, CommentRecord))
-                .mergeIn(['loadedIds'], ids)
+                .mergeIn(['loadedPages'], new OrderedMap({[payload.page]: ids}))
                 .updateIn(['total'], value => response.total === value ? value : response.total )
 
         default:
diff --git a/src/reducer/utils.js b/src/reducer/utils.js
index e8c7c63..042c8ba 100644
--- a/src/reducer/utils.js
+++ b/src/reducer/utils.js
@@ -5,4 +5,4 @@ export function arrToMap(arr, DataRecord) {
         acc.set(item.id, DataRecord ? new DataRecord(item) : item)
         , new OrderedMap({})
     )
-}
\ No newline at end of file
+}
diff --git a/src/selectors/index.js b/src/selectors/index.js
index 6aae3a7..e51fee3 100644
--- a/src/selectors/index.js
+++ b/src/selectors/index.js
@@ -24,7 +24,9 @@ export const articleSelector = createSelector(articlesMapSelector, idSelector, (
 
 export const createCommentSelector = () => createSelector(commentsSelector, idSelector, (comments, id) => comments.get(id))
 
-export const allCommentsSelector = state => state.comments.loadedIds
+const allCommentsSelector = state => state.comments.loadedPages.toJS()
+const getPage = (_, props) => props.page
+export const commentsByPage = createSelector(allCommentsSelector, getPage, (comments, page) => comments[page])
 
 const totalCommentsSelector = state => state.comments.total
 export const totalComments = createSelector(totalCommentsSelector, total => total)

From 0f67e99fc3aafe64f802dffb8df9b1cc867ecd91 Mon Sep 17 00:00:00 2001
From: Dmitrii Lazucov <palzuncoff@MacBook-Dmitrii.local>
Date: Sun, 18 Mar 2018 16:23:18 +0200
Subject: [PATCH 08/11] Add Loader

---
 src/components/AllComments/CommentsPage.js | 24 ++++++++++++++--------
 src/reducer/comments.js                    |  9 ++++++--
 src/selectors/index.js                     |  2 ++
 3 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/src/components/AllComments/CommentsPage.js b/src/components/AllComments/CommentsPage.js
index d91bc25..d091edd 100644
--- a/src/components/AllComments/CommentsPage.js
+++ b/src/components/AllComments/CommentsPage.js
@@ -2,8 +2,9 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import Comment from '../comment'
-import { commentsByPage } from '../../selectors'
+import { commentsByPage, commentsLoading } from '../../selectors'
 import { loadAllcomments } from '../../AC'
+import Loader from '../loader'
 
 class CommentsPage extends React.Component {
 
@@ -15,16 +16,20 @@ class CommentsPage extends React.Component {
   }
 
   render() {
-    const { comments } = this.props
+    const { comments, loading } = this.props
     return(
-      <ul>
-        {
-          comments.map(id =>
-            <li key = {id} className = "test__comment-list--item">
-                <Comment id = {id}/>
-            </li>)
+      <div>
+        {loading ? <Loader/> :
+          <ul>
+            {
+              comments.map(id =>
+                <li key = {id} className = "test__comment-list--item">
+                    <Comment id = {id}/>
+                </li>)
+            }
+          </ul>
         }
-      </ul>
+      </div>
     )
   }
 }
@@ -40,6 +45,7 @@ CommentsPage.defaultProps = {
 const mapStateToProps = (state, ownProps) => {
   return {
     comments: commentsByPage(state, ownProps),
+    loading: commentsLoading(state)
   }
 }
 
diff --git a/src/reducer/comments.js b/src/reducer/comments.js
index d3a4745..8a32b6e 100644
--- a/src/reducer/comments.js
+++ b/src/reducer/comments.js
@@ -1,4 +1,4 @@
-import { ADD_COMMENT, LOAD_ARTICLE_COMMENTS, SUCCESS, LOAD_ALL_COMMENTS } from '../constants'
+import { ADD_COMMENT, LOAD_ARTICLE_COMMENTS, SUCCESS, LOAD_ALL_COMMENTS, START } from '../constants'
 import {Record, OrderedMap} from 'immutable'
 import {arrToMap} from './utils'
 
@@ -11,7 +11,8 @@ const CommentRecord = Record({
 const ReducerState = Record({
     entities: new OrderedMap({}),
     loadedPages: new OrderedMap({}),
-    total: null
+    total: null,
+    loading: false,
 })
 
 export default (state = new ReducerState(), action) => {
@@ -27,11 +28,15 @@ export default (state = new ReducerState(), action) => {
         case LOAD_ARTICLE_COMMENTS + SUCCESS:
             return state.mergeIn(['entities'], arrToMap(response, CommentRecord))
 
+        case LOAD_ALL_COMMENTS + START:
+          return state.updateIn(['loading'], value => true)
+
         case LOAD_ALL_COMMENTS + SUCCESS:
             const ids = response.records.map(comment => comment.id)
             return state.mergeIn(['entities'], arrToMap(response.records, CommentRecord))
                 .mergeIn(['loadedPages'], new OrderedMap({[payload.page]: ids}))
                 .updateIn(['total'], value => response.total === value ? value : response.total )
+                .updateIn(['loading'], value => false)
 
         default:
             return state
diff --git a/src/selectors/index.js b/src/selectors/index.js
index e51fee3..58b7659 100644
--- a/src/selectors/index.js
+++ b/src/selectors/index.js
@@ -30,3 +30,5 @@ export const commentsByPage = createSelector(allCommentsSelector, getPage, (comm
 
 const totalCommentsSelector = state => state.comments.total
 export const totalComments = createSelector(totalCommentsSelector, total => total)
+
+export const commentsLoading = state => state.comments.loading

From b1487308af8865c454c810a7b0dc16e4f47f5e88 Mon Sep 17 00:00:00 2001
From: Dmitrii Lazucov <palzuncoff@MacBook-Dmitrii.local>
Date: Sun, 18 Mar 2018 16:51:56 +0200
Subject: [PATCH 09/11] Comments page load once

---
 src/AC/index.js        | 25 +++++++++++++++++++++----
 src/middlewares/api.js |  4 ++--
 2 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/src/AC/index.js b/src/AC/index.js
index f515c4d..50f910b 100644
--- a/src/AC/index.js
+++ b/src/AC/index.js
@@ -85,9 +85,26 @@ export function loadArticleComments(articleId) {
 }
 
 export function loadAllcomments(offset, page) {
-  return {
-    type: LOAD_ALL_COMMENTS,
-    payload: { offset, page },
-    callAPI: `/api/comment?limit=5&offset=${offset}`
+  return (dispatch, getState) => {
+    const pageLoaded = getState().comments.loadedPages.has(page)
+    if (!pageLoaded) {
+      dispatch({
+        type: LOAD_ALL_COMMENTS + START,
+      })
+
+      setTimeout(() => {
+          fetch(`/api/comment?limit=5&offset=${offset}`)
+              .then(res => res.json())
+              .then(response => dispatch({
+                  type: LOAD_ALL_COMMENTS + SUCCESS,
+                  payload: { page },
+                  response
+              }))
+              .catch(error => dispatch({
+                  type: LOAD_ALL_COMMENTS + FAIL,
+                  payload: { page, error }
+              }))
+      }, 1000)
+    }
   }
 }
diff --git a/src/middlewares/api.js b/src/middlewares/api.js
index 2386a76..0581553 100644
--- a/src/middlewares/api.js
+++ b/src/middlewares/api.js
@@ -8,7 +8,7 @@ export default store => next => action => {
         type: type + START,
         ...rest
     })
-
+    
     //REMOVE THIS!
     setTimeout(() => {
         fetch(callAPI)
@@ -16,4 +16,4 @@ export default store => next => action => {
             .then(response => next({ ...rest, type: type + SUCCESS, response }))
             .catch(error => next({ ...rest, type: type + FAIL, error }))
     }, 1000)
-}
\ No newline at end of file
+}

From b62cc797d3bc6f2fad95cedd6a5e6b2f6b318780 Mon Sep 17 00:00:00 2001
From: Dmitrii Lazucov <palzuncoff@MacBook-Dmitrii.local>
Date: Sun, 18 Mar 2018 17:07:55 +0200
Subject: [PATCH 10/11] Fix

---
 src/components/AllComments/CommentsPage.js | 2 ++
 src/components/AllComments/index.js        | 4 ++--
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/AllComments/CommentsPage.js b/src/components/AllComments/CommentsPage.js
index d091edd..93e1f45 100644
--- a/src/components/AllComments/CommentsPage.js
+++ b/src/components/AllComments/CommentsPage.js
@@ -36,6 +36,8 @@ class CommentsPage extends React.Component {
 
 CommentsPage.propTypes = {
   comments: PropTypes.array,
+  loading: PropTypes.bool,
+  loadAllcomments: PropTypes.fun
 }
 
 CommentsPage.defaultProps = {
diff --git a/src/components/AllComments/index.js b/src/components/AllComments/index.js
index 0f1ff19..4554111 100644
--- a/src/components/AllComments/index.js
+++ b/src/components/AllComments/index.js
@@ -9,7 +9,7 @@ import { allCommentsSelector, totalComments } from '../../selectors'
 
 class AllComments extends React.Component {
 
-  componentWillMount() {
+  componentDidMount() {
     this.props.loadAllcomments(0, 1)
   }
 
@@ -34,7 +34,7 @@ class AllComments extends React.Component {
 
   getCommentsPage = ({ match }) => {
     if (!match) {
-      return <CommentsPage page={1} />
+      return <CommentsPage page={"1"} />
     }
     return <CommentsPage page={match.params.page} />
   }

From 25eb0505d60c89127580a80f49c0dba85778a47d Mon Sep 17 00:00:00 2001
From: Dmitrii Lazucov <palzuncoff@MacBook-Dmitrii.local>
Date: Sun, 18 Mar 2018 17:22:34 +0200
Subject: [PATCH 11/11] Fix first loading

---
 src/components/AllComments/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/AllComments/index.js b/src/components/AllComments/index.js
index 4554111..2d50da0 100644
--- a/src/components/AllComments/index.js
+++ b/src/components/AllComments/index.js
@@ -10,7 +10,7 @@ import { allCommentsSelector, totalComments } from '../../selectors'
 class AllComments extends React.Component {
 
   componentDidMount() {
-    this.props.loadAllcomments(0, 1)
+    this.props.loadAllcomments(0, "1")
   }
 
   renderButtons = total => {