From 653a71dc6717209a070032e812815a5c2eac666f Mon Sep 17 00:00:00 2001
From: Sergey Yarkov <serzh.yarkov@gmail.com>
Date: Wed, 13 Oct 2021 20:05:32 +0300
Subject: [PATCH] feat: render courses by status param

---
 src/contexts/index.ts                         |  2 ++
 .../components/CourseList/CourseList.tsx      |  8 +++---
 .../CourseStatusTabs/CourseStatusTabs.tsx     | 28 +++++++++++++++++++
 .../components/CourseStatusTabs/index.ts      |  3 ++
 src/pages/courses/index.tsx                   | 13 ++-------
 src/providers/index.tsx                       |  4 ++-
 src/types/index.d.ts                          | 10 +++++--
 7 files changed, 51 insertions(+), 17 deletions(-)
 create mode 100644 src/pages/courses/components/CourseStatusTabs/CourseStatusTabs.tsx
 create mode 100644 src/pages/courses/components/CourseStatusTabs/index.ts

diff --git a/src/contexts/index.ts b/src/contexts/index.ts
index af23126..60945d9 100644
--- a/src/contexts/index.ts
+++ b/src/contexts/index.ts
@@ -27,4 +27,6 @@ export const UsersPageContext = createContext<UsersPageContextType>({
 export const CoursesPageContext = createContext<CoursesPageContextType>({
   selectedCategory: undefined,
   setSelectedCategory: () => {},
+  courseStatus: undefined,
+  setCourseStatus: () => {},
 });
diff --git a/src/pages/courses/components/CourseList/CourseList.tsx b/src/pages/courses/components/CourseList/CourseList.tsx
index 07605e0..8cbd134 100644
--- a/src/pages/courses/components/CourseList/CourseList.tsx
+++ b/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>
       )}
     </>
diff --git a/src/pages/courses/components/CourseStatusTabs/CourseStatusTabs.tsx b/src/pages/courses/components/CourseStatusTabs/CourseStatusTabs.tsx
new file mode 100644
index 0000000..48f0d76
--- /dev/null
+++ b/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;
diff --git a/src/pages/courses/components/CourseStatusTabs/index.ts b/src/pages/courses/components/CourseStatusTabs/index.ts
new file mode 100644
index 0000000..c16ec26
--- /dev/null
+++ b/src/pages/courses/components/CourseStatusTabs/index.ts
@@ -0,0 +1,3 @@
+import CourseStatusTabs from './CourseStatusTabs';
+
+export default CourseStatusTabs;
diff --git a/src/pages/courses/index.tsx b/src/pages/courses/index.tsx
index 574ab06..8703bd8 100644
--- a/src/pages/courses/index.tsx
+++ b/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} />
diff --git a/src/providers/index.tsx b/src/providers/index.tsx
index 9719064..5fa7b4d 100644
--- a/src/providers/index.tsx
+++ b/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>
   );
diff --git a/src/types/index.d.ts b/src/types/index.d.ts
index c8bd593..91e80cd 100644
--- a/src/types/index.d.ts
+++ b/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 = {
   /**