feat: render courses by status param

src/contexts/index.ts

@@ -27,4 +27,6 @@ export const UsersPageContext = createContext<UsersPageContextType>({
 export const CoursesPageContext = createContext<CoursesPageContextType>({
   selectedCategory: undefined,
   setSelectedCategory: () => {},
+  courseStatus: undefined,
+  setCourseStatus: () => {},
 });

src/pages/courses/components/CourseList/CourseList.tsx

@@ -29,11 +29,11 @@ type CourseListPropsType = {
 
 const CourseList: React.FC<CourseListPropsType> = ({ courses, isLoading }) => {
   const { courseStore } = useRootStore();
-  const { selectedCategory } = useContext(CoursesPageContext);
+  const { selectedCategory, courseStatus } = useContext(CoursesPageContext);
 
   useEffect(() => {
-    courseStore.loadCourses({ category_id: selectedCategory?.id });
-  }, [courseStore, selectedCategory]);
+    courseStore.loadCourses({ category_id: selectedCategory?.id, status: courseStatus });
+  }, [courseStore, selectedCategory, courseStatus]);
 
   if (isLoading || courses === null) {
     return <CourseListLoading />;
@@ -60,7 +60,7 @@ const CourseList: React.FC<CourseListPropsType> = ({ courses, isLoading }) => {
         </Grid>
       ) : (
         <Box textAlign='center' mt='10' userSelect='none'>
-          <Text color='gray.500'>There are no courses in this category.</Text>
+          <Text color='gray.500'>There are no courses in this category {courseStatus && 'or with this status'}.</Text>
         </Box>
       )}
     </>

src/pages/courses/components/CourseStatusTabs/CourseStatusTabs.tsx

@@ -0,0 +1,28 @@
+import React, { useContext } from 'react';
+import { Tabs, TabList, Tab } from '@chakra-ui/react';
+import { CoursesPageContext } from 'contexts';
+import { CourseStatusEnum } from 'enums';
+
+type CourseStatusTabsProps = {};
+
+const CourseStatusTabs: React.FC<CourseStatusTabsProps> = () => {
+  const { setCourseStatus } = useContext(CoursesPageContext);
+  const handleChangeStatus = (status: CourseStatusEnum | undefined) => setCourseStatus(status);
+
+  return (
+    <Tabs>
+      <TabList justifyContent='center'>
+        <Tab onClick={() => handleChangeStatus(undefined)}>All</Tab>
+        {Object.values(CourseStatusEnum).map(status => {
+          return (
+            <Tab key={status} onClick={() => handleChangeStatus(status)}>{`${status.charAt(0).toUpperCase()}${status
+              .substr(1)
+              .toLowerCase()}`}</Tab>
+          );
+        })}
+      </TabList>
+    </Tabs>
+  );
+};
+
+export default CourseStatusTabs;

src/pages/courses/components/CourseStatusTabs/index.ts

@@ -0,0 +1,3 @@
+import CourseStatusTabs from './CourseStatusTabs';
+
+export default CourseStatusTabs;

src/pages/courses/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { observer } from 'mobx-react-lite';
-import { Flex, Tabs, TabList, Tab, Box, Heading, Text, Button } from '@chakra-ui/react';
+import { Flex, Box, Heading, Text, Button } from '@chakra-ui/react';
 
 import { IPageProps } from 'interfaces';
 import { AddIcon } from '@chakra-ui/icons';
@@ -17,6 +17,7 @@ import LoadingPage from 'components/LoadingPage';
  */
 import { useRootStore } from 'hooks/useRootStore';
 import { CoursesPageContextProvider } from 'providers';
+import CourseStatusTabs from './components/CourseStatusTabs';
 
 /**
  * Courses page
@@ -45,15 +46,7 @@ const CoursesPage: React.FC<IPageProps> = ({ title }) => {
           )}
         </Flex>
         <Box mt='7'>
-          {(me.isAdmin || me.isTeacher) && (
-            <Tabs>
-              <TabList justifyContent='center'>
-                <Tab>All</Tab>
-                <Tab>Published</Tab>
-                <Tab>Draft</Tab>
-              </TabList>
-            </Tabs>
-          )}
+          {(me.isAdmin || me.isTeacher) && <CourseStatusTabs />}
           <Box mt='5'>
             <CategoryList categories={categoryStore.categories} isLoading={categoryStore.isLoading} />
             <CourseList courses={courseStore.courses} isLoading={courseStore.isLoading} />

src/providers/index.tsx

@@ -3,6 +3,7 @@ import { CoursesPageContext, ProfilePageContext, StoreContext, UsersPageContext
 import { ProfilePageDataType, ProfilePageStatusType, SearchingRoleStateType } from 'types';
 import RootStore from 'stores/RootStore';
 import { ICategory, IUser } from 'interfaces';
+import { CourseStatusEnum } from 'enums';
 
 /**
  * Root store context provider
@@ -62,9 +63,10 @@ export const UsersPageContextProvider: React.FC = ({ children }) => {
  */
 export const CoursesPageContextProvider: React.FC = ({ children }) => {
   const [selectedCategory, setSelectedCategory] = useState<ICategory | undefined>(undefined);
+  const [courseStatus, setCourseStatus] = useState<CourseStatusEnum | undefined>(undefined);
 
   return (
-    <CoursesPageContext.Provider value={{ selectedCategory, setSelectedCategory }}>
+    <CoursesPageContext.Provider value={{ selectedCategory, setSelectedCategory, courseStatus, setCourseStatus }}>
       {children}
     </CoursesPageContext.Provider>
   );

src/types/index.d.ts

@@ -1,4 +1,4 @@
-import { UserRoleEnum } from 'enums';
+import { CourseStatusEnum, UserRoleEnum } from 'enums';
 import { ICategory, IUser } from 'interfaces';
 import React from 'react';
 import { IconType } from 'react-icons/lib';
@@ -76,10 +76,16 @@ export type UsersPageContextType = {
 
 export type CoursesPageContextType = {
   /**
-   * Filter courses by switching caterory
+   * Filter courses by caterory
    */
   selectedCategory: ICategory | undefined;
   setSelectedCategory: React.Dispatch<React.SetStateAction<ICategory | undefined>>;
+
+  /**
+   * Filter courses by status
+   */
+  courseStatus: CourseStatusEnum | undefined;
+  setCourseStatus: React.Dispatch<React.SetStateAction<CourseStatusEnum | undefined>>;
 };
 export type FetchCoursesParams = {
   /**