diff --git a/src/pages/courses/components/DeleteCourseDialog/DeleteCourseDialog.tsx b/src/components/Dialogs/DeleteCourseDialog/DeleteCourseDialog.tsx similarity index 71% rename from src/pages/courses/components/DeleteCourseDialog/DeleteCourseDialog.tsx rename to src/components/Dialogs/DeleteCourseDialog/DeleteCourseDialog.tsx index 667bc5f..e424eb5 100644 --- a/src/pages/courses/components/DeleteCourseDialog/DeleteCourseDialog.tsx +++ b/src/components/Dialogs/DeleteCourseDialog/DeleteCourseDialog.tsx @@ -1,4 +1,4 @@ -import React, { useContext } from 'react'; +import React from 'react'; /** * Types @@ -10,15 +10,12 @@ import { ICourse } from '@educt/interfaces'; */ import ConfirmDialog from '@educt/components/ConfirmDialog/ConfirmDialog'; -/** - * Contexts - */ -import { CoursesPageContext } from '@educt/contexts'; - /** * Hooks */ import { useDeleteCourse } from '@educt/hooks/queries/course/useDeleteCourse'; +import { useHistory, useLocation } from 'react-router'; +import useIsMountedRef from '@educt/hooks/useIsMountedRef'; type DeleteCourseDialogPropsType = { course: Pick; @@ -27,24 +24,29 @@ type DeleteCourseDialogPropsType = { }; const DeleteCourseDialog: React.FC = ({ onClose, isOpen, course }) => { - const { setDeletingCourse } = useContext(CoursesPageContext); const { deleteCourse, isLoading } = useDeleteCourse(); + const isMountedRef = useIsMountedRef(); + const history = useHistory(); + const location = useLocation(); const handleDelete = async (isConfirmed: boolean, id: string) => { if (isConfirmed) { try { await deleteCourse(id); + if (isMountedRef.current && location.pathname !== '/courses') { + history.push('/courses'); + } } catch (error: any) { console.error(error); - } finally { - setDeletingCourse(undefined); } } - /** - * Close dialog - */ - onClose(); + if (isMountedRef.current) { + /** + * Close dialog + */ + onClose(); + } }; return ( diff --git a/src/pages/courses/components/DeleteCourseDialog/index.ts b/src/components/Dialogs/DeleteCourseDialog/index.ts similarity index 100% rename from src/pages/courses/components/DeleteCourseDialog/index.ts rename to src/components/Dialogs/DeleteCourseDialog/index.ts diff --git a/src/components/Dialogs/DeleteLessonDialog/DeleteLessonDialog.tsx b/src/components/Dialogs/DeleteLessonDialog/DeleteLessonDialog.tsx index 3b5b6de..dfaf8c4 100644 --- a/src/components/Dialogs/DeleteLessonDialog/DeleteLessonDialog.tsx +++ b/src/components/Dialogs/DeleteLessonDialog/DeleteLessonDialog.tsx @@ -21,6 +21,7 @@ type DeleteLessonDialogPropsType = { onClose: () => void; }; +//TODO pass lesson by prop const DeleteLessonDialog: React.FC = ({ isOpen, onClose }) => { const { pageStore: { @@ -31,7 +32,11 @@ const DeleteLessonDialog: React.FC = ({ isOpen, onC const handleDelete = async (isConfirmed: boolean) => { if (isConfirmed && deletingLesson) { - await deleteLesson(deletingLesson.id); + try { + await deleteLesson(deletingLesson.id); + } catch (error: any) { + console.error(error); + } } /** diff --git a/src/contexts/index.ts b/src/contexts/index.ts index 6174192..2502637 100644 --- a/src/contexts/index.ts +++ b/src/contexts/index.ts @@ -29,6 +29,8 @@ export const CoursesPageContext = createContext({ setSelectedCategory: () => {}, courseStatus: undefined, setCourseStatus: () => {}, + + //TODO: remove deletingCourse: undefined, setDeletingCourse: () => {}, }); diff --git a/src/pages/courses/components/CourseList/CourseList.tsx b/src/pages/courses/components/CourseList/CourseList.tsx index c5f35f6..2ccb741 100644 --- a/src/pages/courses/components/CourseList/CourseList.tsx +++ b/src/pages/courses/components/CourseList/CourseList.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useState } from 'react'; import { observer } from 'mobx-react'; import { Box, Grid, Text } from '@chakra-ui/react'; @@ -11,7 +11,7 @@ import { CourseItemPropsType } from './CourseItem'; /** * Components */ -import DeleteCourseDialog from '../DeleteCourseDialog'; +import DeleteCourseDialog from '@educt/components/Dialogs/DeleteCourseDialog'; import LoadingList from '@educt/components/LoadingList'; /** @@ -26,6 +26,7 @@ import { useDisclosure } from '@chakra-ui/hooks'; * Contexts */ import { CoursesPageContext } from '@educt/contexts'; +import { ICourse } from '@educt/interfaces'; type CourseListPropsType = { render: React.FC; @@ -36,11 +37,17 @@ const CourseList: React.FC = ({ render: Item }) => { userStore: { me }, courseStore, } = useRootStore(); - const { selectedCategory, courseStatus, deletingCourse, setDeletingCourse } = useContext(CoursesPageContext); + const [deleting, setDeleting] = useState | null>(null); + const { selectedCategory, courseStatus } = useContext(CoursesPageContext); const { onOpen: onOpenDeleteDialog, onClose: onCloseDeleteDialog, isOpen: isOpenDeleteDialog } = useDisclosure(); const { setCourseStatus } = useSetCourseStatus(); const { courses, isLoading } = courseStore; + const deleteHandler = (course: Pick) => { + setDeleting(course); + onOpenDeleteDialog(); + }; + /** * Fetch courses handler */ @@ -57,19 +64,14 @@ const CourseList: React.FC = ({ render: Item }) => { return ( - {deletingCourse && ( - - )} + {deleting && } {courses.length !== 0 ? ( {courses.map(course => ( { - setDeletingCourse(course); - onOpenDeleteDialog(); - }} + onDelete={() => deleteHandler({ id: course.id, title: course.title })} onSetStatus={setCourseStatus} /> ))} diff --git a/src/pages/courses/edit/edit.tsx b/src/pages/courses/edit/edit.tsx index 4ecad80..878f833 100644 --- a/src/pages/courses/edit/edit.tsx +++ b/src/pages/courses/edit/edit.tsx @@ -1,7 +1,8 @@ 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 } from '@chakra-ui/react'; +import { Box, Heading, Text, Tab, TabList, Flex, Tabs, TabPanels, TabPanel, Button } from '@chakra-ui/react'; +import { DeleteIcon } from '@chakra-ui/icons'; /** * Types @@ -16,6 +17,7 @@ import { EditCourseForm } from '@educt/components/Forms/CourseForm'; import SetCourseStatusButton from '@educt/components/SetCourseStatusButton'; import LessonList from './components/LessonList'; import { StudentList, StudentItem } from './components/StudentList'; +import DeleteCourseDialog from '@educt/components/Dialogs/DeleteCourseDialog'; /** * Hooks @@ -23,6 +25,7 @@ import { StudentList, StudentItem } from './components/StudentList'; import { useParams } from 'react-router-dom'; import { useRootStore } from '@educt/hooks/useRootStore'; import { useFetchCourse } from '@educt/hooks/queries'; +import { useDisclosure } from '@chakra-ui/hooks'; /** * Course editor @@ -35,6 +38,7 @@ const EditCoursePage: React.FC = () => { }, } = useRootStore(); const { error, isLoading } = useFetchCourse(params.id); + const { onOpen: onOpenDeleteDialog, onClose: onCloseDeleteDialog, isOpen: isOpenDeleteDialog } = useDisclosure(); /** * Not Found @@ -53,6 +57,7 @@ const EditCoursePage: React.FC = () => { Editing {course.title} + Course editor @@ -60,6 +65,9 @@ const EditCoursePage: React.FC = () => { + diff --git a/src/stores/pages/EditCourseStore.ts b/src/stores/pages/EditCourseStore.ts index 37c0869..4850a6d 100644 --- a/src/stores/pages/EditCourseStore.ts +++ b/src/stores/pages/EditCourseStore.ts @@ -10,6 +10,10 @@ export default class EditCourseStore { public course: Omit | null = null; + public isDeleting: boolean = false; + + public deletingCourse: Pick | undefined; + public deletingLesson: ILesson | undefined; constructor(pageStore: PageStore) { @@ -72,7 +76,11 @@ export default class EditCourseStore { } } - setDeletingLesson(lesson: ILesson) { + public setDeletingLesson(lesson: ILesson) { this.deletingLesson = lesson; } + + public setDeletingCourse(course: Pick | undefined) { + this.deletingCourse = course; + } }