52 lines
1.4 KiB
JavaScript
52 lines
1.4 KiB
JavaScript
|
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 <p>Loading</p>
|
||
|
|
} else {
|
||
|
|
const currentUser = user.currentUser
|
||
|
|
return (
|
||
|
|
<div className="item" key={currentUser.username}>
|
||
|
|
<div className="content">
|
||
|
|
<div className="description">
|
||
|
|
<h1><b>{currentUser.username}</b></h1>
|
||
|
|
<h3><u>Email: {currentUser.email}</u></h3>
|
||
|
|
<div>Location: {currentUser.location}</div>
|
||
|
|
<div>About Me: {currentUser.bio}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const mapStateToProps = (state) => {
|
||
|
|
return {
|
||
|
|
user: state.user,
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
export default connect(
|
||
|
|
mapStateToProps,
|
||
|
|
{ fetchUserProfile }
|
||
|
|
)(User);
|