caremyway-client/src/components/User/Profile.jsx

import React, { Component } from "react";
import { connect } from "react-redux";
import { Link } from "react-router-dom";
import { Card, Container, Header, Label, List } from "semantic-ui-react";

import ClientProfile from "./Client/ClientProfile";

class Profile extends Component {
  render() {
    const { selfUser } = this.props;
    return <ProfileView user={selfUser} />;
  }
}

function mapStateToProps(state) {
  return { ...state.user };
}

const ProfileView = ({ user }) => (
  <Container>
    <Header>Profile</Header>
    <Card fluid={true}>
      <Card.Content>
        <Card.Header>{user.username || "No username!"}</Card.Header>
        <Card.Meta>
          {user.client && <Label color="blue" size="tiny">Client</Label>}
          {user.provider && <Label color="orange" size="tiny">Provider</Label>}
          <Label color={user.is_active ? "teal" : "red"} size="tiny">
            {user.is_active ? "Active" : "Deactivated"}
          </Label>
          {" "}{user.email || "No email!"}
        </Card.Meta>
        <Card.Description>
          <span>
            {!user.client &&
              !user.provider &&
              "User Registration Not Completed"}
          </span>
          {user.first_name} {user.last_name}
          {user.userinfo &&
            <List>
              {Object.keys(user.userinfo).map(function(key) {
                return (
                  <List.Item key={key}>
                    {key}: {user.userinfo[key]}
                  </List.Item>
                );
              })}
            </List>}
        </Card.Description>
      </Card.Content>
      <Card.Content extra>
        <Link to="/user/profile/edit">Edit Profile</Link>
      </Card.Content>
    </Card>
    {user.client && <ClientProfile />}
    {user.provider && <div />}
  </Container>
);

export default connect(mapStateToProps)(Profile);