From d1d345ca88849ebbe4ef4e106d9a027c729a4b8d Mon Sep 17 00:00:00 2001
From: Sergey Yarkov <serzh.yarkov@gmail.com>
Date: Wed, 8 Dec 2021 20:47:06 +0300
Subject: [PATCH] feat: added courses page store

---
 src/components/Buttons/index.tsx              |  8 +-
 src/components/SetCourseStatusButton/index.ts |  3 -
 .../components/CategoryList/CategoryItem.tsx  | 10 ++-
 .../components/CategoryList/CategoryList.tsx  | 10 ++-
 .../components/CourseList/CourseList.tsx      | 14 ++--
 .../CourseStatusTabs/CourseStatusTabs.tsx     | 36 --------
 .../components/CourseStatusTabs/index.ts      |  3 -
 src/pages/courses/components/index.tsx        | 31 +++++++
 src/pages/courses/courses.tsx                 | 32 +++-----
 .../courses/edit/components/index.tsx}        | 35 ++++----
 src/pages/courses/edit/edit.tsx               | 82 ++++++++++---------
 src/stores/PageStore.ts                       |  4 +
 src/stores/pages/CoursesStore.ts              | 30 +++++++
 13 files changed, 168 insertions(+), 130 deletions(-)
 delete mode 100644 src/components/SetCourseStatusButton/index.ts
 delete mode 100644 src/pages/courses/components/CourseStatusTabs/CourseStatusTabs.tsx
 delete mode 100644 src/pages/courses/components/CourseStatusTabs/index.ts
 create mode 100644 src/pages/courses/components/index.tsx
 rename src/{components/SetCourseStatusButton/SetCourseStatusButton.tsx => pages/courses/edit/components/index.tsx} (66%)
 create mode 100644 src/stores/pages/CoursesStore.ts

diff --git a/src/components/Buttons/index.tsx b/src/components/Buttons/index.tsx
index ff1f715..6b3b170 100644
--- a/src/components/Buttons/index.tsx
+++ b/src/components/Buttons/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { ButtonProps, Button } from '@chakra-ui/button';
-import { AddIcon, EditIcon } from '@chakra-ui/icons';
+import { AddIcon, DeleteIcon, EditIcon } from '@chakra-ui/icons';
 import { MdSave } from 'react-icons/md';
 
 export const CreateButton: React.FC<ButtonProps> = props => (
@@ -9,6 +9,12 @@ export const CreateButton: React.FC<ButtonProps> = props => (
   </Button>
 );
 
+export const DeleteButton: React.FC<ButtonProps> = props => (
+  <Button variant='outline' leftIcon={<DeleteIcon />} colorScheme='red' size='sm' {...props}>
+    Delete
+  </Button>
+);
+
 export const EditButton: React.FC<ButtonProps> = props => (
   <Button leftIcon={<EditIcon />} variant='outline' size='sm' {...props}>
     Edit
diff --git a/src/components/SetCourseStatusButton/index.ts b/src/components/SetCourseStatusButton/index.ts
deleted file mode 100644
index bb60614..0000000
--- a/src/components/SetCourseStatusButton/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import SetCourseStatusButton from './SetCourseStatusButton';
-
-export default SetCourseStatusButton;
diff --git a/src/pages/courses/components/CategoryList/CategoryItem.tsx b/src/pages/courses/components/CategoryList/CategoryItem.tsx
index 5c58ed3..8f0d3fd 100644
--- a/src/pages/courses/components/CategoryList/CategoryItem.tsx
+++ b/src/pages/courses/components/CategoryList/CategoryItem.tsx
@@ -15,19 +15,23 @@ import { CoursesPageContext } from '@educt/contexts';
  * Hooks
  */
 import { useContext } from 'react';
+import { useRootStore } from '@educt/hooks/useRootStore';
 
 export type CategoryItemPropsType = {
   category: ICategory;
 };
 
 const CategoryItem: React.FC<CategoryItemPropsType> = ({ category }) => {
-  const { selectedCategory, setSelectedCategory } = useContext(CoursesPageContext);
-  const isSelected = selectedCategory?.id === category.id;
+  const {
+    pageStore: { coursesStore },
+  } = useRootStore();
+
+  const isSelected = coursesStore.selectedCategory?.id === category.id;
 
   /**
    * Handle click on change category
    */
-  const onCategoryChange = () => setSelectedCategory(category);
+  const onCategoryChange = () => coursesStore.setSelectedCategory(category);
 
   return (
     <Tag
diff --git a/src/pages/courses/components/CategoryList/CategoryList.tsx b/src/pages/courses/components/CategoryList/CategoryList.tsx
index 767e034..000fcc8 100644
--- a/src/pages/courses/components/CategoryList/CategoryList.tsx
+++ b/src/pages/courses/components/CategoryList/CategoryList.tsx
@@ -29,8 +29,10 @@ type CategoryListPropsType = {
 };
 
 const CategoryList: React.FC<CategoryListPropsType> = ({ render: Item }) => {
-  const { categoryStore } = useRootStore();
-  const { selectedCategory, setSelectedCategory } = useContext(CoursesPageContext);
+  const {
+    categoryStore,
+    pageStore: { coursesStore },
+  } = useRootStore();
   const handleError = useErrorHandler();
   const { categories, isLoading } = categoryStore;
 
@@ -51,11 +53,11 @@ const CategoryList: React.FC<CategoryListPropsType> = ({ render: Item }) => {
       <Flex sx={{ columnGap: '7px', rowGap: '5px' }} flexWrap='wrap'>
         <Tag
           borderRadius='full'
-          variant={selectedCategory === undefined ? 'solid' : 'outline'}
+          variant={coursesStore.selectedCategory === null ? 'solid' : 'outline'}
           cursor='pointer'
           transition='all .1s'
           _hover={{ opacity: '.8' }}
-          onClick={() => setSelectedCategory(undefined)}
+          onClick={() => coursesStore.setSelectedCategory(null)}
         >
           <TagLabel>All categories</TagLabel>
         </Tag>
diff --git a/src/pages/courses/components/CourseList/CourseList.tsx b/src/pages/courses/components/CourseList/CourseList.tsx
index a3b4b79..3151dab 100644
--- a/src/pages/courses/components/CourseList/CourseList.tsx
+++ b/src/pages/courses/components/CourseList/CourseList.tsx
@@ -36,12 +36,12 @@ const CourseList: React.FC<CourseListPropsType> = ({ render: Item }) => {
   const {
     userStore: { me },
     courseStore,
+    pageStore: { coursesStore },
   } = useRootStore();
   const [deleting, setDeleting] = useState<Pick<ICourse, 'id' | 'title'> | null>(null);
-  const { selectedCategory, courseStatus } = useContext(CoursesPageContext);
   const { onOpen: onOpenDeleteDialog, onClose: onCloseDeleteDialog, isOpen: isOpenDeleteDialog } = useDisclosure();
   const { setCourseStatus } = useSetCourseStatus();
-  const { courses, isLoading } = courseStore;
+  const { courses, isLoading, loadCourses } = courseStore;
 
   const handleDeleteCourse = (course: Pick<ICourse, 'id' | 'title'>) => {
     setDeleting(course);
@@ -54,11 +54,11 @@ const CourseList: React.FC<CourseListPropsType> = ({ render: Item }) => {
   useEffect(() => {
     if (me !== null) {
       courseStore.loadCourses({
-        category_id: selectedCategory?.id,
-        status: me.isAdmin || me.isTeacher ? courseStatus : CourseStatusEnum.PUBLISHED,
+        category_id: coursesStore.selectedCategory?.id,
+        status: me.isAdmin || me.isTeacher ? coursesStore.showedStatus : CourseStatusEnum.PUBLISHED,
       });
     }
-  }, [courseStore, selectedCategory, courseStatus]);
+  }, [courseStore, coursesStore.selectedCategory, coursesStore.showedStatus]);
 
   if (courses === null || isLoading) return <LoadingList />;
 
@@ -80,9 +80,9 @@ const CourseList: React.FC<CourseListPropsType> = ({ render: Item }) => {
         <Box textAlign='center' mt='10' userSelect='none'>
           <Text color='gray.500'>
             There are no courses&nbsp;
-            {!selectedCategory && !courseStatus
+            {!coursesStore.selectedCategory && !coursesStore.showedStatus
               ? 'in the system yet'
-              : `in this category${courseStatus ? ' or with this status' : ''}`}
+              : `in this category${coursesStore.showedStatus ? ' or with this status' : ''}`}
             .
           </Text>
         </Box>
diff --git a/src/pages/courses/components/CourseStatusTabs/CourseStatusTabs.tsx b/src/pages/courses/components/CourseStatusTabs/CourseStatusTabs.tsx
deleted file mode 100644
index 834f6b6..0000000
--- a/src/pages/courses/components/CourseStatusTabs/CourseStatusTabs.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from 'react';
-import { Tabs, TabList, Tab } from '@chakra-ui/react';
-
-/**
- * Types
- */
-import { CourseStatusEnum } from '@educt/enums';
-
-/**
- * Contexts
- */
-import { CoursesPageContext } from '@educt/contexts';
-
-/**
- * Hooks
- */
-import { useContext } from 'react';
-
-type CourseStatusTabsProps = {};
-
-const CourseStatusTabs: React.FC<CourseStatusTabsProps> = () => {
-  const { setCourseStatus } = useContext(CoursesPageContext);
-  const handleChangeStatus = (status: CourseStatusEnum | undefined) => setCourseStatus(status);
-
-  return (
-    <Tabs variant='solid-rounded'>
-      <TabList justifyContent='center'>
-        <Tab onClick={() => handleChangeStatus(undefined)}>All</Tab>
-        <Tab onClick={() => handleChangeStatus(CourseStatusEnum.PUBLISHED)}>Published</Tab>
-        <Tab onClick={() => handleChangeStatus(CourseStatusEnum.DRAFT)}>Unpublished Drafts</Tab>
-      </TabList>
-    </Tabs>
-  );
-};
-
-export default CourseStatusTabs;
diff --git a/src/pages/courses/components/CourseStatusTabs/index.ts b/src/pages/courses/components/CourseStatusTabs/index.ts
deleted file mode 100644
index c16ec26..0000000
--- a/src/pages/courses/components/CourseStatusTabs/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import CourseStatusTabs from './CourseStatusTabs';
-
-export default CourseStatusTabs;
diff --git a/src/pages/courses/components/index.tsx b/src/pages/courses/components/index.tsx
new file mode 100644
index 0000000..c527d17
--- /dev/null
+++ b/src/pages/courses/components/index.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { BoxProps, Box } from '@chakra-ui/layout';
+import { Tabs, TabList, Tab } from '@chakra-ui/tabs';
+import { CourseStatusEnum } from '@educt/enums';
+
+/**
+ * Hooks
+ */
+import { useRootStore } from '@educt/hooks/useRootStore';
+
+export const CoursesTabs: React.FC<BoxProps> = props => {
+  const {
+    userStore: { me },
+    pageStore: { coursesStore },
+  } = useRootStore();
+
+  return (
+    me &&
+    (me.isAdmin || me.isTeacher ? (
+      <Box {...props}>
+        <Tabs variant='solid-rounded'>
+          <TabList justifyContent='center' {...props}>
+            <Tab onClick={() => coursesStore.setShowedStatus(undefined)}>All</Tab>
+            <Tab onClick={() => coursesStore.setShowedStatus(CourseStatusEnum.PUBLISHED)}>Published</Tab>
+            <Tab onClick={() => coursesStore.setShowedStatus(CourseStatusEnum.DRAFT)}>Unpublished Drafts</Tab>
+          </TabList>
+        </Tabs>
+      </Box>
+    ) : null)
+  );
+};
diff --git a/src/pages/courses/courses.tsx b/src/pages/courses/courses.tsx
index 26cf8e1..5a36232 100644
--- a/src/pages/courses/courses.tsx
+++ b/src/pages/courses/courses.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { Box } from '@chakra-ui/react';
 
 /**
  * Types
@@ -10,22 +9,19 @@ import { IPageProps } from '@educt/interfaces';
  * Components
  */
 import { PageWrapper, PageHeading, PageContent } from '@educt/components/PageElements';
+import { CreateButton } from '@educt/components/Buttons';
 import LoadingPage from '@educt/components/LoadingPage';
 import CourseList from './components/CourseList';
 import CategoryList from './components/CategoryList';
-import CourseStatusTabs from './components/CourseStatusTabs';
 import CategoryItem from './components/CategoryList/CategoryItem';
 import CourseItem from './components/CourseList/CourseItem';
 
-/**
- * Providers
- */
-import { CoursesPageContextProvider } from '@educt/providers';
-
 /**
  * Hooks
  */
 import { useRootStore } from '@educt/hooks/useRootStore';
+import { useHistory } from 'react-router';
+import { CoursesTabs } from './components';
 
 /**
  * Courses page
@@ -34,22 +30,20 @@ const CoursesPage: React.FC<IPageProps> = () => {
   const {
     userStore: { me },
   } = useRootStore();
+  const history = useHistory();
 
   if (me === null) return <LoadingPage />;
 
   return (
-    <CoursesPageContextProvider>
-      <PageWrapper>
-        <PageHeading heading='Courses' description='List of all courses' />
-        <PageContent mt='10'>
-          {(me.isAdmin || me.isTeacher) && <CourseStatusTabs />}
-          <Box mt='5'>
-            <CategoryList render={CategoryItem} />
-            <CourseList render={CourseItem} />
-          </Box>
-        </PageContent>
-      </PageWrapper>
-    </CoursesPageContextProvider>
+    <PageWrapper>
+      <PageHeading heading='Courses' description='List of all courses' />
+      {(me.isAdmin || me.isTeacher) && <CreateButton onClick={() => history.push('/courses/create')} />}
+      <PageContent mt='10'>
+        <CoursesTabs mb='7' />
+        <CategoryList render={CategoryItem} />
+        <CourseList render={CourseItem} />
+      </PageContent>
+    </PageWrapper>
   );
 };
 
diff --git a/src/components/SetCourseStatusButton/SetCourseStatusButton.tsx b/src/pages/courses/edit/components/index.tsx
similarity index 66%
rename from src/components/SetCourseStatusButton/SetCourseStatusButton.tsx
rename to src/pages/courses/edit/components/index.tsx
index 55e6092..594ca5c 100644
--- a/src/components/SetCourseStatusButton/SetCourseStatusButton.tsx
+++ b/src/pages/courses/edit/components/index.tsx
@@ -1,20 +1,21 @@
-import React, { useState } from 'react';
-import { Button } from '@chakra-ui/react';
-import { AiOutlineEye, AiOutlineEyeInvisible } from 'react-icons/ai';
+import React from 'react';
+import { ButtonProps, Button } from '@chakra-ui/button';
 import { CourseStatusEnum } from '@educt/enums';
+import { AiOutlineEye, AiOutlineEyeInvisible } from 'react-icons/ai';
+
+/**
+ * Hooks
+ */
+import { useState } from 'react';
 import { useSetCourseStatus } from '@educt/hooks/queries';
 
-type SetCourseStatusButtonPropsType = {
+interface IStatusButtonProps extends ButtonProps {
   courseId: string;
   currentStatus: CourseStatusEnum;
   loadingText?: string | undefined;
-};
-
-const SetCourseStatusButton: React.FC<SetCourseStatusButtonPropsType> = ({
-  courseId,
-  currentStatus,
-  loadingText = 'Wait a second...',
-}) => {
+}
+export const StatusButton: React.FC<IStatusButtonProps> = props => {
+  const { courseId, currentStatus, loadingText, ...btnProps } = props;
   const [status, setStatus] = useState<keyof typeof CourseStatusEnum>(currentStatus);
   const { setCourseStatus, isLoading } = useSetCourseStatus();
 
@@ -28,8 +29,11 @@ const SetCourseStatusButton: React.FC<SetCourseStatusButtonPropsType> = ({
       <Button
         onClick={() => handleChangeStatus(CourseStatusEnum.DRAFT)}
         isLoading={isLoading}
-        loadingText={loadingText}
+        loadingText={loadingText || 'Saving...'}
         leftIcon={<AiOutlineEyeInvisible />}
+        size='sm'
+        variant='outline'
+        {...btnProps}
       >
         Mark as Draft
       </Button>
@@ -38,8 +42,11 @@ const SetCourseStatusButton: React.FC<SetCourseStatusButtonPropsType> = ({
       <Button
         onClick={() => handleChangeStatus(CourseStatusEnum.PUBLISHED)}
         isLoading={isLoading}
-        loadingText={loadingText}
+        loadingText={loadingText || 'Saving...'}
         leftIcon={<AiOutlineEye />}
+        size='sm'
+        variant='outline'
+        {...btnProps}
       >
         Publish course
       </Button>
@@ -48,5 +55,3 @@ const SetCourseStatusButton: React.FC<SetCourseStatusButtonPropsType> = ({
 
   return Components[status];
 };
-
-export default SetCourseStatusButton;
diff --git a/src/pages/courses/edit/edit.tsx b/src/pages/courses/edit/edit.tsx
index d6e02b6..d644009 100644
--- a/src/pages/courses/edit/edit.tsx
+++ b/src/pages/courses/edit/edit.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
 import Helmet from 'react-helmet';
 import { Redirect } from 'react-router-dom';
-import { Box, Heading, Text, Tab, TabList, Flex, Tabs, TabPanels, TabPanel, Button } from '@chakra-ui/react';
-import { DeleteIcon } from '@chakra-ui/icons';
+import { Box, Heading, Text, Tab, TabList, Flex, Tabs, TabPanels, TabPanel } from '@chakra-ui/react';
 
 /**
  * Types
@@ -14,7 +13,6 @@ import type { IPageProps } from '@educt/interfaces';
  */
 import LoadingPage from '@educt/components/LoadingPage';
 import { EditCourseForm } from '@educt/components/Forms/CourseForm';
-import SetCourseStatusButton from '@educt/components/SetCourseStatusButton';
 import DeleteCourseDialog from '@educt/components/Dialogs/DeleteCourseDialog';
 import { StudentTableList, StudentTableRow } from './components/StudentTableList';
 import LessonList from './components/LessonList';
@@ -26,6 +24,9 @@ import { useParams } from 'react-router-dom';
 import { useRootStore } from '@educt/hooks/useRootStore';
 import { useFetchCourse } from '@educt/hooks/queries';
 import { useDisclosure } from '@chakra-ui/hooks';
+import { PageContent, PageWrapper } from '@educt/components/PageElements';
+import { DeleteButton } from '@educt/components/Buttons';
+import { StatusButton } from './components';
 
 /**
  * Course editor
@@ -53,55 +54,58 @@ const EditCoursePage: React.FC<IPageProps> = () => {
   if (!course || isLoading) return <LoadingPage />;
 
   return (
-    <>
+    <PageWrapper>
       <Helmet>
         <title>Editing {course.title}</title>
       </Helmet>
+
       <DeleteCourseDialog course={course} onClose={onCloseDeleteDialog} isOpen={isOpenDeleteDialog} />
+
       <Flex justifyContent='space-between' alignItems='center' flexWrap='wrap'>
         <Box mr='3'>
           <Heading as='h1'>Course editor</Heading>
           <Text mt='2'>{course.title}</Text>
         </Box>
         <Box ml='auto' alignSelf='flex-end' justifySelf='flex-end' mt={{ base: '7', md: '0' }}>
-          <SetCourseStatusButton courseId={course.id} currentStatus={course.status} />
-          <Button onClick={onOpenDeleteDialog} ml='2' variant='outline' leftIcon={<DeleteIcon />} colorScheme='red'>
-            Delete
-          </Button>
+          <StatusButton courseId={course.id} currentStatus={course.status} />
+          <DeleteButton onClick={onOpenDeleteDialog} ml='2' />
         </Box>
       </Flex>
-      <Box>
-        <Tabs isLazy mt='8'>
-          <TabList>
-            <Tab>Info</Tab>
-            <Tab>Lessons</Tab>
-            <Tab>Students</Tab>
-          </TabList>
 
-          <TabPanels>
-            <TabPanel>
-              <Box>
-                <EditCourseForm
-                  defaultValues={{
-                    title: course.title,
-                    description: course.description,
-                    category_id: course.category.id,
-                    teacher_id: course.teacher.id,
-                    image: undefined,
-                  }}
-                />
-              </Box>
-            </TabPanel>
-            <TabPanel>
-              <LessonList course={course} />
-            </TabPanel>
-            <TabPanel>
-              <StudentTableList render={StudentTableRow} students={course.students} />
-            </TabPanel>
-          </TabPanels>
-        </Tabs>
-      </Box>
-    </>
+      <PageContent>
+        <Box>
+          <Tabs isLazy mt='8'>
+            <TabList>
+              <Tab>Info</Tab>
+              <Tab>Lessons</Tab>
+              <Tab>Students</Tab>
+            </TabList>
+
+            <TabPanels>
+              <TabPanel>
+                <Box>
+                  <EditCourseForm
+                    defaultValues={{
+                      title: course.title,
+                      description: course.description,
+                      category_id: course.category.id,
+                      teacher_id: course.teacher.id,
+                      image: undefined,
+                    }}
+                  />
+                </Box>
+              </TabPanel>
+              <TabPanel>
+                <LessonList course={course} />
+              </TabPanel>
+              <TabPanel>
+                <StudentTableList render={StudentTableRow} students={course.students} />
+              </TabPanel>
+            </TabPanels>
+          </Tabs>
+        </Box>
+      </PageContent>
+    </PageWrapper>
   );
 };
 
diff --git a/src/stores/PageStore.ts b/src/stores/PageStore.ts
index 4450700..da2c98f 100644
--- a/src/stores/PageStore.ts
+++ b/src/stores/PageStore.ts
@@ -1,10 +1,13 @@
 import { makeAutoObservable } from 'mobx';
+import CoursesStore from './pages/CoursesStore';
 import EditCourseStore from './pages/EditCourseStore';
 import RootStore from './RootStore';
 
 export default class PageStore {
   public root: RootStore;
 
+  public coursesStore: CoursesStore;
+
   public editCourseStore: EditCourseStore;
 
   constructor(root: RootStore) {
@@ -13,6 +16,7 @@ export default class PageStore {
     /**
      * Pages
      */
+    this.coursesStore = new CoursesStore(this);
     this.editCourseStore = new EditCourseStore(this);
 
     makeAutoObservable(this);
diff --git a/src/stores/pages/CoursesStore.ts b/src/stores/pages/CoursesStore.ts
new file mode 100644
index 0000000..101ee8d
--- /dev/null
+++ b/src/stores/pages/CoursesStore.ts
@@ -0,0 +1,30 @@
+import { makeAutoObservable } from 'mobx';
+import { CourseStatusEnum } from '@educt/enums';
+import PageStore from '../PageStore';
+
+/**
+ * Types
+ */
+import type { ICategory } from '@educt/interfaces';
+
+export default class CoursesStore {
+  public pageStore: PageStore;
+
+  public selectedCategory: ICategory | null = null;
+
+  public showedStatus: CourseStatusEnum | undefined;
+
+  constructor(pageStore: PageStore) {
+    this.pageStore = pageStore;
+
+    makeAutoObservable(this);
+  }
+
+  public setSelectedCategory(category: ICategory | null): void {
+    this.selectedCategory = category;
+  }
+
+  public setShowedStatus(newStatus: CourseStatusEnum | undefined): void {
+    this.showedStatus = newStatus;
+  }
+}