alex/canvasManagement
1
0
Fork 0
mirror of https://github.com/alexmickelson/canvasManagement.git synced 2026-03-27 07:58:31 -06:00
Code Issues Packages Projects Releases Wiki Activity

faster renders for drag and drop

Browse Source
This commit is contained in:
Alex Mickelson
2024-08-30 13:21:10 -06:00
parent 09b387c328
commit 778a8fa3f5
3 changed files with 25 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,6 +8,7 @@ export default function Day({ day, month }: { day: Date; month: number }) {
const { data: moduleNames } = useModuleNamesQuery(courseName); const { data: moduleNames } = useModuleNamesQuery(courseName);
const isInSameMonth = day.getMonth() + 1 != month; const isInSameMonth = day.getMonth() + 1 != month;
const backgroundClass = isInSameMonth ? "" : "bg-slate-900"; const backgroundClass = isInSameMonth ? "" : "bg-slate-900";
console.log("render");
return ( return (
<> <>

61
nextjs/src/app/course/[courseName]/context/CourseContextProvider.tsx
View File

@@ -1,5 +1,5 @@
"use client"; "use client";
import { ReactNode, useState } from "react"; import { ReactNode, useCallback, useState } from "react";
import { CourseContext, DraggableItem } from "./courseContext"; import { CourseContext, DraggableItem } from "./courseContext";
import { LocalQuiz } from "@/models/local/quiz/localQuiz"; import { LocalQuiz } from "@/models/local/quiz/localQuiz";
import { dateToMarkdownString } from "@/models/local/timeUtils"; import { dateToMarkdownString } from "@/models/local/timeUtils";
@@ -17,49 +17,8 @@ export default function CourseContextProvider({
DraggableItem | undefined DraggableItem | undefined
>(); >();
const updateQuiz = (day: Date) => { const itemDrop = useCallback(
if (!itemBeingDragged) return; (day: Date | undefined) => {
const updatedQuiz: LocalQuiz = {
...(itemBeingDragged.item as LocalQuiz),
dueAt: dateToMarkdownString(day),
};
// const localModule = course.modules.find((m) =>
// m.quizzes.map((q) => q.name).includes(updatedQuiz.name)
// );
// if (!localModule)
// console.log("could not find module for quiz ", updatedQuiz);
// const updatedCourse: LocalCourse = {
// ...course,
// modules: course.modules.map((m) =>
// m.name !== localModule?.name
// ? m
// : {
// ...m,
// quizzes: m.quizzes.map((q) =>
// q.name === updatedQuiz.name ? updatedQuiz : q
// ),
// }
// ),
// };
// updateCourseMutation.mutate({
// updatedCourse,
// previousCourse: course,
// });
};
return (
<CourseContext.Provider
value={{
courseName: localCourseName,
startItemDrag: (d) => {
setItemBeingDragged(d);
},
endItemDrag: () => {
setItemBeingDragged(undefined);
},
itemDrop: (day) => {
if (itemBeingDragged && day) { if (itemBeingDragged && day) {
if (itemBeingDragged.type === "quiz") { if (itemBeingDragged.type === "quiz") {
const quiz: LocalQuiz = { const quiz: LocalQuiz = {
@@ -75,6 +34,20 @@ export default function CourseContextProvider({
} }
setItemBeingDragged(undefined); setItemBeingDragged(undefined);
}, },
[itemBeingDragged, updateQuizMutation]
);
return (
<CourseContext.Provider
value={{
courseName: localCourseName,
startItemDrag: (d) => {
setItemBeingDragged(d);
},
endItemDrag: () => {
setItemBeingDragged(undefined);
},
itemDrop,
}} }}
> >
{children} {children}

9
nextjs/src/app/layout.tsx
View File

@@ -1,8 +1,5 @@
import type { Metadata } from "next"; import type { Metadata } from "next";
import "./globals.css"; import "./globals.css";
import { dehydrate } from "@tanstack/react-query";
import { hydrateCourses } from "@/hooks/hookHydration";
import { createQueryClientForServer } from "@/services/utils/queryClientServer";
import Providers from "./providers"; import Providers from "./providers";
export const metadata: Metadata = { export const metadata: Metadata = {
@@ -16,9 +13,9 @@ export default function RootLayout({
}>) { }>) {
return ( return (
<html lang="en"> <html lang="en">
<Providers> <body className="bg-slate-900 h-screen p-1 text-slate-300">
<body className="bg-slate-900 h-screen p-1 text-slate-300">{children}</body> <Providers>{children}</Providers>
</Providers> </body>
</html> </html>
); );
} }