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);