Minor cleanup of profile page for clients and providers

src/components/User/Profile.jsx

@@ -22,21 +22,43 @@ const ProfileView = ({ user }) => (
         <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"}
+            {!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>}
+          <List>
+            {user.userinfo &&
+              Object.keys(user.userinfo).map(function(key) {
+                return (
+                  <List.Item key={key}>
+                    {key}: {user.userinfo[key]}
+                  </List.Item>
+                );
+              })}
+            {user.client &&
+              Object.keys(user.client).map(function(key) {
+                return (
+                  <List.Item key={key}>
+                    {key}: {user.client[key]}
+                  </List.Item>
+                );
+              })}
+            {user.provider &&
+              Object.keys(user.provider).map(function(key) {
+                return (
+                  <List.Item key={key}>
+                    {key}: {user.provider[key]}
+                  </List.Item>
+                );
+              })}
+          </List>
         </Card.Description>
       </Card.Content>
       <Card.Content extra>
-        <Label color={user.is_active ? "teal" : "red"} size="tiny" tag>
+        {user.client && <Label color="blue">Client</Label>}
+        {user.provider && <Label color="orange">Provider</Label>}
+        <Label color={user.is_active ? "teal" : "red"}>
           {user.is_active ? "Active" : "Deactivated"}
         </Label>
       </Card.Content>