feat: set course status

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

@@ -16,7 +16,7 @@ import {
 import { Link as ReactRouterLink } from 'react-router-dom';
 import { Icon } from '@chakra-ui/react';
 import { MdNote, MdMoreHoriz, MdGroup, MdThumbUp, MdVideoLibrary } from 'react-icons/md';
-import { DeleteIcon, EditIcon } from '@chakra-ui/icons';
+import { CheckIcon, DeleteIcon, EditIcon } from '@chakra-ui/icons';
 
 /**
  * Types
@@ -29,13 +29,16 @@ import { ICourse } from '@educt/interfaces';
 import { useColorMode } from '@chakra-ui/color-mode';
 import { useRootStore } from '@educt/hooks/useRootStore';
 import CourseStatusBadge from '@educt/components/CourseStatusBadge';
+import { CourseStatusEnum } from '@educt/enums';
+import { observer } from 'mobx-react';
 
 type CourseItemPropsType = {
   course: Omit<ICourse, 'teacher' | 'students' | 'lessons'>;
   onDelete: (course: Pick<ICourse, 'id' | 'title'>) => void;
+  onSetStatus: (id: string, status: CourseStatusEnum) => Promise<void>;
 };
 
-const CourseItem: React.FC<CourseItemPropsType> = ({ course, onDelete }) => {
+const CourseItem: React.FC<CourseItemPropsType> = ({ course, onDelete, onSetStatus }) => {
   const {
     userStore: { me },
   } = useRootStore();
@@ -49,25 +52,38 @@ const CourseItem: React.FC<CourseItemPropsType> = ({ course, onDelete }) => {
         <Flex justifyContent='flex-end'>
           <Box position='absolute' zIndex='1' padding='10px'>
             <Menu>
-              <MenuButton
+              {({ isOpen, onClose }) => (
-                as={IconButton}
+                <>
-                backgroundColor={colorMode === 'dark' ? 'gray.700' : 'gray.100'}
+                  <MenuButton
-                aria-label='Actions'
+                    as={IconButton}
-                icon={<MdMoreHoriz size='18px' />}
+                    backgroundColor={colorMode === 'dark' ? 'gray.700' : 'gray.100'}
-                _hover={{ backgroundColor: colorMode === 'dark' ? 'gray.600' : 'gray.200' }}
+                    aria-label='Actions'
-                _active={{ backgroundColor: colorMode === 'dark' ? 'gray.600' : 'gray.200' }}
+                    icon={<MdMoreHoriz size='18px' />}
-              />
+                    _hover={{ backgroundColor: colorMode === 'dark' ? 'gray.600' : 'gray.200' }}
-              <MenuList>
+                    _active={{ backgroundColor: colorMode === 'dark' ? 'gray.600' : 'gray.200' }}
-                <MenuItem icon={<EditIcon />}>Edit course</MenuItem>
+                  />
-                <MenuItem icon={<MdNote />}>Mark as Draft</MenuItem>
+                  <MenuList>
-                <MenuItem
+                    <MenuItem icon={<EditIcon />}>Edit course</MenuItem>
-                  onClick={() => onDelete({ id: course.id, title: course.title })}
+                    {course.status === CourseStatusEnum.DRAFT && (
-                  icon={<DeleteIcon />}
+                      <MenuItem onClick={() => onSetStatus(course.id, CourseStatusEnum.PUBLISHED)} icon={<CheckIcon />}>
-                  color='red.500'
+                        Publish
-                >
+                      </MenuItem>
-                  Delete
+                    )}
-                </MenuItem>
+                    {course.status === CourseStatusEnum.PUBLISHED && (
-              </MenuList>
+                      <MenuItem onClick={() => onSetStatus(course.id, CourseStatusEnum.DRAFT)} icon={<MdNote />}>
+                        Mark as Draft
+                      </MenuItem>
+                    )}
+                    <MenuItem
+                      onClick={() => onDelete({ id: course.id, title: course.title })}
+                      icon={<DeleteIcon />}
+                      color='red.500'
+                    >
+                      Delete
+                    </MenuItem>
+                  </MenuList>
+                </>
+              )}
             </Menu>
           </Box>
         </Flex>
@@ -131,4 +147,4 @@ const CourseItem: React.FC<CourseItemPropsType> = ({ course, onDelete }) => {
   );
 };
 
-export default CourseItem;
+export default observer(CourseItem);

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

@@ -18,6 +18,8 @@ import DeleteCourseDialog from '../DeleteCourseDialog';
  */
 import { useRootStore } from '@educt/hooks/useRootStore';
 import { useDisclosure } from '@chakra-ui/hooks';
+import { useToast } from '@chakra-ui/toast';
+import { useErrorHandler } from 'react-error-boundary';
 
 /**
  * Contexts
@@ -37,6 +39,8 @@ const CourseList: React.FC<CourseListPropsType> = ({ courses, isLoading }) => {
   } = useRootStore();
   const { selectedCategory, courseStatus, deletingCourse, setDeletingCourse } = useContext(CoursesPageContext);
   const { onOpen: onOpenDeleteDialog, onClose: onCloseDeleteDialog, isOpen: isOpenDeleteDialog } = useDisclosure();
+  const handleError = useErrorHandler();
+  const toast = useToast();
 
   useEffect(() => {
     if (me !== null) {
@@ -47,11 +51,31 @@ const CourseList: React.FC<CourseListPropsType> = ({ courses, isLoading }) => {
     }
   }, [courseStore, selectedCategory, courseStatus, me]);
 
+  /**
+   * Handle delete course
+   * Set deleting course to context and open dialog
+   */
   const onDeleteCourse = (course: Pick<ICourse, 'id' | 'title'>) => {
     setDeletingCourse(course);
     onOpenDeleteDialog();
   };
 
+  /**
+   * Handle update course status
+   */
+  const onSetStatus = async (id: string, status: CourseStatusEnum) => {
+    try {
+      await courseStore.setCourseStatus(id, status);
+      toast({ title: 'Status updated.', status: 'info' });
+    } catch (error: any) {
+      if (error.response) {
+        toast({ title: error.message, status: 'error' });
+      } else {
+        handleError(error);
+      }
+    }
+  };
+
   if (isLoading || courses === null) {
     return <CourseListLoading />;
   }
@@ -73,7 +97,7 @@ const CourseList: React.FC<CourseListPropsType> = ({ courses, isLoading }) => {
           }}
         >
           {courses.map(course => (
-            <CourseItem key={course.id} course={course} onDelete={onDeleteCourse} />
+            <CourseItem key={course.id} course={course} onDelete={onDeleteCourse} onSetStatus={onSetStatus} />
           ))}
         </Grid>
       ) : (

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

@@ -1,8 +1,16 @@
 import React, { useContext } from 'react';
 import { Tabs, TabList, Tab } from '@chakra-ui/react';
-import { CoursesPageContext } from '@educt/contexts';
+
+/**
+ * Types
+ */
 import { CourseStatusEnum } from '@educt/enums';
 
+/**
+ * Contexts
+ */
+import { CoursesPageContext } from '@educt/contexts';
+
 type CourseStatusTabsProps = {};
 
 const CourseStatusTabs: React.FC<CourseStatusTabsProps> = () => {
@@ -13,16 +21,11 @@ const CourseStatusTabs: React.FC<CourseStatusTabsProps> = () => {
     <Tabs>
       <TabList justifyContent='center'>
         <Tab onClick={() => handleChangeStatus(undefined)}>All</Tab>
-        {Object.values(CourseStatusEnum).map(status => {
+        <Tab onClick={() => handleChangeStatus(CourseStatusEnum.PUBLISHED)}>Published</Tab>
-          return (
+        <Tab onClick={() => handleChangeStatus(CourseStatusEnum.DRAFT)}>Unpublished Drafts</Tab>
-            <Tab key={status} onClick={() => handleChangeStatus(status)}>{`${status.charAt(0).toUpperCase()}${status
-              .substr(1)
-              .toLowerCase()}`}</Tab>
-          );
-        })}
       </TabList>
     </Tabs>
   );
 };
 
-export default React.memo(CourseStatusTabs);
+export default CourseStatusTabs;

src/pages/courses/components/DeleteCourseDialog/DeleteCourseDialog.tsx

@@ -36,6 +36,11 @@ const DeleteCourseDialog: React.FC<DeleteCourseDialogProps> = ({ onClose, isOpen
   const handleError = useErrorHandler();
   const toast = useToast();
 
+  /**
+   * Delete course handler
+   *
+   * @param id Course id
+   */
   const onDelete = async (id: string) => {
     try {
       setIsLoading(true);

src/pages/courses/courses.tsx

@@ -1,15 +1,19 @@
-import React, { useEffect } from 'react';
+import React from 'react';
-import { observer } from 'mobx-react-lite';
+import { observer } from 'mobx-react';
 import { Flex, Box, Heading, Text, Button } from '@chakra-ui/react';
-
-import { IPageProps } from '@educt/interfaces';
 import { AddIcon } from '@chakra-ui/icons';
 
+/**
+ * Types
+ */
+import { IPageProps } from '@educt/interfaces';
+
 /**
  * Components
  */
 import CourseList from './components/CourseList';
 import CategoryList from './components/CategoryList';
+import CourseStatusTabs from './components/CourseStatusTabs';
 import LoadingPage from '@educt/components/LoadingPage';
 
 /**
@@ -17,7 +21,6 @@ import LoadingPage from '@educt/components/LoadingPage';
  */
 import { useRootStore } from '@educt/hooks/useRootStore';
 import { CoursesPageContextProvider } from '@educt/providers';
-import CourseStatusTabs from './components/CourseStatusTabs';
 
 /**
  * Courses page
@@ -29,10 +32,6 @@ const CoursesPage: React.FC<IPageProps> = ({ title }) => {
     courseStore,
   } = useRootStore();
 
-  useEffect(() => {
-    console.log('upadate');
-  });
-
   if (me === null) return <LoadingPage />;
 
   return (

src/services/CourseService.ts

@@ -1,6 +1,7 @@
 import { AxiosInstance } from 'axios';
 import { IApiRespose, ICourse } from '@educt/interfaces';
 import { FetchCoursesParams } from '@educt/types';
+import { CourseStatusEnum } from '@educt/enums';
 
 export class CourseService {
   public api: AxiosInstance;
@@ -26,6 +27,20 @@ export class CourseService {
     return result.data;
   }
 
+  /**
+   * Update status of course by id
+   *
+   * @param id Course id
+   * @param status Course status
+   * @returns Empty data
+   */
+  public async setStatus(id: string, status: CourseStatusEnum): Promise<IApiRespose<{}>> {
+    const result = await this.api.post(`/v1/courses/${id}/set-status`, {
+      status,
+    });
+    return result.data;
+  }
+
   /**
    * Delete course by id
    *

src/stores/CourseStore.ts

@@ -16,6 +16,7 @@ import { CourseService } from '@educt/services/CourseService';
  * Stores
  */
 import RootStore from './RootStore';
+import { CourseStatusEnum } from '@educt/enums';
 
 export default class CourseStore {
   public root: RootStore;
@@ -41,6 +42,9 @@ export default class CourseStore {
       this.setLoading(true);
       const result = await this.courseService.fetchAll(params);
 
+      /**
+       * Load courses in store
+       */
       runInAction(() => {
         this.courses = result.data;
       });
@@ -56,8 +60,10 @@ export default class CourseStore {
   public async deleteCourse(id: string) {
     try {
       const result = await this.courseService.delete(id);
-      console.log(`[${this.constructor.name}]: ${result.message}`, result);
 
+      /**
+       * Remove deleted course form store
+       */
       runInAction(() => {
         if (this.courses !== null) {
           this.courses = this.courses.filter(course => course.id !== id);
@@ -69,4 +75,27 @@ export default class CourseStore {
       throw error;
     }
   }
+
+  public async setCourseStatus(id: string, status: CourseStatusEnum) {
+    try {
+      const result = await this.courseService.setStatus(id, status);
+
+      /**
+       * Update status in store
+       */
+      runInAction(() => {
+        if (this.courses !== null) {
+          const courseIndex = this.courses.findIndex(course => course.id === id);
+
+          if (courseIndex !== -1) {
+            this.courses[courseIndex].status = status;
+          }
+        }
+      });
+
+      return result;
+    } catch (error: any) {
+      throw error;
+    }
+  }
 }

vite.config.ts

@@ -5,7 +5,7 @@ import { visualizer } from 'rollup-plugin-visualizer';
 import { dependencies } from './package.json';
 
 function renderChunks(deps: Record<string, string>) {
-  let chunks = {};
+  const chunks = {};
   Object.keys(deps).forEach(key => {
     if (['@chakra-ui/react', '@chakra-ui/icons', 'framer-motion'].includes(key)) chunks[key] = [key];
     return;