HW-6 only 1 page

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
+    INCREMENT, DELETE_ARTICLE, CHANGE_DATE_RANGE, CHANGE_SELECTION, ADD_COMMENT, LOAD_ALL_ARTICLES, LOAD_ARTICLE, LOAD_COMMENTS,
+    LOAD_ARTICLE_COMMENTS, LIMIT, START, SUCCESS, FAIL
 } from '../constants'
 
 export function increment() {
@@ -82,4 +82,12 @@ export function loadArticleComments(articleId) {
         payload: { articleId },
         callAPI: `/api/comment?article=${articleId}`
     }
+}
+
+export function loadCommentsList(i = 1) {
+    return {
+        type: LOAD_COMMENTS,
+        payload: { i },
+        callAPI: `/api/comment?limit=${LIMIT * i}&offset=${LIMIT * ++i}`
+    }
 }

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 CommentsLists from './components/routes/comments'
 import UserForm from './components/user-form'
 import Filters from './components/filters'
 import Counter from './components/counter'
@@ -25,11 +26,13 @@ class App extends Component {
                     <Route path = "/filters" component = {Filters} />
                     <Route path = "/articles/new" render = {() => <h1>New Article Form</h1>} />
                     <Route path = "/articles" component = {ArticlesPage} />
+                    <Route path = "/comments" component = {CommentsLists} />
                     <Route path = "*" render = {() => <h1>Not Found Page</h1>} />
                 </Switch>
             </div>
         )
     }
 }
 
-export default App
+export default App
+//export default withRouter(connect(mapStateToProps)(App))

src/components/routes/comments.js

@@ -0,0 +1,63 @@
+import React, { Component } from 'react'
+import { Route, NavLink } from 'react-router-dom'
+import { connect } from 'react-redux'
+import Loader from '../loader'
+import { commentListSelector } from '../../selectors'
+import { loadCommentsList } from '../../AC'
+import { LIMIT } from '../../constants'
+
+class CommentsRoute extends Component {
+    componentDidMount(){
+        const {loadCommentsList} = this.props
+        loadCommentsList()
+    }
+    componentWillReceiveProps(){
+        //console.log("need rerender!")
+    }
+    render(){
+        const {total} = this.props
+
+        return (
+            <div>
+                { this.getLinks(total) }
+               <Route {...this.props} path = {`${this.props.match.path}/:list`} children = {this.getComments}/>
+            </div>
+        )
+    }
+
+    getComments = ({ match }) => {
+        if (!match) return <h3>Select comments list </h3>
+        const {loadedComments} = this.props
+        if (!loadedComments) return <Loader/>
+        const list = loadedComments[match.params.list - 1]
+        if ( !list || !list.length) return <Loader/>
+        const commentElement = list.map( comment => {
+            return(
+                <div key={comment.id}>
+                    <b>{comment.user}</b>: {comment.text}
+                </div>
+            )
+        })
+        return <section>{ commentElement }</section>
+    }
+
+    getLinks = (total) => {
+        if (!total) return <Loader/>
+        const count = Math.floor(total/ LIMIT) +( total % LIMIT === 0 ? 0 : 1)
+        const links =(Array.from(Array(count).keys())).map( i => {
+            const p = i + 1
+            return <li key = {i}>
+                <NavLink to={`${this.props.match.path}/${p}`}>{p}</NavLink>
+            </li>
+        })
+        return <ul>
+            {links}
+            </ul>
+    }
+}
+
+
+export default connect(state => ({
+    loadedComments: commentListSelector(state),
+    total: state.comments.total
+}), { loadCommentsList })(CommentsRoute)

src/constants/index.js

@@ -9,6 +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_COMMENTS = 'LOAD_COMMENTS'
+export const LIMIT = 5
 
 export const START = '_START'
 export const SUCCESS = '_SUCCESS'

src/reducer/comments.js

@@ -1,4 +1,4 @@
-import { ADD_COMMENT, LOAD_ARTICLE_COMMENTS, SUCCESS } from '../constants'
+import { ADD_COMMENT, LOAD_ARTICLE_COMMENTS, LOAD_COMMENTS, START, SUCCESS } from '../constants'
 import {Record, OrderedMap} from 'immutable'
 import {arrToMap} from './utils'
 
@@ -9,7 +9,9 @@ const CommentRecord = Record({
 })
 
 const ReducerState = Record({
-    entities: new OrderedMap({})
+    entities: new OrderedMap({}),
+    loadedComments: [],
+    total: null
 })
 
 export default (state = new ReducerState(), action) => {
@@ -25,6 +27,16 @@ export default (state = new ReducerState(), action) => {
         case LOAD_ARTICLE_COMMENTS + SUCCESS:
             return state.mergeIn(['entities'], arrToMap(response, CommentRecord))
 
+        case LOAD_COMMENTS + START:
+            let item = state.loadedComments[payload.i - 1]
+            return typeof item === 'undefined' ? state.setIn(['loadedComments', payload.i - 1], false) : state
+
+        case LOAD_COMMENTS + SUCCESS:
+            console.log("SUCCESS load comments: ", response)
+
+            return state.set('total', response.total)
+                .setIn(['loadedComments', payload.i - 1], response.records)//arrToMap(response.records, CommentRecord))
+
         default:
             return state
     }

src/selectors/index.js

@@ -8,6 +8,7 @@ export const loadedArticlesSelector = state => state.articles.loaded
 const commentsSelector = state => state.comments.entities
 const filtersSelector = state => state.filters
 const idSelector = (_, props) => props.id
+export const commentListSelector = state => state.comments.get('loadedComments')
 
 export const filtratedArticles = createSelector(articleListSelector, filtersSelector, (articles, filters) => {
     const {selected, dateRange: {from, to}} = filters