working on context menu

nextjs/src/app/course/[courseName]/calendar/day/Day.tsx

@@ -12,6 +12,8 @@ import { getLectureUrl } from "@/services/urlUtils";
 import DropTargetStyling from "../../../../../components/DropTargetStyling";
 import { ItemInDay } from "./ItemInDay";
 import { useTodaysItems } from "./useTodaysItems";
+import { useState } from "react";
+import { DayContextMenu } from "./DayContextMenu";
 
 export default function Day({ day, month }: { day: string; month: number }) {
   const dayAsDate = getDateFromStringOrThrow(
@@ -24,6 +26,9 @@ export default function Day({ day, month }: { day: string; month: number }) {
 
   const { data: settings } = useLocalCourseSettingsQuery();
   const { itemDropOnDay } = useDraggingContext();
+  const [contextCoordinates, setContextCoordinates] = useState<
+    { x: number; y: number } | undefined
+  >();
 
   const { todaysAssignments, todaysQuizzes, todaysPages } = useTodaysItems(day);
 
@@ -43,8 +48,17 @@ export default function Day({ day, month }: { day: string; month: number }) {
       className={" rounded-lg m-1 min-h-10 " + meetingClasses + monthClass}
       onDrop={(e) => itemDropOnDay(e, day)}
       onDragOver={(e) => e.preventDefault()}
+      onContextMenu={(e) => {
+        e.preventDefault();
+        setContextCoordinates({ x: e.pageX, y: e.pageY });
+      }}
     >
       <DropTargetStyling draggingClassName="bg-slate-900 shadow-[0_0px_10px_0px] shadow-blue-800/50 ">
+        <DayContextMenu
+          day={day}
+          coordinates={contextCoordinates}
+          hideContextMenu={() => setContextCoordinates(undefined)}
+        />
         <DayTitle day={day} dayAsDate={dayAsDate} />
         <div>
           {todaysAssignments.map(

nextjs/src/app/course/[courseName]/calendar/day/DayContextMenu.tsx

@@ -0,0 +1,70 @@
+import Modal from "@/components/Modal";
+import React, { FC, useEffect, useRef } from "react";
+import NewItemForm from "../../modules/NewItemForm";
+
+export const DayContextMenu: FC<{
+  coordinates?: { x: number; y: number };
+  hideContextMenu: () => void;
+  day: string;
+}> = ({ coordinates, hideContextMenu, day }) => {
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  // const handleContextMenu = (event: MouseEvent) => {
+  //   event.preventDefault();
+  //   setPosition({ x: event.pageX, y: event.pageY });
+  //   setVisible(true);
+  // };
+
+  const handleClick = (event: MouseEvent) => {
+    if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
+      hideContextMenu();
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener("click", handleClick);
+
+    return () => {
+      document.removeEventListener("click", handleClick);
+    };
+  }, []);
+  
+  return (
+    <div
+      className={
+        "absolute z-10 border bg-slate-900 border-slate-300 rounded shadow-lg w-48 " +
+        (!coordinates && "hidden")
+      }
+      style={{ top: coordinates?.y, left: coordinates?.x }}
+      onMouseDown={(e) => {
+        console.log(e.target);
+        e.stopPropagation();
+        hideContextMenu();
+      }}
+      ref={menuRef}
+    >
+      <Modal buttonText="Add Module Item">
+        {({ closeModal }) => (
+          <div>
+            <NewItemForm
+              creationDate={day}
+              onCreate={() => {
+                closeModal();
+                hideContextMenu();
+              }}
+            />
+            <br />
+            <button
+              onClick={() => {
+                closeModal();
+                hideContextMenu();
+              }}
+            >
+              close
+            </button>
+          </div>
+        )}
+      </Modal>
+    </div>
+  );
+};