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

View File

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