adding modal control

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 (
     <div className="flex justify-between">
       <Link
@@ -37,6 +39,7 @@ export function DayTitle({ day, dayAsDate }: { day: string; dayAsDate: Date }) {
         {dayAsDate.getDate()} {todaysLecture?.name}
       </Link>
       <Modal
+        modalControl={modal}
         buttonText="+"
         buttonClass="unstyled hover:font-bold hover:scale-125 px-1 mb-auto mt-0 pt-0"
       >

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,
     ]
   );
 

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 && <LecturePreview lecture={lecture} />}
         </div>
       </div>
+      <LectureButtons lectureDay={lectureDay} />
     </div>
   );
 }

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";
 

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 (
+    <div className="p-5 flex flex-row justify-end gap-3">
+      <div>
+        <Modal
+          modalControl={modal}
+          buttonText="Delete Lecture"
+          buttonClass="btn-danger"
+          modalWidth="w-1/5"
+        >
+          {({ closeModal }) => (
+            <div>
+              <div className="text-center">
+                Are you sure you want to delete this lecture?
+              </div>
+              <br />
+              <div className="flex justify-around gap-3">
+                <button
+                  onClick={async () => {
+                    setIsLoading(true);
+                    router.push(getCourseUrl(courseName));
+                    await deleteLecture(courseName, settings, lectureDay);
+                    await queryClient.invalidateQueries({
+                      queryKey: lectureKeys.allLectures(courseName),
+                    });
+                  }}
+                  disabled={isLoading}
+                  className="btn-danger"
+                >
+                  Yes
+                </button>
+                <button onClick={closeModal} disabled={isLoading}>
+                  No
+                </button>
+              </div>
+              {isLoading && <Spinner />}
+            </div>
+          )}
+        </Modal>
+        {isLoading && <Spinner />}
+      </div>
+    </div>
+  );
+}

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 lectureDate = getDateFromStringOrThrow(
-  const lectureDayOnly = getDateOnlyMarkdownString(lectureDate)
+    decodedLectureDay,
+    "lecture day in lecture page"
+  );
+  const lectureDayOnly = getDateOnlyMarkdownString(lectureDate);
   return <EditLecture lectureDay={lectureDayOnly} />;
 }

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({
             )}
           >
             <>
-              <Modal buttonText="New Item">
+              <Modal modalControl={modal} buttonText="New Item">
                 {({ closeModal }) => (
                   <div>
                     <NewItemForm

nextjs/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/AssignmentButtons.tsx

@@ -1,5 +1,5 @@
 import { useCourseContext } from "@/app/course/[courseName]/context/courseContext";
-import Modal from "@/components/Modal";
+import Modal, { useModal } from "@/components/Modal";
 import { Spinner } from "@/components/Spinner";
 import {
   useCanvasAssignmentsQuery,
@@ -45,6 +45,7 @@ export function AssignmentButtons({
   const updateAssignment = useUpdateAssignmentInCanvasMutation();
   const deleteLocal = useDeleteAssignmentMutation();
   const [isLoading, setIsLoading] = useState(false);
+  const modal = useModal();
 
   const assignmentInCanvas = canvasAssignments.find(
     (a) => a.name === assignmentName
@@ -116,6 +117,7 @@ export function AssignmentButtons({
         )}
         {!assignmentInCanvas && (
           <Modal
+            modalControl={modal}
             buttonText="Delete Localy"
             buttonClass="btn-danger"
             modalWidth="w-1/5"

nextjs/src/app/course/[courseName]/modules/[moduleName]/page/[pageName]/EditPageButtons.tsx

@@ -1,5 +1,5 @@
 import { useCourseContext } from "@/app/course/[courseName]/context/courseContext";
-import Modal from "@/components/Modal";
+import Modal, { useModal } from "@/components/Modal";
 import { Spinner } from "@/components/Spinner";
 import {
   useCanvasPagesQuery,
@@ -14,7 +14,6 @@ import {
 } from "@/hooks/localCourse/pageHooks";
 import { baseCanvasUrl } from "@/services/canvas/canvasServiceUtils";
 import { getCourseUrl } from "@/services/urlUtils";
-import { revalidatePath } from "next/cache";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import React from "react";
@@ -35,6 +34,7 @@ export default function EditPageButtons({
   const updatePageInCanvas = useUpdateCanvasPageMutation();
   const deletePageInCanvas = useDeleteCanvasPageMutation();
   const deletePageLocal = useDeletePageMutation();
+  const modal = useModal();
 
   const pageInCanvas = canvasPages?.find((p) => p.title === pageName);
 
@@ -88,6 +88,7 @@ export default function EditPageButtons({
 
       {!pageInCanvas && (
         <Modal
+          modalControl={modal}
           buttonText="Delete Localy"
           buttonClass="btn-danger"
           modalWidth="w-1/5"

nextjs/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/QuizButton.tsx

@@ -1,5 +1,5 @@
 import { useCourseContext } from "@/app/course/[courseName]/context/courseContext";
-import Modal from "@/components/Modal";
+import Modal, { useModal } from "@/components/Modal";
 import { Spinner } from "@/components/Spinner";
 import {
   useCanvasQuizzesQuery,
@@ -33,6 +33,7 @@ export function QuizButtons({
   const addToCanvas = useAddQuizToCanvasMutation();
   const deleteFromCanvas = useDeleteQuizFromCanvasMutation();
   const deleteLocal = useDeleteQuizMutation();
+  const modal = useModal();
 
   const quizInCanvas = canvasQuizzes.find((c) => c.title === quizName);
 
@@ -74,6 +75,7 @@ export function QuizButtons({
         )}
         {!quizInCanvas && (
           <Modal
+            modalControl={modal}
             buttonText="Delete Localy"
             buttonClass="btn-danger"
             modalWidth="w-1/5"

nextjs/src/components/Modal.tsx

@@ -1,25 +1,41 @@
 "use client";
 import React, { ReactNode, useState } from "react";
 
+export interface ModalControl {
+  isOpen: boolean;
+  openModal: () => 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 (
     <>
-      <button onClick={openModal} className={buttonClass}>
+      <button onClick={modalControl.openModal} className={buttonClass}>
         {buttonText}
       </button>
 
@@ -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}
       >
         <div
           onClick={(e) => {
@@ -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 })}
         </div>
       </div>
     </>