From f0e8f86201f1c520a476362b40d95f9e94f86f64 Mon Sep 17 00:00:00 2001 From: Alex Mickelson Date: Fri, 27 Sep 2024 13:19:38 -0600 Subject: [PATCH] isdragging in different context for styling --- .../course/[courseName]/calendar/day/Day.tsx | 8 ++-- .../[courseName]/calendar/day/ItemInDay.tsx | 6 ++- .../context/DraggingContextProvider.tsx | 20 ++++++---- .../[courseName]/context/dragStyleContext.tsx | 39 +++++++++++++++++++ .../[courseName]/context/draggingContext.tsx | 4 -- .../[courseName]/modules/ExpandableModule.tsx | 10 ++--- nextjs/src/app/course/[courseName]/page.tsx | 22 ++++++----- nextjs/src/app/globals.css | 16 ++++++++ nextjs/src/components/DropTargetStyling.tsx | 22 ----------- 9 files changed, 91 insertions(+), 56 deletions(-) create mode 100644 nextjs/src/app/course/[courseName]/context/dragStyleContext.tsx delete mode 100644 nextjs/src/components/DropTargetStyling.tsx diff --git a/nextjs/src/app/course/[courseName]/calendar/day/Day.tsx b/nextjs/src/app/course/[courseName]/calendar/day/Day.tsx index f64f403..a48eca5 100644 --- a/nextjs/src/app/course/[courseName]/calendar/day/Day.tsx +++ b/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()} > - +
{todaysAssignments.map( @@ -93,7 +91,7 @@ export default function Day({ day, month }: { day: string; month: number }) { /> ))}
- +
); } diff --git a/nextjs/src/app/course/[courseName]/calendar/day/ItemInDay.tsx b/nextjs/src/app/course/[courseName]/calendar/day/ItemInDay.tsx index 400f77a..720d6d7 100644 --- a/nextjs/src/app/course/[courseName]/calendar/day/ItemInDay.tsx +++ b/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(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)} diff --git a/nextjs/src/app/course/[courseName]/context/DraggingContextProvider.tsx b/nextjs/src/app/course/[courseName]/context/DraggingContextProvider.tsx index 8ea397f..331b87c 100644 --- a/nextjs/src/app/course/[courseName]/context/DraggingContextProvider.tsx +++ b/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); }; - }, []); - - const dragStart = useCallback(() => setIsDragging(true), []); + }, [setIsDragging]); const itemDropOnModule = useCallback( (e: DragEvent, 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 ( {children} diff --git a/nextjs/src/app/course/[courseName]/context/dragStyleContext.tsx b/nextjs/src/app/course/[courseName]/context/dragStyleContext.tsx new file mode 100644 index 0000000..3592e6a --- /dev/null +++ b/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>; +} +const defaultDraggingValue: DraggingStyleContextInterface = { + setIsDragging: () => {}, +}; +export const DragStyleContext = + createContext(defaultDraggingValue); + +export function useDragStyleContext() { + return useContext(DragStyleContext); +} + +export function DragStyleContextProvider({ + children, +}: { + children: ReactNode; +}) { + const [isDragging, setIsDragging] = useState(false); + return ( + +
+ {children} +
+ + ); +} diff --git a/nextjs/src/app/course/[courseName]/context/draggingContext.tsx b/nextjs/src/app/course/[courseName]/context/draggingContext.tsx index eb59619..4b208f3 100644 --- a/nextjs/src/app/course/[courseName]/context/draggingContext.tsx +++ b/nextjs/src/app/course/[courseName]/context/draggingContext.tsx @@ -11,14 +11,10 @@ export interface DraggableItem { export interface DraggingContextInterface { itemDropOnDay: (e: DragEvent, droppedOnDay: string) => void; itemDropOnModule: (e: DragEvent, moduleName: string) => void; - isDragging: boolean; - dragStart: () => void; } const defaultDraggingValue: DraggingContextInterface = { itemDropOnDay: () => {}, itemDropOnModule: () => {}, - isDragging: false, - dragStart: () => {}, }; export const DraggingContext = createContext(defaultDraggingValue); diff --git a/nextjs/src/app/course/[courseName]/modules/ExpandableModule.tsx b/nextjs/src/app/course/[courseName]/modules/ExpandableModule.tsx index de76761..ae26a3b 100644 --- a/nextjs/src/app/course/[courseName]/modules/ExpandableModule.tsx +++ b/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()} > - +
( @@ -116,7 +116,7 @@ export default function ExpandableModule({
- +
); } @@ -132,7 +132,7 @@ function ExpandableModuleItem({ }) { const { courseName } = useCourseContext(); const date = getDateFromString(item.dueAt); - const { dragStart } = useDraggingContext(); + const { setIsDragging } = useDragStyleContext(); return ( @@ -153,7 +153,7 @@ function ExpandableModuleItem({ "draggableItem", JSON.stringify(draggableItem) ); - dragStart(); + setIsDragging(true); }} > {item.name} diff --git a/nextjs/src/app/course/[courseName]/page.tsx b/nextjs/src/app/course/[courseName]/page.tsx index f9a3383..b21b865 100644 --- a/nextjs/src/app/course/[courseName]/page.tsx +++ b/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 ( <>
-
+ -
- - -
-
- - +
+
+ + +
+
+ + +
-
+
); diff --git a/nextjs/src/app/globals.css b/nextjs/src/app/globals.css index 3bf79cd..a411514 100644 --- a/nextjs/src/app/globals.css +++ b/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; +} diff --git a/nextjs/src/components/DropTargetStyling.tsx b/nextjs/src/components/DropTargetStyling.tsx deleted file mode 100644 index 662d342..0000000 --- a/nextjs/src/components/DropTargetStyling.tsx +++ /dev/null @@ -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 ( -
- {children} -
- ); -}