You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
47 lines
1.4 KiB
47 lines
1.4 KiB
import React, { Component } from "react"; |
|
import { connect } from "react-redux"; |
|
import { Card, Container, Header, Label, List } from "semantic-ui-react"; |
|
|
|
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> |
|
<Card.Content> |
|
<Card.Header>{user.username || "No username!"}</Card.Header> |
|
<Card.Meta>{user.email || "No email!"}</Card.Meta> |
|
<Card.Description> |
|
<span> |
|
{user.client && "Client"}{user.provider && "Provider"} |
|
{!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}> |
|
{user.userinfo[key]} |
|
</List.Item>) |
|
})} |
|
</List>} |
|
</Card.Description> |
|
</Card.Content> |
|
<Card.Content extra> |
|
<Label color={user.is_active ? "teal" : "red"} size="tiny" tag> |
|
{user.is_active ? "Active" : "Deactivated"} |
|
</Label> |
|
</Card.Content> |
|
</Card> |
|
</Container> |
|
); |
|
|
|
export default connect(mapStateToProps)(Profile);
|
|
|