adding in delay to handle network latency

This commit is contained in:
2024-11-19 09:17:16 -07:00
parent d02d6d8b7b
commit 594573879e
3 changed files with 20 additions and 11 deletions

View File

@@ -20,7 +20,7 @@ import { useAuthoritativeUpdates } from "../../utils/useAuthoritativeUpdates";
export default function EditLecture({ lectureDay }: { lectureDay: string }) { export default function EditLecture({ lectureDay }: { lectureDay: string }) {
const { courseName } = useCourseContext(); const { courseName } = useCourseContext();
const [settings] = useLocalCourseSettingsQuery(); const [settings] = useLocalCourseSettingsQuery();
const [weeks, { dataUpdatedAt: serverDataUpdatedAt }] = const [weeks, { dataUpdatedAt: serverDataUpdatedAt, isFetching }] =
useLecturesSuspenseQuery(); useLecturesSuspenseQuery();
const updateLecture = useLectureUpdateMutation(); const updateLecture = useLectureUpdateMutation();
@@ -40,6 +40,10 @@ export default function EditLecture({ lectureDay }: { lectureDay: string }) {
const handler = setTimeout(() => { const handler = setTimeout(() => {
try { try {
if (isFetching || updateLecture.isPending) {
console.log("network requests in progress, not updating page");
return;
}
const parsed = parseLecture(text); const parsed = parseLecture(text);
if (!lecture || lectureToString(parsed) !== lectureToString(lecture)) { if (!lecture || lectureToString(parsed) !== lectureToString(lecture)) {
if (clientIsAuthoritative) { if (clientIsAuthoritative) {
@@ -70,6 +74,7 @@ export default function EditLecture({ lectureDay }: { lectureDay: string }) {
}, [ }, [
clientIsAuthoritative, clientIsAuthoritative,
courseName, courseName,
isFetching,
lecture, lecture,
settings, settings,
text, text,

View File

@@ -30,12 +30,12 @@ export function AssignmentButtons({
const router = useRouter(); const router = useRouter();
const { courseName } = useCourseContext(); const { courseName } = useCourseContext();
const [settings] = useLocalCourseSettingsQuery(); const [settings] = useLocalCourseSettingsQuery();
const { const { data: canvasAssignments, isFetching: canvasIsFetching } =
data: canvasAssignments, useCanvasAssignmentsQuery();
isPending: canvasIsPending, const [assignment, { isFetching }] = useAssignmentQuery(
isRefetching: canvasIsRefetching, moduleName,
} = useCanvasAssignmentsQuery(); assignmentName
const [assignment] = useAssignmentQuery(moduleName, assignmentName); );
const addToCanvas = useAddAssignmentToCanvasMutation(); const addToCanvas = useAddAssignmentToCanvasMutation();
const deleteFromCanvas = useDeleteAssignmentFromCanvasMutation(); const deleteFromCanvas = useDeleteAssignmentFromCanvasMutation();
const updateAssignment = useUpdateAssignmentInCanvasMutation(); const updateAssignment = useUpdateAssignmentInCanvasMutation();
@@ -49,11 +49,13 @@ export function AssignmentButtons({
const anythingIsLoading = const anythingIsLoading =
addToCanvas.isPending || addToCanvas.isPending ||
canvasIsPending || canvasIsFetching ||
canvasIsRefetching || isFetching ||
deleteFromCanvas.isPending || deleteFromCanvas.isPending ||
updateAssignment.isPending; updateAssignment.isPending;
console.log("assignment pending", updateAssignment.isPending);
return ( return (
<div className="p-5 flex flex-row justify-between gap-3"> <div className="p-5 flex flex-row justify-between gap-3">
<div> <div>

View File

@@ -13,8 +13,10 @@ export function useAuthoritativeUpdates({
useState(serverUpdatedAt); useState(serverUpdatedAt);
const [updateMonacoKey, setUpdateMonacoKey] = useState(1); const [updateMonacoKey, setUpdateMonacoKey] = useState(1);
const clientIsAuthoritative = useMemo(() => { const clientIsAuthoritative = useMemo(() => {
const authority = serverUpdatedAt <= clientDataUpdatedAt; // const authority = serverUpdatedAt <= clientDataUpdatedAt;
// const authority = serverUpdatedAt <= clientDataUpdatedAt + 500; // if it is close, it might be the second-to-last update changing the first (by file update delays), add some buffer... const estimatedNetworkRoundTrip = 500; // network latency means client is still authoritative for a slight delay
const authority =
serverUpdatedAt <= clientDataUpdatedAt + estimatedNetworkRoundTrip;
// console.log("client is authoritative", authority); // console.log("client is authoritative", authority);
return authority; return authority;
}, [clientDataUpdatedAt, serverUpdatedAt]); }, [clientDataUpdatedAt, serverUpdatedAt]);