feat: user badge

src/components/Header/User/UserBadge.tsx

@@ -0,0 +1,35 @@
+import { Badge } from '@chakra-ui/react';
+import React from 'react';
+import { UserRoleEnum } from '../../../enums';
+import { IUserRole } from '../../../interfaces';
+
+/**
+ * Returns the badge for user based on roles
+ */
+const UserBadge: React.FC<{ roles: IUserRole[] }> = ({ roles }) => {
+  const slugs = roles.map(role => role.slug);
+
+  if (slugs.includes(UserRoleEnum.ADMIN)) {
+    return (
+      <Badge colorScheme='purple' variant='subtle'>
+        Administrator
+      </Badge>
+    );
+  }
+
+  if (slugs.includes(UserRoleEnum.TEACHER)) {
+    return (
+      <Badge colorScheme='orange' variant='subtle'>
+        Teacher
+      </Badge>
+    );
+  }
+
+  if (slugs.includes(UserRoleEnum.STUDENT)) {
+    return <Badge variant='green'>Student</Badge>;
+  }
+
+  return null;
+};
+
+export default UserBadge;

src/components/Header/User/UserInfo.tsx

@@ -18,6 +18,7 @@ import { MdSettings, MdExitToApp } from 'react-icons/md';
 import { observer } from 'mobx-react';
 import { useRootStore } from '../../../hooks/useRootStore';
 import { useHistory, Link } from 'react-router-dom';
+import UserBadge from './UserBadge';
 
 const UserInfo: React.FC = () => {
   const { authStore, userStore } = useRootStore();
@@ -35,7 +36,7 @@ const UserInfo: React.FC = () => {
   };
 
   if (userStore.me === null) {
-    return <Skeleton width='160px' borderRadius='md' />;
+    return <Skeleton width='180px' borderRadius='md' />;
   }
 
   return (
@@ -47,6 +48,7 @@ const UserInfo: React.FC = () => {
             <Text as='span' mr={2}>
               {`${userStore.me.first_name} ${userStore.me.last_name}`}
             </Text>
+            <UserBadge roles={userStore.me.roles} />
           </Flex>
         </MenuButton>
         <MenuList mr='1rem'>

src/enums/index.ts

@@ -0,0 +1,5 @@
+export enum UserRoleEnum {
+  ADMIN = 'admin',
+  TEACHER = 'teacher',
+  STUDENT = 'student',
+}

src/interfaces/index.ts

@@ -1,6 +1,7 @@
 import { IconType } from 'react-icons/lib';
 import type { RouteProps } from 'react-router-dom';
 import type { RouteComponentProps } from 'react-router-dom';
+import { UserRoleEnum } from '../enums';
 
 export type LinkType = {
   location: string;
@@ -19,7 +20,7 @@ export interface IAppConfig {
 export interface IUserRole {
   id: number;
   name: string;
-  slug: string;
+  slug: UserRoleEnum;
 }
 
 export interface IDataResult {

src/stores/UserStore.ts

@@ -1,6 +1,6 @@
 import { AxiosInstance } from 'axios';
 import { makeAutoObservable, runInAction } from 'mobx';
-import { IUserResult } from '../interfaces';
+import { IUserResult, IUserRole } from '../interfaces';
 import UserService from '../services/UserService';
 import RootStore from './RootStore';
 
@@ -9,6 +9,7 @@ export interface IUser {
   first_name: string;
   last_name: string;
   email: string;
+  roles: IUserRole[];
 }
 
 export default class UserStore {