From 95494c565837702fb4195e0657fcf05c4dd31756 Mon Sep 17 00:00:00 2001
From: Sergey Yarkov <serzh.yarkov@gmail.com>
Date: Tue, 24 Aug 2021 18:25:33 +0300
Subject: [PATCH] feat: user badge

---
 src/components/Header/User/UserBadge.tsx | 35 ++++++++++++++++++++++++
 src/components/Header/User/UserInfo.tsx  |  4 ++-
 src/enums/index.ts                       |  5 ++++
 src/interfaces/index.ts                  |  3 +-
 src/stores/UserStore.ts                  |  3 +-
 5 files changed, 47 insertions(+), 3 deletions(-)
 create mode 100644 src/components/Header/User/UserBadge.tsx
 create mode 100644 src/enums/index.ts

diff --git a/src/components/Header/User/UserBadge.tsx b/src/components/Header/User/UserBadge.tsx
new file mode 100644
index 0000000..7f1a340
--- /dev/null
+++ b/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;
diff --git a/src/components/Header/User/UserInfo.tsx b/src/components/Header/User/UserInfo.tsx
index cb82d59..e49e2d0 100644
--- a/src/components/Header/User/UserInfo.tsx
+++ b/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'>
diff --git a/src/enums/index.ts b/src/enums/index.ts
new file mode 100644
index 0000000..e6791a8
--- /dev/null
+++ b/src/enums/index.ts
@@ -0,0 +1,5 @@
+export enum UserRoleEnum {
+  ADMIN = 'admin',
+  TEACHER = 'teacher',
+  STUDENT = 'student',
+}
diff --git a/src/interfaces/index.ts b/src/interfaces/index.ts
index 41b8ce9..d516465 100644
--- a/src/interfaces/index.ts
+++ b/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 {
diff --git a/src/stores/UserStore.ts b/src/stores/UserStore.ts
index e6b245d..ab9eadf 100644
--- a/src/stores/UserStore.ts
+++ b/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 {