pushing state down with contexts

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

@@ -1,12 +1,16 @@
 "use client";
-import { useCourseContext } from "../context/courseContext";
 import { useModuleNamesQuery } from "@/hooks/localCourse/localCoursesHooks";
 import DayItemsInModule from "./DayItemsInModule";
+import { getDateFromStringOrThrow } from "@/models/local/timeUtils";
+import { useDraggingContext } from "../context/DraggingContext";
 
-export default function Day({ day, month }: { day: Date; month: number }) {
-  const { courseName, itemDrop } = useCourseContext();
-  const { data: moduleNames } = useModuleNamesQuery(courseName);
-  const isInSameMonth = day.getMonth() + 1 != month;
+export default function Day({ day, month }: { day: string; month: number }) {
+  const { data: moduleNames } = useModuleNamesQuery();
+
+  const dayAsDate = getDateFromStringOrThrow(day, "calculating same month in day")
+  const isInSameMonth =
+  dayAsDate.getMonth() + 1 !=
+    month;
   const backgroundClass = isInSameMonth ? "" : "bg-slate-900";
 
   return (
@@ -15,16 +19,23 @@ export default function Day({ day, month }: { day: Date; month: number }) {
         "border border-slate-600 rounded-lg p-2 pb-4 m-1 " + backgroundClass
       }
     >
-      {day.getDate()}
+      {dayAsDate.getDate()}
       {moduleNames.map((moduleName) => (
-        <div
+        <ModuleInDay
           key={"" + day + month + moduleName}
-          onDrop={() => itemDrop(day)}
-          onDragOver={(e) => e.preventDefault()}
-        >
-          <DayItemsInModule day={day} moduleName={moduleName} />
-        </div>
+          moduleName={moduleName}
+          day={day}
+        />
       ))}
     </div>
   );
 }
+
+function ModuleInDay({ moduleName, day }: { moduleName: string; day: string }) {
+  const { itemDrop } = useDraggingContext();
+  return (
+    <div onDrop={() => itemDrop(day)} onDragOver={(e) => e.preventDefault()}>
+      <DayItemsInModule day={day} moduleName={moduleName} />
+    </div>
+  );
+}