optimistic updates

This commit is contained in:
2024-09-02 13:12:29 -06:00
parent c86bdf3451
commit 4f44349db3
2 changed files with 47 additions and 41 deletions

View File

@@ -3,6 +3,8 @@ import { ReactNode, useCallback, DragEvent } from "react";
import { DraggingContext } from "./draggingContext";
import { useUpdateQuizMutation } from "@/hooks/localCourse/quizHooks";
import { useLocalCourseSettingsQuery } from "@/hooks/localCourse/localCoursesHooks";
import { LocalQuiz } from "@/models/local/quiz/localQuiz";
import { getDateFromStringOrThrow, dateToMarkdownString } from "@/models/local/timeUtils";
export default function DraggingContextProvider({
children,
@@ -15,47 +17,47 @@ export default function DraggingContextProvider({
const itemDrop = useCallback(
(e: DragEvent<HTMLDivElement>, day: string | undefined) => {
// const itemBeingDragged = JSON.parse(
// e.dataTransfer.getData("draggableItem")
// );
const itemBeingDragged = JSON.parse(
e.dataTransfer.getData("draggableItem")
);
// if (itemBeingDragged && day) {
// const dayAsDate = getDateFromStringOrThrow(day, "in drop callback");
// dayAsDate.setHours(settings.defaultDueTime.hour);
// dayAsDate.setMinutes(settings.defaultDueTime.minute);
// dayAsDate.setSeconds(0);
if (itemBeingDragged && day) {
const dayAsDate = getDateFromStringOrThrow(day, "in drop callback");
dayAsDate.setHours(settings.defaultDueTime.hour);
dayAsDate.setMinutes(settings.defaultDueTime.minute);
dayAsDate.setSeconds(0);
// console.log("dropped on day", dayAsDate, day);
// if (itemBeingDragged.type === "quiz") {
// console.log("dropping quiz");
// const previousQuiz = itemBeingDragged.item as LocalQuiz;
console.log("dropped on day", dayAsDate, day);
if (itemBeingDragged.type === "quiz") {
console.log("dropping quiz");
const previousQuiz = itemBeingDragged.item as LocalQuiz;
// const quiz: LocalQuiz = {
// ...previousQuiz,
// dueAt: dateToMarkdownString(dayAsDate),
// lockAt:
// previousQuiz.lockAt &&
// (getDateFromStringOrThrow(previousQuiz.lockAt, "lockAt date") >
// dayAsDate
// ? previousQuiz.lockAt
// : dateToMarkdownString(dayAsDate)),
// };
// updateQuizMutation.mutate({
// quiz: quiz,
// quizName: quiz.name,
// moduleName: itemBeingDragged.sourceModuleName,
// });
// } else if (itemBeingDragged.type === "assignment") {
// console.log("dropped assignment");
// } else if (itemBeingDragged.type === "page") {
// console.log("dropped page");
// }
// }
const quiz: LocalQuiz = {
...previousQuiz,
dueAt: dateToMarkdownString(dayAsDate),
lockAt:
previousQuiz.lockAt &&
(getDateFromStringOrThrow(previousQuiz.lockAt, "lockAt date") >
dayAsDate
? previousQuiz.lockAt
: dateToMarkdownString(dayAsDate)),
};
updateQuizMutation.mutate({
quiz: quiz,
quizName: quiz.name,
moduleName: itemBeingDragged.sourceModuleName,
});
} else if (itemBeingDragged.type === "assignment") {
console.log("dropped assignment");
} else if (itemBeingDragged.type === "page") {
console.log("dropped page");
}
}
},
[
// settings.defaultDueTime.hour,
// settings.defaultDueTime.minute,
// updateQuizMutation,
settings.defaultDueTime.hour,
settings.defaultDueTime.minute,
updateQuizMutation,
]
);

View File

@@ -1,4 +1,4 @@
"use client"
"use client";
import { LocalQuiz } from "@/models/local/quiz/localQuiz";
import {
useMutation,
@@ -68,7 +68,7 @@ function getQuizQueryConfig(
export const useUpdateQuizMutation = () => {
const { courseName } = useCourseContext();
// const queryClient = useQueryClient();
const queryClient = useQueryClient();
return useMutation({
mutationFn: async ({
quiz,
@@ -86,12 +86,16 @@ export const useUpdateQuizMutation = () => {
encodeURIComponent(moduleName) +
"/quizzes/" +
encodeURIComponent(quizName);
queryClient.setQueryData(
localCourseKeys.quiz(courseName, moduleName, quizName),
quiz
);
await axios.put(url, quiz);
},
onSuccess: (_, { moduleName, quizName }) => {
// queryClient.invalidateQueries({
// queryKey: localCourseKeys.quiz(courseName, moduleName, quizName),
// });
queryClient.invalidateQueries({
queryKey: localCourseKeys.quiz(courseName, moduleName, quizName),
});
// queryClient.invalidateQueries({
// queryKey: localCourseKeys.quizNames(courseName, moduleName),
// });