refactor: user badge && user interface type

src/components/UserBadge/UserBadge.tsx

@@ -8,30 +8,25 @@ import { userHasRoles } from 'helpers';
  * Returns the badge for user based on roles
  */
 const UserBadge: React.FC<{ roles: IUserRole[] }> = ({ roles }) => {
-  if (userHasRoles(roles, [UserRoleEnum.ADMIN])) {
+  const getCurrentRole = () => {
+    if (userHasRoles(roles, [UserRoleEnum.ADMIN])) return { name: 'Administrator', color: 'purple' };
+    if (userHasRoles(roles, [UserRoleEnum.TEACHER])) return { name: 'Teacher', color: 'orange' };
+    if (userHasRoles(roles, [UserRoleEnum.STUDENT])) return { name: 'Student', color: 'blue' };
+  };
+
+  const role = getCurrentRole();
+
+  if (role !== undefined) {
     return (
-      <Badge colorScheme='purple' variant='subtle'>
+      <Badge colorScheme={role.color} variant='subtle'>
-        Administrator
+        {role.name}
-      </Badge>
-    );
-  }
-
-  if (userHasRoles(roles, [UserRoleEnum.TEACHER])) {
-    return (
-      <Badge colorScheme='orange' variant='subtle'>
-        Teacher
-      </Badge>
-    );
-  }
-
-  if (userHasRoles(roles, [UserRoleEnum.STUDENT])) {
-    return (
-      <Badge colorScheme='orange' variant='subtle'>
-        Student
       </Badge>
     );
   }
 
+  /**
+   * Cannot find any role for user
+   */
   return null;
 };
 

src/interfaces/index.ts

@@ -63,7 +63,11 @@ export interface IUser {
   email: string;
   roles: IUserRole[];
   contacts: IUserContacts | null;
-  courses: UserCourseType[];
+  /**
+   * The field can be undefined if the user
+   * does not have the STUDENT role
+   */
+  courses?: UserCourseType[];
 }
 
 export interface IUserContacts {

src/pages/profile/components/CourseList/CourseList.tsx

@@ -8,10 +8,14 @@ type CourseListPropsType = {
 };
 
 /**
- *  Render the course list on profile page
+ *  Render the course list on profile page for STUDENT role
  *  in "Available courses" tab
  */
 const CourseList: React.FC<CourseListPropsType> = ({ courses }) => {
+  if (courses === undefined) {
+    return null;
+  }
+
   return (
     <Stack spacing='8' divider={<StackDivider />}>
       {courses.map(course => (

src/pages/profile/containers/ConfirmEmailContainer/ConfirmEmailContainer.tsx

@@ -10,7 +10,11 @@ import { useErrorHandler } from 'react-error-boundary';
 import { ProfilePageViewContext } from 'contexts';
 import useIsMountedRef from 'hooks/useIsMountedRef';
 
-const ConfirmEmailContainer: React.FC<{ data: ConfirmEmailContainerDataType }> = ({ data }) => {
+type ConfirmEmailContainerPropsType = {
+  data: ConfirmEmailContainerDataType;
+};
+
+const ConfirmEmailContainer: React.FC<ConfirmEmailContainerPropsType> = ({ data }) => {
   const { userStore } = useRootStore();
   const { setStatusPageView } = useContext(ProfilePageViewContext);
   const { sendConfirmationCode, loading } = useUpdateUserEmailQuery();