app\static\js\components\Profile(1).jsx

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import agent from '../agent';
import { connect } from 'react-redux';


const mapStateToProps = state => ({
    currentUser: state.common.currentUser,
    profile: state.profile
});

const mapDispatchToProps = dispatch => ({
    onLoad: payload => dispatch({ type: 'PROFILE_PAGE_LOADED', payload }),
    onUnload: () => dispatch({ type: 'PROFILE_PAGE_UNLOADED'})
});


const EditProfileSettings = props => {
    if (props.isUser) {
        return (
            <Link
                to="/settings"
                className="btn btn-sm btn-outline-secondary action-btn">
                Edit Profile Settings
            </Link>
        );
    }
    return null;
};

class Profile extends Component {
    componentWillMount() {
        this.props.onLoad(agent.Profile.get(this.props.match.params.username))
    };

    componentWillUnmount() {
        this.props.onUnload();
    }

    render() {
        const profile = this.props.profile;
        if (!profile) {
            return null;
        }

        const isUser = this.props.currentUser &&
            this.props.profile.username === this.props.currentUser.username;

        return (
            <div className="profile-page">
                <div className="user-info">
                    <div className="container">
                        <div className="col-xs-12 col-md-10 offset-md-1">

                            <img src={profile.image} className="user-img" alt={profile.username}/>
                            <h4>{profile.name ? profile.name : profile.username}</h4>
                            <p>{profile.about_me}</p>

                            <EditProfileSettings isUser={isUser}/>

                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Profile);
export { Profile, mapStateToProps };