feat: deleting course dialog

src/contexts/index.ts

@@ -29,4 +29,6 @@ export const CoursesPageContext = createContext<CoursesPageContextType>({
   setSelectedCategory: () => {},
   courseStatus: undefined,
   setCourseStatus: () => {},
+  deletingCourse: undefined,
+  setDeletingCourse: () => {},
 });

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

@@ -32,9 +32,10 @@ import CourseStatusBadge from 'components/CourseStatusBadge';
 
 type CourseItemPropsType = {
   course: Omit<ICourse, 'teacher' | 'students' | 'lessons'>;
+  onDelete: (course: Pick<ICourse, 'id' | 'title'>) => void;
 };
 
-const CourseItem: React.FC<CourseItemPropsType> = ({ course }) => {
+const CourseItem: React.FC<CourseItemPropsType> = ({ course, onDelete }) => {
   const {
     userStore: { me },
   } = useRootStore();
@@ -59,7 +60,11 @@ const CourseItem: React.FC<CourseItemPropsType> = ({ course }) => {
               <MenuList>
                 <MenuItem icon={<EditIcon />}>Edit course</MenuItem>
                 <MenuItem icon={<MdNote />}>Mark as Draft</MenuItem>
-                <MenuItem icon={<DeleteIcon />} color='red.500'>
+                <MenuItem
+                  onClick={() => onDelete({ id: course.id, title: course.title })}
+                  icon={<DeleteIcon />}
+                  color='red.500'
+                >
                   Delete
                 </MenuItem>
               </MenuList>

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

@@ -11,11 +11,13 @@ import { ICourse } from 'interfaces';
  */
 import CourseItem from './CourseItem';
 import CourseListLoading from './CourseListLoading';
+import DeleteCourseDialog from '../DeleteCourseDialog';
 
 /**
  * Hooks
  */
 import { useRootStore } from 'hooks/useRootStore';
+import { useDisclosure } from '@chakra-ui/hooks';
 
 /**
  * Contexts
@@ -33,7 +35,8 @@ const CourseList: React.FC<CourseListPropsType> = ({ courses, isLoading }) => {
     userStore: { me },
     courseStore,
   } = useRootStore();
-  const { selectedCategory, courseStatus } = useContext(CoursesPageContext);
+  const { selectedCategory, courseStatus, deletingCourse, setDeletingCourse } = useContext(CoursesPageContext);
+  const { onOpen: onOpenDeleteDialog, onClose: onCloseDeleteDialog, isOpen: isOpenDeleteDialog } = useDisclosure();
 
   useEffect(() => {
     if (me !== null) {
@@ -44,12 +47,18 @@ const CourseList: React.FC<CourseListPropsType> = ({ courses, isLoading }) => {
     }
   }, [courseStore, selectedCategory, courseStatus, me]);
 
+  const onDeleteCourse = (course: Pick<ICourse, 'id' | 'title'>) => {
+    setDeletingCourse(course);
+    onOpenDeleteDialog();
+  };
+
   if (isLoading || courses === null) {
     return <CourseListLoading />;
   }
 
   return (
     <>
+      {deletingCourse && <DeleteCourseDialog onClose={onCloseDeleteDialog} isOpen={isOpenDeleteDialog} />}
       {courses.length !== 0 ? (
         <Grid
           templateColumns='repeat(3, 1fr)'
@@ -64,7 +73,7 @@ const CourseList: React.FC<CourseListPropsType> = ({ courses, isLoading }) => {
           }}
         >
           {courses.map(course => (
-            <CourseItem key={course.id} course={course} />
+            <CourseItem key={course.id} course={course} onDelete={onDeleteCourse} />
           ))}
         </Grid>
       ) : (

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

@@ -0,0 +1,96 @@
+import React, { useContext, useRef, useState } from 'react';
+import {
+  AlertDialog,
+  AlertDialogBody,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogContent,
+  AlertDialogOverlay,
+  Button,
+  useToast,
+} from '@chakra-ui/react';
+
+/**
+ * Hooks
+ */
+import useIsMountedRef from 'hooks/useIsMountedRef';
+import { useErrorHandler } from 'react-error-boundary';
+import { CoursesPageContext } from 'contexts';
+import { useRootStore } from 'hooks/useRootStore';
+
+type DeleteCourseDialogProps = {
+  onClose: () => void;
+  isOpen: boolean;
+};
+
+const DeleteCourseDialog: React.FC<DeleteCourseDialogProps> = ({ onClose, isOpen }) => {
+  const { courseStore } = useRootStore();
+  const { deletingCourse, setDeletingCourse } = useContext(CoursesPageContext);
+  const isMountedRef = useIsMountedRef();
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const cancelRef = useRef<HTMLButtonElement | null>(null);
+  const handleError = useErrorHandler();
+  const toast = useToast();
+
+  const onDelete = async (id: string) => {
+    try {
+      setIsLoading(true);
+      await courseStore.deleteCourse(id);
+      toast({ title: 'Course deleted.', status: 'info' });
+      onClose();
+      setDeletingCourse(undefined);
+    } catch (error: any) {
+      if (error.response) {
+        toast({ title: error.message, status: 'error' });
+      } else {
+        handleError(error);
+      }
+    } finally {
+      if (isMountedRef.current) {
+        setIsLoading(false);
+      }
+    }
+  };
+
+  if (deletingCourse === undefined) return null;
+
+  return (
+    <>
+      <AlertDialog isOpen={isOpen} leastDestructiveRef={cancelRef} onClose={onClose}>
+        <AlertDialogOverlay>
+          <AlertDialogContent>
+            <AlertDialogHeader fontSize='lg' fontWeight='bold'>
+              Confirm deleting
+            </AlertDialogHeader>
+            <AlertDialogBody>
+              The course with title "{deletingCourse.title}" will be removed from the system. After deleting a course,
+              the lessons in it will also be deleted.
+            </AlertDialogBody>
+            <AlertDialogFooter>
+              <Button
+                ref={cancelRef}
+                onClick={() => {
+                  setDeletingCourse(undefined);
+                  onClose();
+                }}
+              >
+                Cancel
+              </Button>
+              <Button
+                colorScheme='red'
+                isLoading={isLoading}
+                loadingText='Deleting...'
+                onClick={() => onDelete(deletingCourse.id)}
+                ml={3}
+              >
+                Delete
+              </Button>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialogOverlay>
+      </AlertDialog>
+    </>
+  );
+};
+
+export default DeleteCourseDialog;

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

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

src/providers/index.tsx

@@ -2,7 +2,7 @@ import React, { useState, ReactNode } from 'react';
 import { CoursesPageContext, ProfilePageContext, StoreContext, UsersPageContext } from 'contexts';
 import { ProfilePageDataType, ProfilePageStatusType, SearchingRoleStateType } from 'types';
 import RootStore from 'stores/RootStore';
-import { ICategory, IUser } from 'interfaces';
+import { ICategory, ICourse, IUser } from 'interfaces';
 import { CourseStatusEnum } from 'enums';
 
 /**
@@ -64,9 +64,19 @@ 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);
+  const [deletingCourse, setDeletingCourse] = useState<Pick<ICourse, 'id' | 'title'> | undefined>(undefined);
 
   return (
-    <CoursesPageContext.Provider value={{ selectedCategory, setSelectedCategory, courseStatus, setCourseStatus }}>
+    <CoursesPageContext.Provider
+      value={{
+        selectedCategory,
+        setSelectedCategory,
+        courseStatus,
+        setCourseStatus,
+        deletingCourse,
+        setDeletingCourse,
+      }}
+    >
       {children}
     </CoursesPageContext.Provider>
   );

src/services/CourseService.ts

@@ -25,4 +25,15 @@ export class CourseService {
     });
     return result.data;
   }
+
+  /**
+   * Delete course by id
+   *
+   * @param id Course id
+   * @returns Deleted course
+   */
+  public async delete(id: string): Promise<IApiRespose<Omit<ICourse, 'teacher' | 'students' | 'lessons'>>> {
+    const result = await this.api.delete(`/v1/courses/${id}`);
+    return result.data;
+  }
 }

src/stores/CourseStore.ts

@@ -53,4 +53,21 @@ export default class CourseStore {
       this.setLoading(false);
     }
   }
+
+  public async deleteCourse(id: string) {
+    try {
+      const result = await this.courseService.delete(id);
+      console.log(`[${this.constructor.name}]: ${result.message}`, result);
+
+      runInAction(() => {
+        if (this.courses !== null) {
+          this.courses = this.courses.filter(course => course.id !== id);
+        }
+      });
+
+      return result;
+    } catch (error: any) {
+      throw error;
+    }
+  }
 }

src/types/index.d.ts

@@ -1,5 +1,5 @@
 import { CourseStatusEnum, UserRoleEnum } from 'enums';
-import { ICategory, IUser } from 'interfaces';
+import { ICategory, ICourse, IUser } from 'interfaces';
 import React from 'react';
 import { IconType } from 'react-icons/lib';
 
@@ -68,7 +68,7 @@ export type UsersPageContextType = {
   setEditingUser: React.Dispatch<React.SetStateAction<IUser | undefined>>;
 
   /**
-   * Set deliting user state when press on delete button
+   * Set deleting user state when press on delete button
    */
   deletingUser: IUser | undefined;
   setDeletingUser: React.Dispatch<React.SetStateAction<IUser | undefined>>;
@@ -86,6 +86,12 @@ export type CoursesPageContextType = {
    */
   courseStatus: CourseStatusEnum | undefined;
   setCourseStatus: React.Dispatch<React.SetStateAction<CourseStatusEnum | undefined>>;
+
+  /**
+   * Set deleting course state when press on delete button
+   */
+  deletingCourse: Pick<ICourse, 'id' | 'title'> | undefined;
+  setDeletingCourse: React.Dispatch<React.SetStateAction<Pick<ICourse, 'id' | 'title'> | undefined>>;
 };
 export type FetchCoursesParams = {
   /**