feat: added typing for course category & lesson

src/components/UserBadge/UserBadge.tsx

@@ -25,7 +25,11 @@ const UserBadge: React.FC<{ roles: IUserRole[] }> = ({ roles }) => {
   }
 
   if (userHasRoles(roles, [UserRoleEnum.STUDENT])) {
-    return <Badge variant='green'>Student</Badge>;
+    return (
+      <Badge colorScheme='orange' variant='subtle'>
+        Student
+      </Badge>
+    );
   }
 
   return null;

src/interfaces/index.ts

@@ -11,6 +11,31 @@ export interface IAppConfig {
   links: LinkType[];
 }
 
+export interface ICourse {
+  id: string;
+  title: string;
+  description: string;
+  teacher: Pick<IUser, 'id' | 'first_name' | 'last_name' | 'email'>;
+  category: ICategory;
+  lessons: ILesson[];
+  students: Pick<IUser, 'id' | 'first_name' | 'last_name' | 'email'>;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface ILesson {
+  id: string;
+  course_id: string;
+  title: string;
+  description: string;
+}
+
+export interface ICategory {
+  id: string;
+  title: string;
+  description: string;
+}
+
 export interface IUser {
   id: string;
   fullname: string;
@@ -19,6 +44,7 @@ export interface IUser {
   email: string;
   roles: IUserRole[];
   contacts: IUserContacts | null;
+  courses: Pick<ICourse, 'id' | 'title' | 'description' | 'created_at' | 'updated_at'>[];
 }
 
 export interface IUserContacts {

src/pages/profile/index.tsx

@@ -11,6 +11,8 @@ import {
   Tab,
   TabPanels,
   TabPanel,
+  Stack,
+  StackDivider,
 } from '@chakra-ui/react';
 import { IPageProps } from 'interfaces';
 import { ProfilePageStatusType } from 'types';
@@ -18,6 +20,7 @@ import { useRootStore } from 'hooks/useRootStore';
 import { useHistory } from 'react-router-dom';
 import { observer } from 'mobx-react';
 import { ProfilePageViewContext } from 'contexts';
+import { userHasRoles } from 'helpers';
 import UserBadge from 'components/UserBadge';
 import LoadingPage from './components/LoadingPage';
 import UserAccountInfo from './components/UserAccountInfo';
@@ -25,6 +28,7 @@ import UpdateUserContactsForm from './components/UpdateUserContactsForm';
 import UpdatePasswordContainer from './containers/UpdatePasswordContainer';
 import UpdateEmailContainer from './containers/UpdateEmailContainer';
 import ConfirmEmailContainer from './containers/ConfirmEmailContainer';
+import { UserRoleEnum } from 'enums';
 
 /**
  * Profile page
@@ -45,6 +49,8 @@ const ProfilePage: React.FC<IPageProps> = () => {
     return <LoadingPage />;
   }
 
+  const isStudent = userHasRoles(userStore.me.roles, [UserRoleEnum.STUDENT]);
+
   return (
     <ProfilePageViewContext.Provider value={{ statusPageView: statusPageView.status, setStatusPageView }}>
       {statusPageView.status === 'default' && (
@@ -108,6 +114,7 @@ const ProfilePage: React.FC<IPageProps> = () => {
               <TabList>
                 <Tab>Account information</Tab>
                 <Tab>My contacts</Tab>
+                {isStudent && <Tab>Available courses</Tab>}
               </TabList>
               <TabPanels>
                 <TabPanel padding='10px 0' mt='20px'>
@@ -116,6 +123,31 @@ const ProfilePage: React.FC<IPageProps> = () => {
                 <TabPanel padding='10px 0' mt='20px'>
                   <UpdateUserContactsForm contacts={userStore.me.contacts} />
                 </TabPanel>
+                {isStudent && (
+                  <TabPanel padding='10px 0' mt='20px'>
+                    <Box>
+                      <Stack spacing='8' divider={<StackDivider />}>
+                        {userStore.me.courses.map(course => (
+                          <Box
+                            key={course.id}
+                            borderWidth='1px'
+                            borderRadius='md'
+                            p='10px'
+                            cursor='pointer'
+                            onClick={() => {
+                              history.push(`/course/${course.id}`);
+                            }}
+                          >
+                            <Heading as='h3' size='md'>
+                              {course.title}
+                            </Heading>
+                            <Text>{course.description}</Text>
+                          </Box>
+                        ))}
+                      </Stack>
+                    </Box>
+                  </TabPanel>
+                )}
               </TabPanels>
             </Tabs>
           </Box>

src/stores/UserStore.ts

@@ -44,9 +44,11 @@ export default class UserStore {
     try {
       const result = await this.userService.fetchMe();
       const {
-        data: { id, first_name, last_name, email, roles, contacts },
+        data: { id, first_name, last_name, email, roles, contacts, courses },
       } = result;
 
+      console.log(result);
+
       runInAction(() => {
         this.me = {
           id,
@@ -56,6 +58,7 @@ export default class UserStore {
           email,
           roles,
           contacts,
+          courses,
         };
       });