Add user posts to their pages

src/actions/index.js

@@ -11,11 +11,9 @@ export const fetchPost = (slug) => async (dispatch) => {
 };
 
 export const fetchUserProfile = (user) => async (dispatch) => {
-    const response = await sudoscientist.get('/users/' + user);
-    dispatch({ type: 'FETCH_USER_PROFILE', payload: response.data })
-};
-
-export const fetchUserPosts = (user) => async (dispatch) => {
-    const response = await sudoscientist.get('/blog/by-author/' + user);
-    dispatch({ type: 'FETCH_USER_POSTS', payload: response.data })
+    const profile = await sudoscientist.get('/users/' + user);
+    const userPosts = await sudoscientist.get('/blog/by-author/' + user);
+    const test = {posts: userPosts.data}
+    const response = { ...profile.data, ...test }
+    dispatch({ type: 'FETCH_USER', payload: response })
 };

src/components/PostList.js

@@ -4,6 +4,7 @@ import { connect } from 'react-redux';
 import { fetchPosts } from '../actions';
 import { Link } from 'react-router-dom';
 
+
 class PostList extends React.Component {
     componentDidMount() {
         this.props.fetchPosts();
@@ -15,16 +16,17 @@ class PostList extends React.Component {
             const post = posts.entities[id]
             return (
                 <div className="item" key={post.id}>
+                    <h1>Blog Posts</h1>
                     <div className="content">
                         <div className="description">
-                            <h1><b><u><Link to={"/posts/" + post.slug}>{post.title}</Link></u></b></h1>
+                            <h2><b><u><Link to={"/posts/" + post.slug}>{post.title}</Link></u></b></h2>
                             <h3><b>By <Link to={"/users/"+ post.author}>{post.author}</Link></b></h3>
                             <ReactMarkdown source={post.content} />
                         </div>
                     </div>
                 </div>
             );
-        });
+        }).reverse();
     }
 
 

src/components/User.js

@@ -1,6 +1,8 @@
 import React from 'react';
+import ReactMarkdown from 'react-markdown';
 import { connect } from 'react-redux';
 import { fetchUserProfile } from '../actions';
+import { Link } from 'react-router-dom';
 
 class User extends React.Component {
     constructor (props) {
@@ -14,6 +16,22 @@ class User extends React.Component {
         this.props.fetchUserProfile(user)
         .then(() => this.setState({isLoading: false}))
     }
+    renderList() {
+        const posts = this.props.user.currentUser.posts
+        return posts.map(post => {
+            return (
+                <div className="item" key={post.id}>
+                    <div className="content">
+                        <div className="description">
+                            <h2><b><u><Link to={"/posts/" + post.slug}>{post.title}</Link></u></b></h2>
+                            <h3><b>By <Link to={"/users/"+ post.author}>{post.author}</Link></b></h3>
+                            <ReactMarkdown source={post.content} />
+                        </div>
+                    </div>
+                </div>
+            );
+        });
+    }
 
     render () {
         const {user} = this.props
@@ -24,13 +42,16 @@ class User extends React.Component {
         } else {
             const currentUser = user.currentUser
             return (
-                <div className="item" key={currentUser.username}>
-                    <div className="content">
+                <div className="content">
+                    <div className="item" key={currentUser.username}>
                         <div className="description">
-                            <h1><b>{currentUser.username}</b></h1>
-                            <h3><u>Email: {currentUser.email}</u></h3>
+                            <h1><b>This is the page of: {currentUser.username}</b></h1>
+                            <h4><u>Email: {currentUser.email}</u></h4>
                             <div>Location: {currentUser.location}</div>
                             <div>About Me: {currentUser.bio}</div>
+                            <div className="ui relaxed divided list">
+                                {this.renderList()}
+                            </div>
                         </div>
                     </div>
                 </div>

src/reducers/userReducer.js

@@ -1,10 +1,10 @@
 const initialState = {
-    currentUser: ""
+    currentUser: {}
 };
 
 export default (state = initialState, action) => {
     switch (action.type) {
-        case 'FETCH_USER_PROFILE':
+        case 'FETCH_USER':
             return {currentUser: action.payload}
         default:
             return state;