Hometask 7

src/AC/index.js

@@ -1,6 +1,7 @@
 import {
     INCREMENT, DELETE_ARTICLE, CHANGE_DATE_RANGE, CHANGE_SELECTION, ADD_COMMENT,
-    LOAD_ALL_ARTICLES, LOAD_ARTICLE, LOAD_ARTICLE_COMMENTS, START, SUCCESS, FAIL
+    LOAD_ALL_ARTICLES, LOAD_ARTICLE, LOAD_ARTICLE_COMMENTS, START, SUCCESS, FAIL,
+    LOAD_COMMENTS_PAGE
 } from '../constants'
 
 export function increment() {
@@ -73,4 +74,11 @@ export function loadArticleComments(articleId) {
         payload: { articleId },
         callAPI: `/api/comment?article=${articleId}`
     }
+}
+
+export function loadCommentsPage(url) {
+    return {
+        type: LOAD_COMMENTS_PAGE,
+        callAPI: url,
+    }
 }

src/components/App.js

@@ -3,6 +3,7 @@ import ArticleListPage from './routes/ArticleList'
 import UserForm from './UserForm'
 import FiltersPage from './routes/Filters'
 import CounterPage from './routes/Counter'
+import CommentsPage from './routes/CommentsPagination'
 import { Route, Switch, NavLink } from 'react-router-dom'
 
 class App extends Component {
@@ -14,14 +15,16 @@ class App extends Component {
                     <li><NavLink to = "/articles" activeStyle = {{ color: 'red' }}>Articles</NavLink></li>
                     <li><NavLink to = "/filters" activeStyle = {{ color: 'red' }}>Filters</NavLink></li>
                     <li><NavLink to = "/counter" activeStyle = {{ color: 'red' }}>Counter</NavLink></li>
+                    <li><NavLink to = "/comments/1" activeStyle = {{ color: 'red' }}>Comments</NavLink></li>
                 </ul>
                 <UserForm />
                 <Switch>
                     <Route path = "/counter" component = {CounterPage} exact/>
                     <Route path = "/filters" component = {FiltersPage}/>
+                    <Route path = "/comments" component = {CommentsPage}/>
                     <Route path = "/articles/new" render = {() => <h2>Add new Article form</h2>}/>
-                    <Route path = "/articles" component = {ArticleListPage}/>
-                    <Route path = "*" render = {() => <h1>Nor found</h1>}/>
+                    <Route path = "/articles/1" component = {ArticleListPage}/>
+                    <Route path = "*" render = {() => <h1>Not found</h1>}/>
                 </Switch>
             </div>
         )

src/components/routes/ArticleList.js

@@ -19,6 +19,7 @@ class ArticleListPage extends Component {
     }
 
     getArticle = ({ match }) => {
+        console.log('---match', match)
         if (!match) return <h2>Please select an article</h2>
         return <Article id = {match.params.id} isOpen key = {match.params.id} />
     }

src/components/routes/Comment.js

@@ -0,0 +1,41 @@
+import React, { Component } from 'react'
+import {connect} from 'react-redux'
+import {Route} from 'react-router-dom'
+import {commentsSelector} from '../../selectors'
+import {loadCommentsPage} from '../../AC'
+import {propTypes} from 'prop-types'
+
+class Comment extends Component {
+    static propTypes = {
+
+    };
+
+    componentDidMount() {
+        const {loadCommentsPage, page} = this.props;
+        const offset = 5*page
+        loadCommentsPage(`/api/comment?limit=5&offset=${offset}`);
+    }
+
+    render() {
+        const {comments} = this.props
+
+        if (!comments.length) return <h3>loading...</h3>
+
+        const commentElements = comments.map((comment) => <li key={comment.id}>
+            {comment.text} <b>by {comment.user}</b>
+        </li>)
+
+        return (
+            <ul>
+                {commentElements}
+            </ul>
+        )
+    }
+}
+
+export default connect(state => {
+    return {
+        comments: commentsSelector(state),
+    }
+}, {loadCommentsPage})(Comment)
+

src/components/routes/CommentsPagination.js

@@ -0,0 +1,46 @@
+import React, { Component } from 'react'
+import Comment from './Comment'
+import {connect} from 'react-redux'
+import {Route} from 'react-router-dom'
+import {commentsTotal} from '../../selectors'
+import {NavLink} from 'react-router-dom'
+import {propTypes} from 'prop-types'
+
+class CommentsPagination extends Component {
+    static propTypes = {
+
+    };
+
+    render() {
+        const {comments, total} = this.props
+        let pagination = [];
+
+        for (let i = 0; i < total; i += 5) {
+            pagination.push(<li key={i}>
+                <NavLink to = {`/comments/${i/5 + 1}`} activeStyle = {{color: 'red'}}>{i/5 + 1}</NavLink>
+            </li>)
+        }
+
+        return (
+            <div>
+                <ul>
+                    {pagination}
+                </ul>
+                <Route path = {`/comments/:page`} children = {this.getComment} />
+            </div>
+        )
+    }
+
+    getComment = ({ match }) => {
+        console.log('match', match);
+        if (!match) return <h2>Please select an comment</h2>
+        return <Comment page = {match.params.page - 1} key = {match.params.page} />
+    }
+}
+
+export default connect(state => {
+    return {
+        total: commentsTotal(state),
+    }
+})(CommentsPagination)
+

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_COMMENTS_PAGE = 'LOAD_COMMENTS_PAGE'
+
 export const START = '_START'
 export const SUCCESS = '_SUCCESS'
 export const FAIL = '_FAIL'

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_COMMENTS_PAGE } from '../constants'
 import { arrToMap } from './utils'
 import { OrderedMap, Record } from 'immutable'
 
@@ -9,7 +9,8 @@ const CommentRecord = Record({
 })
 
 const ReducerState = Record({
-    entities: new OrderedMap({})
+    entities: new OrderedMap({}),
+    total: 0
 })
 
 
@@ -22,6 +23,12 @@ export default (state = new ReducerState(), action) => {
 
         case LOAD_ARTICLE_COMMENTS + SUCCESS:
             return state.mergeIn(['entities'], arrToMap(response, CommentRecord))
+
+        case LOAD_COMMENTS_PAGE + SUCCESS:
+            console.log('---response', response)
+            return state
+                .set(['entities'], arrToMap(response.records), CommentRecord)
+                .set('total', response.total)
     }
 
     return state

src/selectors/index.js

@@ -2,12 +2,15 @@ import {createSelector} from 'reselect'
 
 export const articlesMapSelector = state => state.articles.entities
 export const articlesLoadingSelector = state => state.articles.loading
+export const commentsTotal = state => state.comments.total
 export const filtersSelector = state => state.filters
 export const commentMapSelector = state => state.comments.get('entities')
 export const idSelector = (_, props) => props.id
 
 export const articlesSelector = createSelector(articlesMapSelector, articles => articles.valueSeq().toArray())
 
+export const commentsSelector = createSelector(commentMapSelector, comments => comments.valueSeq().toArray())
+
 export const filtratedArticlesSelector = createSelector(articlesSelector, filtersSelector, (articles, filters) => {
     const {selected, dateRange: {from, to}} = filters
 
@@ -24,4 +27,5 @@ export const articleSelector = createSelector(articlesMapSelector, idSelector,
 
 export const createCommentSelector = () => createSelector(commentMapSelector, idSelector, (comments, id) => {
     return comments.get(id)
-})
+})
+