feat: add confirmation modal (#299)

feat add confirmation modal

apps/api/src/seed/nice-data-seeds.ts

@@ -2,7 +2,6 @@ import { faker } from "@faker-js/faker";
 
 import { LESSON_TYPES, QuestionType } from "src/lesson/lesson.type";
 
-
 import type { NiceCourseData } from "src/utils/types/test-types";
 
 export const niceCourses: NiceCourseData[] = [

apps/web/app/modules/Admin/EditCourse/CourseLessons/CourseLessons.types.ts

@@ -1,6 +1 @@
-export type LessonTypes =
-  | "presentation"
-  | "external_presentation"
-  | "video"
-  | "external_video"
-  | undefined;
+export type LessonTypes = "presentation" | "video" | undefined;

apps/web/app/modules/Admin/EditCourse/CourseLessons/NewChapter/NewChapter.tsx

@@ -5,11 +5,13 @@ import { Form, FormControl, FormField, FormItem, FormMessage } from "~/component
 import { Input } from "~/components/ui/input";
 import { Label } from "~/components/ui/label";
 
-import { ContentTypes } from "../../EditCourse.types";
+import { ContentTypes, DeleteContentType } from "../../EditCourse.types";
 
 import { useNewChapterForm } from "./hooks/useNewChapterForm";
 
 import type { Chapter } from "../../EditCourse.types";
+import { useState } from "react";
+import DeleteConfirmationModal from "~/modules/Admin/components/DeleteConfirmationModal";
 
 type NewChapterProps = {
   setContentTypeToDisplay: (contentTypeToDisplay: string) => void;
@@ -22,12 +24,22 @@ const NewChapter = ({ setContentTypeToDisplay, chapter }: NewChapterProps) => {
     throw new Error("courseId is required");
   }
 
-  const { form, onSubmit, onClickDelete } = useNewChapterForm({
+  const { form, onSubmit, onDelete } = useNewChapterForm({
     courseId: courseId ?? "",
     chapter,
     setContentTypeToDisplay,
   });
 
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const onCloseModal = () => {
+    setIsModalOpen(false);
+  };
+
+  const onClickDelete = () => {
+    setIsModalOpen(true);
+  };
+
   const buttonStyles = "bg-transparent text-red-500 border border-red-500 hover:bg-red-100";
   const saveButtonStyles = "bg-primary-700 hover:bg-blue-600 text-white";
 
@@ -64,7 +76,12 @@ const NewChapter = ({ setContentTypeToDisplay, chapter }: NewChapterProps) => {
               Save
             </Button>
             {chapter ? (
-              <Button aria-label="Delete chapter" className={buttonStyles} onClick={onClickDelete}>
+              <Button
+                aria-label="Delete chapter"
+                type="button"
+                className={buttonStyles}
+                onClick={onClickDelete}
+              >
                 Delete
               </Button>
             ) : (
@@ -79,6 +96,12 @@ const NewChapter = ({ setContentTypeToDisplay, chapter }: NewChapterProps) => {
           </div>
         </form>
       </Form>
+      <DeleteConfirmationModal
+        open={isModalOpen}
+        onClose={onCloseModal}
+        onDelete={onDelete}
+        contentType={DeleteContentType.CHAPTER}
+      />
     </div>
   );
 };

apps/web/app/modules/Admin/EditCourse/CourseLessons/NewChapter/hooks/useNewChapterForm.tsx

@@ -64,7 +64,7 @@ export const useNewChapterForm = ({
     }
   };
 
-  const onClickDelete = async () => {
+  const onDelete = async () => {
     if (!courseId || !chapter?.id) {
       console.error("Course ID or Chapter ID is missing.");
       return;
@@ -80,5 +80,5 @@ export const useNewChapterForm = ({
       console.error("Failed to delete chapter:", error);
     }
   };
-  return { form, onSubmit, onClickDelete };
+  return { form, onSubmit, onDelete };
 };

apps/web/app/modules/Admin/EditCourse/CourseLessons/NewLesson/FileLessonForm/FileLessonForm.tsx

@@ -9,11 +9,12 @@ import { Form, FormControl, FormItem, FormMessage } from "~/components/ui/form";
 import { Label } from "~/components/ui/label";
 import { getFileTypeFromName } from "~/utils/getFileTypeFromName";
 
-import { ContentTypes } from "../../../EditCourse.types";
+import { ContentTypes, DeleteContentType } from "../../../EditCourse.types";
 
 import { useFileLessonForm } from "./hooks/useFileLessonForm";
 
 import type { Chapter, Lesson } from "../../../EditCourse.types";
+import DeleteConfirmationModal from "~/modules/Admin/components/DeleteConfirmationModal";
 
 type FileLessonProps = {
   contentTypeToDisplay: string;
@@ -28,7 +29,7 @@ const FileLessonForm = ({
   chapterToEdit,
   lessonToEdit,
 }: FileLessonProps) => {
-  const { form, onSubmit, onClickDelete } = useFileLessonForm({
+  const { form, onSubmit, onDelete } = useFileLessonForm({
     chapterToEdit,
     lessonToEdit,
     setContentTypeToDisplay,
@@ -38,6 +39,16 @@ const FileLessonForm = ({
   const [url, setUrl] = useState(lessonToEdit?.fileS3Key || "");
   const fileType = form.watch("fileType");
 
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const onCloseModal = () => {
+    setIsModalOpen(false);
+  };
+
+  const onClickDelete = () => {
+    setIsModalOpen(true);
+  };
+
   const handleFileUpload = useCallback(
     async (file: File) => {
       setIsUploading(true);
@@ -118,6 +129,7 @@ const FileLessonForm = ({
               Save
             </Button>
             <Button
+              type="button"
               onClick={
                 lessonToEdit ? onClickDelete : () => setContentTypeToDisplay(ContentTypes.EMPTY)
               }
@@ -128,6 +140,14 @@ const FileLessonForm = ({
           </div>
         </form>
       </Form>
+      <DeleteConfirmationModal
+        open={isModalOpen}
+        onClose={onCloseModal}
+        onDelete={onDelete}
+        contentType={
+          ContentTypes.VIDEO_LESSON_FORM ? DeleteContentType.VIDEO : DeleteContentType.PRESENTATION
+        }
+      />
     </div>
   );
 };

apps/web/app/modules/Admin/EditCourse/CourseLessons/NewLesson/FileLessonForm/hooks/useFileLessonForm.ts

@@ -76,7 +76,7 @@ export const useFileLessonForm = ({
     }
   };
 
-  const onClickDelete = async () => {
+  const onDelete = async () => {
     if (!chapterToEdit?.id || !lessonToEdit?.id) {
       console.error("Course ID or Chapter ID is missing.");
       return;
@@ -93,5 +93,5 @@ export const useFileLessonForm = ({
     }
   };
 
-  return { form, onSubmit, onClickDelete };
+  return { form, onSubmit, onDelete };
 };

apps/web/app/modules/Admin/EditCourse/CourseLessons/NewLesson/FileLessonForm/validators/fileLessonFormSchema.ts

@@ -3,7 +3,7 @@ import { z } from "zod";
 export const fileLessonFormSchema = z.object({
   title: z.string().min(1, "You need to fill this field to continue."),
   description: z.string(),
-  type: z.enum(["presentation", "external_presentation", "video", "external_video"]),
+  type: z.enum(["presentation", "video"]),
   displayOrder: z.number().optional(),
   fileS3Key: z.string(),
   fileType: z.string(),

apps/web/app/modules/Admin/EditCourse/CourseLessons/NewLesson/QuizLessonForm/QuizLessonForm.tsx

@@ -14,8 +14,9 @@ import { useQuizLessonForm } from "./hooks/useQuizLessonForm";
 import { Question, QuestionType } from "./QuizLessonForm.types";
 import type { QuizLessonFormValues } from "./validators/quizLessonFormSchema";
 import type { UseFormReturn } from "react-hook-form";
-import { Chapter, ContentTypes, Lesson } from "../../../EditCourse.types";
-import { useCallback } from "react";
+import { Chapter, ContentTypes, DeleteContentType, Lesson } from "../../../EditCourse.types";
+import { useCallback, useState } from "react";
+import DeleteConfirmationModal from "~/modules/Admin/components/DeleteConfirmationModal";
 
 type QuizLessonProps = {
   setContentTypeToDisplay: (contentTypeToDisplay: string) => void;
@@ -28,14 +29,24 @@ const QuizLessonForm = ({
   chapterToEdit,
   lessonToEdit,
 }: QuizLessonProps) => {
-  const { form, onSubmit, onClickDelete } = useQuizLessonForm({
+  const { form, onSubmit, onDelete } = useQuizLessonForm({
     setContentTypeToDisplay,
     chapterToEdit,
     lessonToEdit,
   });
 
   const questions = form.watch("questions");
 
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const onCloseModal = () => {
+    setIsModalOpen(false);
+  };
+
+  const onClickDelete = () => {
+    setIsModalOpen(true);
+  };
+
   const addQuestion = useCallback(
     (questionType: string) => {
       const questions = form.getValues("questions") || [];
@@ -131,6 +142,7 @@ const QuizLessonForm = ({
               </Button>
               {lessonToEdit ? (
                 <Button
+                  type="button"
                   onClick={onClickDelete}
                   className="text-error-700 bg-color-white border border-neutral-300"
                 >
@@ -149,6 +161,12 @@ const QuizLessonForm = ({
           </form>
         </Form>
       </div>
+      <DeleteConfirmationModal
+        open={isModalOpen}
+        onClose={onCloseModal}
+        onDelete={onDelete}
+        contentType={DeleteContentType.QUIZ}
+      />
     </div>
   );
 };

apps/web/app/modules/Admin/EditCourse/CourseLessons/NewLesson/QuizLessonForm/hooks/useQuizLessonForm.tsx

@@ -88,7 +88,7 @@ export const useQuizLessonForm = ({
     }
   }, [lessonToEdit, reset]);
 
-  const onClickDelete = async () => {
+  const onDelete = async () => {
     if (!chapterToEdit?.id || !lessonToEdit?.id) {
       console.error("Course ID or Chapter ID is missing.");
       return;
@@ -144,5 +144,5 @@ export const useQuizLessonForm = ({
     }
   };
 
-  return { form, onSubmit, onClickDelete };
+  return { form, onSubmit, onDelete };
 };

apps/web/app/modules/Admin/EditCourse/CourseLessons/NewLesson/TextLessonForm/TextLessonForm.tsx

@@ -4,11 +4,13 @@ import { Button } from "~/components/ui/button";
 import { Form, FormControl, FormField, FormItem, FormMessage } from "~/components/ui/form";
 import { Label } from "~/components/ui/label";
 
-import { ContentTypes } from "../../../EditCourse.types";
+import { ContentTypes, DeleteContentType } from "../../../EditCourse.types";
 
 import { useTextLessonForm } from "./hooks/useTextLessonForm";
 
 import type { Chapter, Lesson } from "../../../EditCourse.types";
+import { useState } from "react";
+import DeleteConfirmationModal from "~/modules/Admin/components/DeleteConfirmationModal";
 
 type TextLessonProps = {
   setContentTypeToDisplay: (contentTypeToDisplay: string) => void;
@@ -21,12 +23,22 @@ const TextLessonForm = ({
   chapterToEdit,
   lessonToEdit,
 }: TextLessonProps) => {
-  const { form, onSubmit, onClickDelete } = useTextLessonForm({
+  const { form, onSubmit, onDelete } = useTextLessonForm({
     chapterToEdit,
     lessonToEdit,
     setContentTypeToDisplay,
   });
 
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const onCloseModal = () => {
+    setIsModalOpen(false);
+  };
+
+  const onClickDelete = () => {
+    setIsModalOpen(true);
+  };
+
   return (
     <div className="flex flex-col gap-y-6 p-8 bg-white rounded-lg">
       <div className="flex flex-col gap-y-1">
@@ -75,6 +87,7 @@ const TextLessonForm = ({
               Save
             </Button>
             <Button
+              type="button"
               onClick={
                 lessonToEdit ? onClickDelete : () => setContentTypeToDisplay(ContentTypes.EMPTY)
               }
@@ -85,6 +98,12 @@ const TextLessonForm = ({
           </div>
         </form>
       </Form>
+      <DeleteConfirmationModal
+        open={isModalOpen}
+        onClose={onCloseModal}
+        onDelete={onDelete}
+        contentType={DeleteContentType.TEXT_BLOCK}
+      />
     </div>
   );
 };

apps/web/app/modules/Admin/EditCourse/CourseLessons/NewLesson/TextLessonForm/hooks/useTextLessonForm.ts

@@ -77,7 +77,7 @@ export const useTextLessonForm = ({
     }
   };
 
-  const onClickDelete = async () => {
+  const onDelete = async () => {
     if (!chapterToEdit?.id || !lessonToEdit?.id) {
       console.error("Course ID or Chapter ID is missing.");
       return;
@@ -94,5 +94,5 @@ export const useTextLessonForm = ({
     }
   };
 
-  return { form, onSubmit, onClickDelete };
+  return { form, onSubmit, onDelete };
 };

apps/web/app/modules/Admin/EditCourse/EditCourse.types.ts

@@ -39,9 +39,18 @@ export const ContentTypes = {
 
 export type LessonIcons = "Text" | "Video" | "Presentation" | "Quiz";
 
-export enum LessonType {
-  VIDEO = "video",
-  TEXT_BLOCK = "text_block",
-  PRESENTATION = "presentation",
-  QUIZ = "quiz",
-}
+export const LessonType = {
+  VIDEO: "video",
+  TEXT_BLOCK: "text_block",
+  PRESENTATION: "presentation",
+  QUIZ: "quiz",
+} as const;
+
+export type LessonType = (typeof LessonType)[keyof typeof LessonType];
+
+export const DeleteContentType = {
+  ...LessonType,
+  CHAPTER: "chapter",
+} as const;
+
+export type DeleteContentType = (typeof DeleteContentType)[keyof typeof DeleteContentType];