From b47a7f88a4ef5a56edc78832eca9ee2efa67cb70 Mon Sep 17 00:00:00 2001 From: Alex Mickelson Date: Sat, 2 Nov 2024 13:29:36 -0600 Subject: [PATCH] adding modal control --- .../[courseName]/calendar/day/DayTitle.tsx | 5 +- .../context/DraggingContextProvider.tsx | 2 + .../lecture/[lectureDay]/EditLecture.tsx | 2 + .../lecture/[lectureDay]/EditLectureTitle.tsx | 1 - .../lecture/[lectureDay]/LectureButtons.tsx | 64 +++++++++++++++++++ .../lecture/[lectureDay]/page.tsx | 12 +++- .../[courseName]/modules/ExpandableModule.tsx | 5 +- .../[assignmentName]/AssignmentButtons.tsx | 4 +- .../page/[pageName]/EditPageButtons.tsx | 5 +- .../quiz/[quizName]/QuizButton.tsx | 4 +- nextjs/src/components/Modal.tsx | 39 ++++++++--- 11 files changed, 122 insertions(+), 21 deletions(-) create mode 100644 nextjs/src/app/course/[courseName]/lecture/[lectureDay]/LectureButtons.tsx diff --git a/nextjs/src/app/course/[courseName]/calendar/day/DayTitle.tsx b/nextjs/src/app/course/[courseName]/calendar/day/DayTitle.tsx index 0211136..9ba2fb1 100644 --- a/nextjs/src/app/course/[courseName]/calendar/day/DayTitle.tsx +++ b/nextjs/src/app/course/[courseName]/calendar/day/DayTitle.tsx @@ -1,4 +1,4 @@ -import Modal from "@/components/Modal"; +import Modal, { useModal } from "@/components/Modal"; import { useLecturesByWeekQuery } from "@/hooks/localCourse/lectureHooks"; import { getLectureUrl } from "@/services/urlUtils"; import Link from "next/link"; @@ -13,6 +13,8 @@ export function DayTitle({ day, dayAsDate }: { day: string; dayAsDate: Date }) { const { data: weeks } = useLecturesByWeekQuery(); const { setIsDragging } = useDragStyleContext(); const todaysLecture = getLectureForDay(weeks, dayAsDate); + const modal = useModal(); + return (
diff --git a/nextjs/src/app/course/[courseName]/context/DraggingContextProvider.tsx b/nextjs/src/app/course/[courseName]/context/DraggingContextProvider.tsx index fa85135..ac952b3 100644 --- a/nextjs/src/app/course/[courseName]/context/DraggingContextProvider.tsx +++ b/nextjs/src/app/course/[courseName]/context/DraggingContextProvider.tsx @@ -253,8 +253,10 @@ export default function DraggingContextProvider({ settings.defaultDueTime.hour, settings.defaultDueTime.minute, updateAssignmentMutation, + updateLectureMutation, updatePageMutation, updateQuizMutation, + weeks, ] ); diff --git a/nextjs/src/app/course/[courseName]/lecture/[lectureDay]/EditLecture.tsx b/nextjs/src/app/course/[courseName]/lecture/[lectureDay]/EditLecture.tsx index d9add61..094b97e 100644 --- a/nextjs/src/app/course/[courseName]/lecture/[lectureDay]/EditLecture.tsx +++ b/nextjs/src/app/course/[courseName]/lecture/[lectureDay]/EditLecture.tsx @@ -12,6 +12,7 @@ import { import { useEffect, useState } from "react"; import LecturePreview from "./LecturePreview"; import EditLectureTitle from "./EditLectureTitle"; +import LectureButtons from "./LectureButtons"; export default function EditLecture({ lectureDay }: { lectureDay: string }) { const { data: weeks } = useLecturesByWeekQuery(); @@ -63,6 +64,7 @@ Date: ${lectureDay} {lecture && }
+ ); } diff --git a/nextjs/src/app/course/[courseName]/lecture/[lectureDay]/EditLectureTitle.tsx b/nextjs/src/app/course/[courseName]/lecture/[lectureDay]/EditLectureTitle.tsx index db0c211..e48a246 100644 --- a/nextjs/src/app/course/[courseName]/lecture/[lectureDay]/EditLectureTitle.tsx +++ b/nextjs/src/app/course/[courseName]/lecture/[lectureDay]/EditLectureTitle.tsx @@ -3,7 +3,6 @@ import { getDayOfWeek } from "@/models/local/localCourse"; import { getDateFromString } from "@/models/local/timeUtils"; import { getLectureWeekName } from "@/services/fileStorage/utils/lectureUtils"; import { getCourseUrl, getLecturePreviewUrl } from "@/services/urlUtils"; -import { useRouter } from "next/navigation"; import { useCourseContext } from "../../context/courseContext"; import Link from "next/link"; diff --git a/nextjs/src/app/course/[courseName]/lecture/[lectureDay]/LectureButtons.tsx b/nextjs/src/app/course/[courseName]/lecture/[lectureDay]/LectureButtons.tsx new file mode 100644 index 0000000..f058c36 --- /dev/null +++ b/nextjs/src/app/course/[courseName]/lecture/[lectureDay]/LectureButtons.tsx @@ -0,0 +1,64 @@ +"use client"; + +import Modal, { useModal } from "@/components/Modal"; +import { Spinner } from "@/components/Spinner"; +import { getCourseUrl } from "@/services/urlUtils"; +import { useQueryClient } from "@tanstack/react-query"; +import { useRouter } from "next/navigation"; +import { useState } from "react"; +import { useCourseContext } from "../../context/courseContext"; +import { deleteLecture } from "@/services/fileStorage/lectureFileStorageService"; +import { useLocalCourseSettingsQuery } from "@/hooks/localCourse/localCoursesHooks"; +import { lectureKeys } from "@/hooks/localCourse/lectureKeys"; + +export default function LectureButtons({ lectureDay }: { lectureDay: string }) { + const queryClient = useQueryClient(); + const { courseName } = useCourseContext(); + const { data: settings } = useLocalCourseSettingsQuery(); + const router = useRouter(); + const [isLoading, setIsLoading] = useState(false); + const modal = useModal(); + + return ( +
+
+ + {({ closeModal }) => ( +
+
+ Are you sure you want to delete this lecture? +
+
+
+ + +
+ {isLoading && } +
+ )} + + {isLoading && } +
+
+ ); +} diff --git a/nextjs/src/app/course/[courseName]/lecture/[lectureDay]/page.tsx b/nextjs/src/app/course/[courseName]/lecture/[lectureDay]/page.tsx index 03abe22..b164960 100644 --- a/nextjs/src/app/course/[courseName]/lecture/[lectureDay]/page.tsx +++ b/nextjs/src/app/course/[courseName]/lecture/[lectureDay]/page.tsx @@ -1,5 +1,8 @@ import EditLecture from "./EditLecture"; -import { getDateFromStringOrThrow, getDateOnlyMarkdownString } from "@/models/local/timeUtils"; +import { + getDateFromStringOrThrow, + getDateOnlyMarkdownString, +} from "@/models/local/timeUtils"; export default function page({ params: { lectureDay }, @@ -8,7 +11,10 @@ export default function page({ }) { const decodedLectureDay = decodeURIComponent(lectureDay); console.log(decodedLectureDay); - const lectureDate = getDateFromStringOrThrow(decodedLectureDay, "lecture day in lecture page") - const lectureDayOnly = getDateOnlyMarkdownString(lectureDate) + const lectureDate = getDateFromStringOrThrow( + decodedLectureDay, + "lecture day in lecture page" + ); + const lectureDayOnly = getDateOnlyMarkdownString(lectureDate); return ; } diff --git a/nextjs/src/app/course/[courseName]/modules/ExpandableModule.tsx b/nextjs/src/app/course/[courseName]/modules/ExpandableModule.tsx index ae26a3b..8fd2b87 100644 --- a/nextjs/src/app/course/[courseName]/modules/ExpandableModule.tsx +++ b/nextjs/src/app/course/[courseName]/modules/ExpandableModule.tsx @@ -9,7 +9,7 @@ import { getDateOnlyMarkdownString, } from "@/models/local/timeUtils"; import { Fragment } from "react"; -import Modal from "../../../../components/Modal"; +import Modal, { useModal } from "../../../../components/Modal"; import NewItemForm from "./NewItemForm"; import { ModuleCanvasStatus } from "./ModuleCanvasStatus"; import ClientOnly from "@/components/ClientOnly"; @@ -31,6 +31,7 @@ export default function ExpandableModule({ const { data: assignments } = useAssignmentsQueries(moduleName); const { data: quizzes } = useQuizzesQueries(moduleName); const { data: pages } = usePagesQueries(moduleName); + const modal = useModal(); const moduleItems: { type: "assignment" | "quiz" | "page"; @@ -91,7 +92,7 @@ export default function ExpandableModule({ )} > <> - + {({ closeModal }) => (
a.name === assignmentName @@ -116,6 +117,7 @@ export function AssignmentButtons({ )} {!assignmentInCanvas && ( p.title === pageName); @@ -88,6 +88,7 @@ export default function EditPageButtons({ {!pageInCanvas && ( c.title === quizName); @@ -74,6 +75,7 @@ export function QuizButtons({ )} {!quizInCanvas && ( void; + closeModal: () => void; +} + +export function useModal() { + const [isOpen, setIsOpen] = useState(false); + + const openModal = () => setIsOpen(true); + const closeModal = () => setIsOpen(false); + + return { + isOpen, + openModal, + closeModal, + }; +} + export default function Modal({ children, buttonText, buttonClass = "", modalWidth = "w-1/3", + modalControl, }: { children: (props: { closeModal: () => void }) => ReactNode; buttonText: string; buttonClass?: string; modalWidth?: string; + modalControl: ModalControl; }) { - const [isOpen, setIsOpen] = useState(false); - - const openModal = () => setIsOpen(true); - const closeModal = () => setIsOpen(false); - return ( <> - @@ -27,9 +43,11 @@ export default function Modal({ className={ " fixed inset-0 flex items-center justify-center transition-all duration-400 h-screen " + " bg-black" + - (isOpen ? " bg-opacity-50 z-50 " : " bg-opacity-0 -z-50 ") + (modalControl.isOpen + ? " bg-opacity-50 z-50 " + : " bg-opacity-0 -z-50 ") } - onClick={closeModal} + onClick={modalControl.closeModal} >
{ @@ -40,10 +58,11 @@ export default function Modal({ ` bg-slate-800 p-6 rounded-lg shadow-lg ` + modalWidth + ` transition-all duration-400 ` + - ` ${isOpen ? "opacity-100" : "opacity-0"}` + ` ${modalControl.isOpen ? "opacity-100" : "opacity-0"}` } > - {isOpen && children({ closeModal })} + {modalControl.isOpen && + children({ closeModal: modalControl.closeModal })}