Fetched User data on Login, modified PrivateRoute logic

src/components/User/Profile.jsx

@@ -0,0 +1,47 @@
+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);