alex/canvasManagement
1
0
Fork 0
mirror of https://github.com/alexmickelson/canvasManagement.git synced 2026-03-25 23:28:33 -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 isInSameMonth = day.getMonth() + 1 != month;
const backgroundClass = isInSameMonth ? "" : "bg-slate-900";
console.log("render");
return (
<>

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

@@ -1,5 +1,5 @@
"use client";
import { ReactNode, useState } from "react";
import { ReactNode, useCallback, useState } from "react";
import { CourseContext, DraggableItem } from "./courseContext";
import { LocalQuiz } from "@/models/local/quiz/localQuiz";
import { dateToMarkdownString } from "@/models/local/timeUtils";
@@ -17,38 +17,26 @@ export default function CourseContextProvider({
DraggableItem | undefined
>();
const updateQuiz = (day: Date) => {
if (!itemBeingDragged) return;
const itemDrop = useCallback(
(day: Date | undefined) => {
if (itemBeingDragged && day) {
if (itemBeingDragged.type === "quiz") {
const quiz: LocalQuiz = {
...(itemBeingDragged.item as LocalQuiz),
dueAt: dateToMarkdownString(day),
};
updateQuizMutation.mutate({
quiz: quiz,
quizName: quiz.name,
moduleName: itemBeingDragged.sourceModuleName,
});
}
}
setItemBeingDragged(undefined);
},
[itemBeingDragged, updateQuizMutation]
);
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={{
@@ -59,22 +47,7 @@ export default function CourseContextProvider({
endItemDrag: () => {
setItemBeingDragged(undefined);
},
itemDrop: (day) => {
if (itemBeingDragged && day) {
if (itemBeingDragged.type === "quiz") {
const quiz: LocalQuiz = {
...(itemBeingDragged.item as LocalQuiz),
dueAt: dateToMarkdownString(day),
};
updateQuizMutation.mutate({
quiz: quiz,
quizName: quiz.name,
moduleName: itemBeingDragged.sourceModuleName,
});
}
}
setItemBeingDragged(undefined);
},
itemDrop,
}}
>
{children}

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

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