diff --git a/public/index.html b/public/index.html index b2151e2..1c852f1 100644 --- a/public/index.html +++ b/public/index.html @@ -4,7 +4,7 @@ - + + React App diff --git a/src/actions/index.js b/src/actions/index.js index 1dab25f..1293557 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -9,3 +9,13 @@ export const fetchPost = (slug) => async (dispatch) => { const response = await sudoscientist.get('/blog/by-slug/' + slug); dispatch({ type: 'FETCH_POST', payload: response.data }) }; + +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 }) +}; diff --git a/src/components/App.js b/src/components/App.js index a63320c..973f8f6 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -3,6 +3,7 @@ import { BrowserRouter as Router, Route, Switch } from "react-router-dom"; import NavBar from './NavBar'; import PostList from './PostList'; import Post from './Post'; +import User from './User'; function App() { return ( @@ -13,6 +14,7 @@ function App() { + diff --git a/src/components/NavBar.js b/src/components/NavBar.js index 82a6bbe..8e665d0 100644 --- a/src/components/NavBar.js +++ b/src/components/NavBar.js @@ -8,9 +8,8 @@ class NavBar extends Component { classes += ' active'; } return ( -
+
sudoscientist:~# - Users Posts About
diff --git a/src/components/Post.js b/src/components/Post.js index e2c888e..3265260 100644 --- a/src/components/Post.js +++ b/src/components/Post.js @@ -30,6 +30,7 @@ class Post extends React.Component {

{post.title}

+

By {post.author}

diff --git a/src/components/PostList.js b/src/components/PostList.js index d967a5f..9d48805 100644 --- a/src/components/PostList.js +++ b/src/components/PostList.js @@ -18,6 +18,7 @@ class PostList extends React.Component {

{post.title}

+

By {post.author}

diff --git a/src/components/User.js b/src/components/User.js new file mode 100644 index 0000000..33d5b8b --- /dev/null +++ b/src/components/User.js @@ -0,0 +1,51 @@ +import React from 'react'; +import { connect } from 'react-redux'; +import { fetchUserProfile } from '../actions'; + +class User extends React.Component { + constructor (props) { + super(props) + this.state = { + isLoading: true + } + } + componentDidMount() { + const { user } = this.props.match.params + this.props.fetchUserProfile(user) + .then(() => this.setState({isLoading: false})) + } + + render () { + const {user} = this.props + const {isLoading} = this.state + + if (isLoading) { + return

Loading

+ } else { + const currentUser = user.currentUser + return ( +
+
+
+

{currentUser.username}

+

Email: {currentUser.email}

+
Location: {currentUser.location}
+
About Me: {currentUser.bio}
+
+
+
+ ); + } + } +} + +const mapStateToProps = (state) => { + return { + user: state.user, + }; +} + +export default connect( + mapStateToProps, + { fetchUserProfile } +)(User); diff --git a/src/reducers/index.js b/src/reducers/index.js index dad0a1a..fcc93a0 100644 --- a/src/reducers/index.js +++ b/src/reducers/index.js @@ -1,6 +1,8 @@ import { combineReducers } from 'redux'; import postsReducer from './postsReducer'; +import userReducer from './userReducer'; export default combineReducers({ - posts: postsReducer + posts: postsReducer, + user: userReducer }); diff --git a/src/reducers/userReducer.js b/src/reducers/userReducer.js new file mode 100644 index 0000000..153e729 --- /dev/null +++ b/src/reducers/userReducer.js @@ -0,0 +1,12 @@ +const initialState = { + currentUser: "" +}; + +export default (state = initialState, action) => { + switch (action.type) { + case 'FETCH_USER_PROFILE': + return {currentUser: action.payload} + default: + return state; + } +};