Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add confirmation modal #299

Merged
merged 2 commits into from
Dec 18, 2024
Merged

feat: add confirmation modal #299

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
46ceb35
feat add confirmation modal
mateuszszczecina Dec 17, 2024
5e7d40e
feat: change types
mateuszszczecina Dec 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion apps/api/src/seed/nice-data-seeds.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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[] = [
Expand Down
2 changes: 1 addition & 1 deletion apps/web/app/assets/svgs/warning.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 8 additions & 0 deletions apps/web/app/modules/Admin/EditCourse/CourseLessons/CourseLessons.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,3 +4,11 @@ export type LessonTypes =
| "video"
| "external_video"
| undefined;

export enum DeleteContentType {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Consider replacing enum with a const object - it would give us better type guarantees.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I also see that DeleteContentType is very similar to the LessonType from Admin/EditCourse/EditCourse.types.ts maybe it is worth to create some shared, extendable types?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ye sure, i will change it

Video = "video",
Presentation = "presentation",
Text = "text",
Quiz = "quiz",
Chapter = "chapter",
}
28 changes: 26 additions & 2 deletions apps/web/app/modules/Admin/EditCourse/CourseLessons/NewChapter/NewChapter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,9 @@ import { ContentTypes } 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";
import { DeleteContentType } from "../CourseLessons.types";

type NewChapterProps = {
setContentTypeToDisplay: (contentTypeToDisplay: string) => void;
Expand All @@ -22,12 +25,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";

Expand Down Expand Up @@ -64,7 +77,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>
) : (
Expand All @@ -79,6 +97,12 @@ const NewChapter = ({ setContentTypeToDisplay, chapter }: NewChapterProps) => {
</div>
</form>
</Form>
<DeleteConfirmationModal
open={isModalOpen}
onClose={onCloseModal}
onDelete={onDelete}
contentType={DeleteContentType.Chapter}
/>
</div>
);
};
Expand Down
4 changes: 2 additions & 2 deletions apps/web/app/modules/Admin/EditCourse/CourseLessons/NewChapter/hooks/useNewChapterForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -80,5 +80,5 @@ export const useNewChapterForm = ({
console.error("Failed to delete chapter:", error);
}
};
return { form, onSubmit, onClickDelete };
return { form, onSubmit, onDelete };
};
23 changes: 22 additions & 1 deletion ...eb/app/modules/Admin/EditCourse/CourseLessons/NewLesson/FileLessonForm/FileLessonForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ import { ContentTypes } from "../../../EditCourse.types";
import { useFileLessonForm } from "./hooks/useFileLessonForm";

import type { Chapter, Lesson } from "../../../EditCourse.types";
import DeleteConfirmationModal from "~/modules/Admin/components/DeleteConfirmationModal";
import { DeleteContentType } from "../../CourseLessons.types";

type FileLessonProps = {
contentTypeToDisplay: string;
Expand All @@ -28,7 +30,7 @@ const FileLessonForm = ({
chapterToEdit,
lessonToEdit,
}: FileLessonProps) => {
const { form, onSubmit, onClickDelete } = useFileLessonForm({
const { form, onSubmit, onDelete } = useFileLessonForm({
chapterToEdit,
lessonToEdit,
setContentTypeToDisplay,
Expand All @@ -38,6 +40,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);
Expand Down Expand Up @@ -118,6 +130,7 @@ const FileLessonForm = ({
Save
</Button>
<Button
type="button"
onClick={
lessonToEdit ? onClickDelete : () => setContentTypeToDisplay(ContentTypes.EMPTY)
}
Expand All @@ -128,6 +141,14 @@ const FileLessonForm = ({
</div>
</form>
</Form>
<DeleteConfirmationModal
open={isModalOpen}
onClose={onCloseModal}
onDelete={onDelete}
contentType={
ContentTypes.VIDEO_LESSON_FORM ? DeleteContentType.Video : DeleteContentType.Presentation
}
/>
</div>
);
};
Expand Down
4 changes: 2 additions & 2 deletions ...odules/Admin/EditCourse/CourseLessons/NewLesson/FileLessonForm/hooks/useFileLessonForm.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -93,5 +93,5 @@ export const useFileLessonForm = ({
}
};

return { form, onSubmit, onClickDelete };
return { form, onSubmit, onDelete };
};
23 changes: 21 additions & 2 deletions ...eb/app/modules/Admin/EditCourse/CourseLessons/NewLesson/QuizLessonForm/QuizLessonForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,9 @@ 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 { useCallback, useState } from "react";
import DeleteConfirmationModal from "~/modules/Admin/components/DeleteConfirmationModal";
import { DeleteContentType } from "../../CourseLessons.types";

type QuizLessonProps = {
setContentTypeToDisplay: (contentTypeToDisplay: string) => void;
Expand All @@ -28,14 +30,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") || [];
Expand Down Expand Up @@ -131,6 +143,7 @@ const QuizLessonForm = ({
</Button>
{lessonToEdit ? (
<Button
type="button"
onClick={onClickDelete}
className="text-error-700 bg-color-white border border-neutral-300"
>
Expand All @@ -149,6 +162,12 @@ const QuizLessonForm = ({
</form>
</Form>
</div>
<DeleteConfirmationModal
open={isModalOpen}
onClose={onCloseModal}
onDelete={onDelete}
contentType={DeleteContentType.Quiz}
/>
</div>
);
};
Expand Down
4 changes: 2 additions & 2 deletions ...dules/Admin/EditCourse/CourseLessons/NewLesson/QuizLessonForm/hooks/useQuizLessonForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -144,5 +144,5 @@ export const useQuizLessonForm = ({
}
};

return { form, onSubmit, onClickDelete };
return { form, onSubmit, onDelete };
};
22 changes: 21 additions & 1 deletion ...eb/app/modules/Admin/EditCourse/CourseLessons/NewLesson/TextLessonForm/TextLessonForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,9 @@ import { ContentTypes } 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";
import { DeleteContentType } from "../../CourseLessons.types";

type TextLessonProps = {
setContentTypeToDisplay: (contentTypeToDisplay: string) => void;
Expand All @@ -21,12 +24,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">
Expand Down Expand Up @@ -75,6 +88,7 @@ const TextLessonForm = ({
Save
</Button>
<Button
type="button"
onClick={
lessonToEdit ? onClickDelete : () => setContentTypeToDisplay(ContentTypes.EMPTY)
}
Expand All @@ -85,6 +99,12 @@ const TextLessonForm = ({
</div>
</form>
</Form>
<DeleteConfirmationModal
open={isModalOpen}
onClose={onCloseModal}
onDelete={onDelete}
contentType={DeleteContentType.Text}
/>
</div>
);
};
Expand Down
4 changes: 2 additions & 2 deletions ...odules/Admin/EditCourse/CourseLessons/NewLesson/TextLessonForm/hooks/useTextLessonForm.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -94,5 +94,5 @@ export const useTextLessonForm = ({
}
};

return { form, onSubmit, onClickDelete };
return { form, onSubmit, onDelete };
};
Loading
Loading