dragging styling

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

@@ -28,7 +28,7 @@ export default function CourseCalendar() {
         min-h-0
         border-4
         border-gray-900
-        rounded-xl 
+        rounded-lg
         bg-slate-950
         p-1
       "

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

@@ -17,6 +17,7 @@ import { LocalCoursePage } from "@/models/local/page/localCoursePage";
 import { useCanvasAssignmentsQuery } from "@/hooks/canvas/canvasAssignmentHooks";
 import { useCanvasQuizzesQuery } from "@/hooks/canvas/canvasQuizHooks";
 import { useCanvasPagesQuery } from "@/hooks/canvas/canvasPageHooks";
+import DropTargetStyling from "./DropTargetStyling";
 
 export default function Day({ day, month }: { day: string; month: number }) {
   const dayAsDate = getDateFromStringOrThrow(
@@ -45,40 +46,42 @@ export default function Day({ day, month }: { day: string; month: number }) {
 
   return (
     <div
-      className={" rounded-lg pb-4 m-1 " + meetingClasses + monthClass}
+      className={" rounded-lg m-1 min-h-10 " + meetingClasses + monthClass}
       onDrop={(e) => itemDrop(e, day)}
       onDragOver={(e) => e.preventDefault()}
     >
-      <DayTitle day={day} dayAsDate={dayAsDate} />
-      <div>
-        {todaysAssignments.map(({ assignment, moduleName, status }) => (
-          <DraggableListItem
-            key={assignment.name}
-            type={"assignment"}
-            moduleName={moduleName}
-            item={assignment}
-            status={status}
-          />
-        ))}
-        {todaysQuizzes.map(({ quiz, moduleName, status }) => (
-          <DraggableListItem
-            key={quiz.name}
-            type={"quiz"}
-            moduleName={moduleName}
-            item={quiz}
-            status={status}
-          />
-        ))}
-        {todaysPages.map(({ page, moduleName, status }) => (
-          <DraggableListItem
-            key={page.name}
-            type={"page"}
-            moduleName={moduleName}
-            item={page}
-            status={status}
-          />
-        ))}
-      </div>
+      <DropTargetStyling draggingClassName="bg-slate-800 shadow-2xl ">
+        <DayTitle day={day} dayAsDate={dayAsDate} />
+        <div>
+          {todaysAssignments.map(({ assignment, moduleName, status }) => (
+            <DraggableListItem
+              key={assignment.name}
+              type={"assignment"}
+              moduleName={moduleName}
+              item={assignment}
+              status={status}
+            />
+          ))}
+          {todaysQuizzes.map(({ quiz, moduleName, status }) => (
+            <DraggableListItem
+              key={quiz.name}
+              type={"quiz"}
+              moduleName={moduleName}
+              item={quiz}
+              status={status}
+            />
+          ))}
+          {todaysPages.map(({ page, moduleName, status }) => (
+            <DraggableListItem
+              key={page.name}
+              type={"page"}
+              moduleName={moduleName}
+              item={page}
+              status={status}
+            />
+          ))}
+        </div>
+      </DropTargetStyling>
     </div>
   );
 }
@@ -183,6 +186,7 @@ function DraggableListItem({
   item: IModuleItem;
 }) {
   const { courseName } = useCourseContext();
+  const { dragStart } = useDraggingContext();
   return (
     <Link
       href={getModuleItemUrl(courseName, moduleName, type, item.name)}
@@ -206,6 +210,7 @@ function DraggableListItem({
             sourceModuleName: moduleName,
           })
         );
+        dragStart();
       }}
     >
       {item.name}

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

@@ -0,0 +1,22 @@
+import React, { ReactNode } from "react";
+import { useDraggingContext } from "../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>
+  );
+}

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

@@ -1,5 +1,5 @@
 "use client";
-import { ReactNode, useCallback, DragEvent } from "react";
+import { ReactNode, useCallback, DragEvent, useState } from "react";
 import { DraggingContext } from "./draggingContext";
 import { useUpdateQuizMutation } from "@/hooks/localCourse/quizHooks";
 import { useLocalCourseSettingsQuery } from "@/hooks/localCourse/localCoursesHooks";
@@ -22,11 +22,13 @@ export default function DraggingContextProvider({
   const updateAssignmentMutation = useUpdateAssignmentMutation();
   const updatePageMutation = useUpdatePageMutation();
   const { data: settings } = useLocalCourseSettingsQuery();
+  const [isDragging, setIsDragging] = useState(false);
+
+  const dragStart = useCallback(() => setIsDragging(true), []);
 
   const itemDrop = useCallback(
     (e: DragEvent<HTMLDivElement>, day: string | undefined) => {
       const rawData = e.dataTransfer.getData("draggableItem");
-      // console.log(rawData);
       const itemBeingDragged = JSON.parse(rawData);
 
       if (itemBeingDragged && day) {
@@ -66,6 +68,7 @@ export default function DraggingContextProvider({
           });
         }
       }
+      setIsDragging(false);
 
       function updateAssignment(dayAsDate: Date) {
         const previousAssignment = itemBeingDragged.item as LocalAssignment;
@@ -101,6 +104,8 @@ export default function DraggingContextProvider({
     <DraggingContext.Provider
       value={{
         itemDrop,
+        isDragging,
+        dragStart,
       }}
     >
       {children}

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

@@ -9,12 +9,17 @@ export interface DraggableItem {
 }
 
 export interface DraggingContextInterface {
-  itemDrop: (e:  DragEvent<HTMLDivElement>,droppedOnDay?: string) => void;
+  itemDrop: (e: DragEvent<HTMLDivElement>, droppedOnDay?: string) => void;
+  isDragging: boolean;
+  dragStart: () => void;
 }
 const defaultDraggingValue: DraggingContextInterface = {
-  itemDrop: () => { },
+  itemDrop: () => {},
+  isDragging: false,
+  dragStart: () => {},
 };
-export const DraggingContext = createContext<DraggingContextInterface>(defaultDraggingValue);
+export const DraggingContext =
+  createContext<DraggingContextInterface>(defaultDraggingValue);
 
 export function useDraggingContext() {
   return useContext(DraggingContext);