create comment route only HT6.1

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_COMMENT
 } from '../constants'
 
 export function increment() {
@@ -82,4 +82,24 @@ export function loadArticleComments(articleId) {
         payload: { articleId },
         callAPI: `/api/comment?article=${articleId}`
     }
+}
+
+export function loadCommentOnNumber(commentNumber) {
+    return (dispatch) => {
+        dispatch({
+            type: LOAD_COMMENT + START,
+            payload: { commentNumber }
+        })
+
+        fetch(`/api/comment?limit=1&offset=${commentNumber}`)
+            .then(res => res.json())
+            .then(response => dispatch({
+                type: LOAD_COMMENT + SUCCESS,
+                payload: { commentNumber, response }
+            }))
+            .catch(error => dispatch({
+                type: LOAD_COMMENT + FAIL,
+                payload: { commentNumber, error }
+            }))
+    }
 }

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 CommentRoute from './components/routes/comment'
 import UserForm from './components/user-form'
 import Filters from './components/filters'
 import Counter from './components/counter'
@@ -25,6 +26,7 @@ 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 = "/comment/:commentNumber" component = {CommentRoute}/>
                     <Route path = "*" render = {() => <h1>Not Found Page</h1>} />
                 </Switch>
             </div>

src/components/comment-list/index.js

@@ -63,12 +63,14 @@ class CommentList extends Component {
     }
 
     getComments() {
+        const {comments} = this.props;
+
         return (
             <ul>
                 {
                     this.props.article.comments.map(id =>
                         <li key = {id} className = "test__comment-list--item">
-                            <Comment id = {id}/>
+                            <Comment id = {id} comment={comments.get(id)}/>
                         </li>)
                 }
             </ul>
@@ -77,4 +79,6 @@ class CommentList extends Component {
 }
 
 
-export default connect(null, { loadArticleComments })(toggleOpen(CommentList))
+export default connect(state => ({
+        comments: state.comments.entities
+    }), { loadArticleComments })(toggleOpen(CommentList))

src/components/comment.js

@@ -1,7 +1,5 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { connect } from 'react-redux'
-import { createCommentSelector } from '../selectors'
 
 function Comment({comment}) {
     return (
@@ -18,12 +16,5 @@ Comment.propTypes = {
     }).isRequired
 }
 
-const createMapStateToProps = () => {
-    const commentSelector = createCommentSelector()
 
-    return (state, ownProps) => ({
-        comment: commentSelector(state, ownProps)
-    })
-}
-
-export default connect(createMapStateToProps)(Comment)
+export default Comment

src/components/routes/comment.js

@@ -0,0 +1,49 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import { Route } from 'react-router-dom'
+import Comment from '../comment';
+import { loadCommentOnNumber } from '../../AC'
+import { oneCommentSelector } from '../../selectors';
+
+class CommentRoute extends Component {
+    static propTypes = {
+        loadCommentOnNumber: PropTypes.func,
+        match: PropTypes.object
+    }
+
+    componentWillReceiveProps(nextProps) {
+        console.log('nextProps', nextProps);
+    }
+
+    componentDidMount() {
+        const { match, loadCommentOnNumber, comment } = this.props;
+
+        if (match && !comment) {
+            console.log(match.params.commentNumber);
+            loadCommentOnNumber(match.params.commentNumber);
+        }
+    }
+
+    render() {
+        const { match, comment } = this.props;
+
+        if (!match) return <h2>Please select an number comment</h2>
+        if (!comment) return null;
+
+        if (comment) {
+            return <Comment comment={comment}/>
+        }
+    }
+}
+
+
+const createMapStateToProps = () => {
+    const commentSelector = oneCommentSelector()
+
+    return (state, ownProps) => ({
+        comment: commentSelector(state, ownProps.match.params)
+    })
+}
+
+export default connect(createMapStateToProps, { loadCommentOnNumber })(CommentRoute);

src/constants/index.js

@@ -4,6 +4,7 @@ export const DELETE_ARTICLE = 'DELETE_ARTICLE'
 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_COMMENT = 'LOAD_COMMENT'
 
 export const CHANGE_SELECTION = 'CHANGE_SELECTION'
 export const CHANGE_DATE_RANGE = 'CHANGE_DATE_RANGE'

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_COMMENT } 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({}),
+    commentsList: new OrderedMap({}),
 })
 
 export default (state = new ReducerState(), action) => {
@@ -25,6 +26,9 @@ export default (state = new ReducerState(), action) => {
         case LOAD_ARTICLE_COMMENTS + SUCCESS:
             return state.mergeIn(['entities'], arrToMap(response, CommentRecord))
 
+        case LOAD_COMMENT + SUCCESS:
+            return state.setIn(['commentsList', payload.commentNumber], payload.response.records[0]);
+
         default:
             return state
     }

src/selectors/index.js

@@ -8,6 +8,8 @@ export const loadedArticlesSelector = state => state.articles.loaded
 const commentsSelector = state => state.comments.entities
 const filtersSelector = state => state.filters
 const idSelector = (_, props) => props.id
+const onlyCommentListSelector = state => state.comments.commentsList
+const commentNumberSelector = (_, props) => props.commentNumber
 
 export const filtratedArticles = createSelector(articleListSelector, filtersSelector, (articles, filters) => {
     const {selected, dateRange: {from, to}} = filters
@@ -22,4 +24,7 @@ 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))
+export const createCommentSelector = () => createSelector(commentsSelector, idSelector, (comments, id) => comments.get(id))
+
+export const oneCommentSelector = () => createSelector(onlyCommentListSelector, commentNumberSelector,
+    (comments, number) => comments.get(number))