Trying to figure out comments

src/actions/index.js

@@ -9,7 +9,7 @@ export const fetchPosts = () => async (dispatch) => {
 export const fetchPost = (slug) => async (dispatch) => {
     const post = await sudoscientist.get('/blog/posts/by-slug/' + slug)
     const comments = await sudoscientist.get('/blog/comments/' + post.data.id);
-    const response = { ...post.data, ...comments.data }
+    const response = { post: post.data, comments: comments.data }
     dispatch({ type: 'FETCH_POST', payload: response })
 };
 

src/components/Post.js

@@ -18,27 +18,55 @@ class Post extends React.Component {
             .then(() => this.setState({isLoading: false}))
     }
 
-    render () {
+    renderComments() {
+        //if (comments.length) {
+          //return comments.map(comment => {
+          //    return (
+          //        <div className="item" key={comment.id}>
+          //            <div className="content">
+          //                <div className="markdown-body">
+          //                  <ReactMarkdown source={comment.content} />
+          //                </div>
+          //            </div>
+          //        </div>
+          //    );
+          //});
+        //}
+    }
+
+    renderPost() {
         const {posts} = this.props
+        const post = posts.entities[posts.currentId]
+        console.log(post)
+        return(
+            <div className="container">
+            <div className="item" key={post.id}>
+                <div className="content">
+                    <div className="description">
+                        <h1><b><u><Link to={"/posts/" + post.slug}>{post.title}</Link></u></b></h1>
+                        <h3><b>By <Link to={"/users/"+ post.author}>{post.author}</Link></b></h3>
+                        <h4>Posted {post.time_published}</h4>
+                        <div className="markdown-body">
+                            <ReactMarkdown source={post.content} />
+                        </div>
+                    </div>
+                </div>
+            </div>
+            { this.renderComments(post.comments) }
+            </div>
+        )
+    }
+
+    render () {
         const {isLoading} = this.state
 
         if (isLoading) {
             return <p>Loading</p>
         } else {
-            const post = posts.entities[posts.currentId]
             return (
-                <div className="item" key={post.id}>
-                    <div className="content">
-                        <div className="description">
-                            <h1><b><u><Link to={"/posts/" + post.slug}>{post.title}</Link></u></b></h1>
-                            <h3><b>By <Link to={"/users/"+ post.author}>{post.author}</Link></b></h3>
-                            <h4>Posted {post.time_published}</h4>
-                            <div className="markdown-body">
-                              <ReactMarkdown source={post.content} />
-                            </div>
-                        </div>
-                    </div>
-                </div>
+              <div>
+                { this.renderPost() }
+              </div>
             );
         }
     }
@@ -47,8 +75,7 @@ class Post extends React.Component {
 const mapStateToProps = (state) => {
     return {
         posts: state.posts,
-        slug: state.slug,
-        comments: state.comments
+        slug: state.slug
     };
 }
 

src/reducers/postsReducer.js

@@ -17,8 +17,8 @@ export default (state = initialState, action) => {
             return {...state, ...{entities: mergedEntities}}
 
         case 'FETCH_POST':
-            mergedEntities = normalizeEntities(state.entities, [action.payload])
-            return {...state, ...{entities: mergedEntities, currentId: action.payload.id}}
+            mergedEntities = normalizeEntities(state.entities, [action.payload.post])
+            return {...state, ...{entities: mergedEntities, currentId: action.payload.post.id}}
         default:
             return state;
     }