isdragging in different context for styling

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

@@ -1,6 +1,5 @@
 "use client";
 import {
-  getDateFromString,
   getDateFromStringOrThrow,
   getDateOnlyMarkdownString,
 } from "@/models/local/timeUtils";
@@ -10,7 +9,6 @@ import Link from "next/link";
 import { useLocalCourseSettingsQuery } from "@/hooks/localCourse/localCoursesHooks";
 import { getDayOfWeek } from "@/models/local/localCourse";
 import { getLectureUrl } from "@/services/urlUtils";
-import DropTargetStyling from "../../../../../components/DropTargetStyling";
 import { ItemInDay } from "./ItemInDay";
 import { useTodaysItems } from "./useTodaysItems";
 import Modal from "@/components/Modal";
@@ -41,7 +39,7 @@ export default function Day({ day, month }: { day: string; month: number }) {
     "comparing end date in day"
   );
 
-  const isInSemester = semesterStart < dayAsDate&& semesterEnd > dayAsDate;
+  const isInSemester = semesterStart < dayAsDate && semesterEnd > dayAsDate;
 
   const meetingClasses =
     classOnThisDay && isInSemester ? " bg-slate-900 " : " ";
@@ -57,7 +55,7 @@ export default function Day({ day, month }: { day: string; month: number }) {
       onDrop={(e) => itemDropOnDay(e, day)}
       onDragOver={(e) => e.preventDefault()}
     >
-      <DropTargetStyling draggingClassName="bg-slate-900 shadow-[0_0px_10px_0px] shadow-blue-800/50 ">
+      <div className="draggingDay">
         <DayTitle day={day} dayAsDate={dayAsDate} />
         <div>
           {todaysAssignments.map(
@@ -93,7 +91,7 @@ export default function Day({ day, month }: { day: string; month: number }) {
             />
           ))}
         </div>
-      </DropTargetStyling>
+      </div>
     </div>
   );
 }

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

@@ -9,6 +9,7 @@ import {
 } from "../../context/draggingContext";
 import { createPortal } from "react-dom";
 import ClientOnly from "@/components/ClientOnly";
+import { useDragStyleContext } from "../../context/dragStyleContext";
 
 export function ItemInDay({
   type,
@@ -24,7 +25,7 @@ export function ItemInDay({
   message: ReactNode;
 }) {
   const { courseName } = useCourseContext();
-  const { dragStart } = useDraggingContext();
+  const { setIsDragging } = useDragStyleContext();
   const linkRef = useRef<HTMLAnchorElement>(null);
   const [tooltipVisible, setTooltipVisible] = useState(false);
   return (
@@ -52,7 +53,8 @@ export function ItemInDay({
             "draggableItem",
             JSON.stringify(draggableItem)
           );
-          dragStart();
+          setIsDragging(true)
+          
         }}
         onMouseEnter={() => setTooltipVisible(true)}
         onMouseLeave={() => setTooltipVisible(false)}

nextjs/src/app/course/[courseName]/context/DraggingContextProvider.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { ReactNode, useCallback, DragEvent, useState, useEffect } from "react";
+import { ReactNode, useCallback, DragEvent, useEffect } from "react";
 import { DraggableItem, DraggingContext } from "./draggingContext";
 import { useUpdateQuizMutation } from "@/hooks/localCourse/quizHooks";
 import { useLocalCourseSettingsQuery } from "@/hooks/localCourse/localCoursesHooks";
@@ -12,17 +12,18 @@ import { LocalAssignment } from "@/models/local/assignment/localAssignment";
 import { useUpdateAssignmentMutation } from "@/hooks/localCourse/assignmentHooks";
 import { useUpdatePageMutation } from "@/hooks/localCourse/pageHooks";
 import { LocalCoursePage } from "@/models/local/page/localCoursePage";
+import { useDragStyleContext } from "./dragStyleContext";
 
 export default function DraggingContextProvider({
   children,
 }: {
   children: ReactNode;
 }) {
+  const { setIsDragging } = useDragStyleContext();
   const updateQuizMutation = useUpdateQuizMutation();
   const updateAssignmentMutation = useUpdateAssignmentMutation();
   const updatePageMutation = useUpdatePageMutation();
   const { data: settings } = useLocalCourseSettingsQuery();
-  const [isDragging, setIsDragging] = useState(false);
 
   useEffect(() => {
     const handleDrop = () => {
@@ -38,9 +39,7 @@ export default function DraggingContextProvider({
       window.removeEventListener("drop", handleDrop);
       window.addEventListener("dragover", preventDefault);
     };
-  }, []);
+  }, [setIsDragging]);
-
-  const dragStart = useCallback(() => setIsDragging(true), []);
 
   const itemDropOnModule = useCallback(
     (e: DragEvent<HTMLDivElement>, dropModuleName: string) => {
@@ -92,7 +91,12 @@ export default function DraggingContextProvider({
         });
       }
     },
-    [updateAssignmentMutation, updatePageMutation, updateQuizMutation]
+    [
+      setIsDragging,
+      updateAssignmentMutation,
+      updatePageMutation,
+      updateQuizMutation,
+    ]
   );
 
   const itemDropOnDay = useCallback(
@@ -174,6 +178,7 @@ export default function DraggingContextProvider({
       }
     },
     [
+      setIsDragging,
       settings.defaultDueTime.hour,
       settings.defaultDueTime.minute,
       updateAssignmentMutation,
@@ -181,14 +186,13 @@ export default function DraggingContextProvider({
       updateQuizMutation,
     ]
   );
+  console.log("rerender");
 
   return (
     <DraggingContext.Provider
       value={{
         itemDropOnDay,
         itemDropOnModule,
-        isDragging,
-        dragStart,
       }}
     >
       {children}

nextjs/src/app/course/[courseName]/context/dragStyleContext.tsx

@@ -0,0 +1,39 @@
+"use client";
+import {
+  createContext,
+  useContext,
+  ReactNode,
+  useState,
+  SetStateAction,
+  Dispatch,
+} from "react";
+
+export interface DraggingStyleContextInterface {
+  setIsDragging: Dispatch<SetStateAction<boolean>>;
+}
+const defaultDraggingValue: DraggingStyleContextInterface = {
+  setIsDragging: () => {},
+};
+export const DragStyleContext =
+  createContext<DraggingStyleContextInterface>(defaultDraggingValue);
+
+export function useDragStyleContext() {
+  return useContext(DragStyleContext);
+}
+
+export function DragStyleContextProvider({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  const [isDragging, setIsDragging] = useState(false);
+  return (
+    <DragStyleContext.Provider value={{ setIsDragging }}>
+      <div
+        className={"min-h-0 flex flex-col " + (isDragging ? " dragging " : "")}
+      >
+        {children}
+      </div>
+    </DragStyleContext.Provider>
+  );
+}

nextjs/src/app/course/[courseName]/context/draggingContext.tsx

@@ -11,14 +11,10 @@ export interface DraggableItem {
 export interface DraggingContextInterface {
   itemDropOnDay: (e: DragEvent<HTMLDivElement>, droppedOnDay: string) => void;
   itemDropOnModule: (e: DragEvent<HTMLDivElement>, moduleName: string) => void;
-  isDragging: boolean;
-  dragStart: () => void;
 }
 const defaultDraggingValue: DraggingContextInterface = {
   itemDropOnDay: () => {},
   itemDropOnModule: () => {},
-  isDragging: false,
-  dragStart: () => {},
 };
 export const DraggingContext =
   createContext<DraggingContextInterface>(defaultDraggingValue);

nextjs/src/app/course/[courseName]/modules/ExpandableModule.tsx

@@ -15,11 +15,11 @@ import { ModuleCanvasStatus } from "./ModuleCanvasStatus";
 import ClientOnly from "@/components/ClientOnly";
 import ExpandIcon from "../../../../components/icons/ExpandIcon";
 import { DraggableItem, useDraggingContext } from "../context/draggingContext";
-import DropTargetStyling from "../../../../components/DropTargetStyling";
 import Link from "next/link";
 import { getModuleItemUrl } from "@/services/urlUtils";
 import { useCourseContext } from "../context/courseContext";
 import { Expandable } from "../../../../components/Expandable";
+import { useDragStyleContext } from "../context/dragStyleContext";
 
 export default function ExpandableModule({
   moduleName,
@@ -67,7 +67,7 @@ export default function ExpandableModule({
       onDrop={(e) => itemDropOnModule(e, moduleName)}
       onDragOver={(e) => e.preventDefault()}
     >
-      <DropTargetStyling draggingClassName="shadow-[0_0px_10px_0px] shadow-blue-500/50 ">
+      <div className="draggingModule ">
         <div className=" p-3 ">
           <Expandable
             ExpandableElement={({ setIsExpanded, isExpanded }) => (
@@ -116,7 +116,7 @@ export default function ExpandableModule({
             </>
           </Expandable>
         </div>
-      </DropTargetStyling>
+      </div>
     </div>
   );
 }
@@ -132,7 +132,7 @@ function ExpandableModuleItem({
 }) {
   const { courseName } = useCourseContext();
   const date = getDateFromString(item.dueAt);
-  const { dragStart } = useDraggingContext();
+  const { setIsDragging } = useDragStyleContext();
 
   return (
     <Fragment key={item.name + type}>
@@ -153,7 +153,7 @@ function ExpandableModuleItem({
             "draggableItem",
             JSON.stringify(draggableItem)
           );
-          dragStart();
+          setIsDragging(true);
         }}
       >
         {item.name}

nextjs/src/app/course/[courseName]/page.tsx

@@ -2,27 +2,29 @@ import CourseCalendar from "./calendar/CourseCalendar";
 import CourseSettingsLink from "./CourseSettingsLink";
 import ModuleList from "./modules/ModuleList";
 import DraggingContextProvider from "./context/DraggingContextProvider";
-import Link from "next/link";
 import CourseTitle from "./CourseTitle";
 import { CourseNavigation } from "./CourseNavigation";
+import { DragStyleContextProvider } from "./context/dragStyleContext";
 
 export default async function CoursePage({}: {}) {
   return (
     <>
       <CourseTitle />
       <div className="h-full flex flex-col">
-        <div className="flex flex-row min-h-0">
+        <DragStyleContextProvider>
           <DraggingContextProvider>
-            <div className="flex-1 min-h-0 flex flex-col">
+            <div className="flex flex-row min-h-0">
-              <CourseNavigation />
+              <div className="flex-1 min-h-0 flex flex-col">
-              <CourseCalendar />
+                <CourseNavigation />
-            </div>
+                <CourseCalendar />
-            <div className="w-96 p-3 h-full overflow-y-auto">
+              </div>
-              <CourseSettingsLink />
+              <div className="w-96 p-3 h-full overflow-y-auto">
-              <ModuleList />
+                <CourseSettingsLink />
+                <ModuleList />
+              </div>
             </div>
           </DraggingContextProvider>
-        </div>
+        </DragStyleContextProvider>
       </div>
     </>
   );

nextjs/src/app/globals.css

@@ -137,3 +137,19 @@ select {
 .markdownPreview a {
   @apply text-blue-500 hover:text-blue-600 font-bold underline;
 }
+
+.draggingDay {
+  @apply h-full transition-all duration-500;
+}
+
+.dragging .draggingDay {
+  @apply bg-slate-900 shadow-[0_0px_10px_0px] shadow-blue-800/50;
+}
+
+.draggingModule {
+  @apply h-full transition-all duration-500;
+}
+
+.dragging .draggingModule {
+  @apply shadow-[0_0px_10px_0px] shadow-blue-500/50;
+}

nextjs/src/components/DropTargetStyling.tsx

@@ -1,22 +0,0 @@
-import React, { ReactNode } from "react";
-import { useDraggingContext } from "../app/course/[courseName]/context/draggingContext";
-
-export default function DropTargetStyling({
-  children,
-  draggingClassName,
-}: {
-  children: ReactNode;
-  draggingClassName: string;
-}) {
-  const { isDragging } = useDraggingContext();
-  return (
-    <div
-      className={
-        "h-full transition-all duration-500  " +
-        (isDragging ? draggingClassName : "")
-      }
-    >
-      {children}
-    </div>
-  );
-}