display user level using role and status

#69
yalla-coop · Oct 5, 2019 · 5d55c0d · 5d55c0d
1 parent 858181f
commit 5d55c0d
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 19 deletions.
diff --git a/src/components/Admin/Users/UserListItem.js b/src/components/Admin/Users/UserListItem.js
@@ -1,21 +1,23 @@
 import React from 'react';
 import { List, Icon, Tag } from 'antd';
-import { RoleTile, UserTitle } from './Users.style';
+import { UserTitle } from './Users.style';
 import { renderUserDetails } from '../../../constants/users';
 import { userRoleColor } from '../../../constants/colors';
 
+const UserLevel = ({ role, status }) => {
+  if (role === 'user' && status === 'unverified') {
+    return null;
+  }
+  return (
+    <Tag color={userRoleColor[role]}>{renderUserDetails(role, status)}</Tag>
+  );
+};
+
 const Title = ({ name, status, role }) => {
   return (
     <UserTitle>
       <div style={{ marginRight: '0.4rem' }}>{name}</div>
-      <div>
-        <Tag color={userRoleColor[role]}>{renderUserDetails[role]}</Tag>
-        {status !== 'unverified' ? (
-          <Icon type="check" style={{ marginLeft: '0.5rem', color: 'green' }} />
-        ) : (
-          ''
-        )}
-      </div>
+      <UserLevel role={role} status={status} />
     </UserTitle>
   );
 };

diff --git a/src/constants/users.js b/src/constants/users.js
@@ -15,14 +15,13 @@ export const status = {
 
 export const statusEnum = Object.values(status);
 
-export const renderUserDetails = {
-  // role
-  user: 'User',
-  superUser: 'Super User',
-  admin: 'Admin',
-  // status
-  unverified: 'Unverified',
-  verified: 'Verified',
-  rejected: 'Rejected',
-  awaitingSuperUser: 'Awaiting Super User',
+export const renderUserDetails = (userRole, userStatus) => {
+  switch (userRole) {
+    case roles.ADMIN:
+      return 'Admin';
+    case roles.SUPERUSER:
+      return 'Super User';
+    default:
+      return userStatus !== 'unverified' ? 'Verified' : '';
+  }
 };