Retro Bulletin Board Systems on atproto. Web app and TUI.
lazy mirror of alyraffauf/atbbs
atbbs.xyz
forums
python
tui
atproto
bbs
web/Threads: use onMutate for deletes
+48
-31
+48
-31
web/src/pages/Thread.tsx
+48
-31
web/src/pages/Thread.tsx
···
120
120
attachments: attachments as Reply["attachments"],
121
121
};
122
122
123
-
const updatedRefs = appendRef(threadUri, newRef);
124
-
seedPageWithReply(threadUri, updatedRefs, newReply);
123
+
const updatedRefs = appendRefAndReply(threadUri, newRef, newReply);
125
124
126
125
setBody("");
127
126
setFiles([]);
···
145
144
await deleteRecord(agent, POST, reply.rkey);
146
145
return reply;
147
146
},
148
-
onSuccess: (reply) => {
147
+
onMutate: async (reply) => {
148
+
const refsKey = threadRefsQuery(threadUri).queryKey;
149
+
await queryClient.cancelQueries({ queryKey: refsKey });
150
+
const previousRefs = getRefs(threadUri);
149
151
removeRefAndReply(threadUri, reply.uri, page);
152
+
return { previousRefs };
150
153
},
151
-
onError: (err) =>
152
-
alert(`Could not delete: ${err instanceof Error ? err.message : err}`),
154
+
onError: (err, _reply, context) => {
155
+
if (context) setRefs(threadUri, context.previousRefs);
156
+
alert(`Could not delete: ${err instanceof Error ? err.message : err}`);
157
+
},
153
158
});
154
159
155
160
const deleteThreadMutation = useMutation({
···
344
349
queryClient.setQueryData(threadRefsQuery(threadUri).queryKey, refs);
345
350
}
346
351
347
-
function appendRef(threadUri: string, newRef: BacklinkRef): BacklinkRef[] {
348
-
const updated = [...getRefs(threadUri), newRef];
349
-
setRefs(threadUri, updated);
350
-
return updated;
351
-
}
352
-
353
352
function pageSlice(refs: BacklinkRef[], page: number): BacklinkRef[] {
354
353
const start = (page - 1) * REPLIES_PER_PAGE;
355
354
return refs.slice(start, start + REPLIES_PER_PAGE);
356
355
}
357
356
358
-
function seedPageWithReply(
357
+
function appendRefAndReply(
359
358
threadUri: string,
360
-
refs: BacklinkRef[],
361
-
reply: Reply,
362
-
) {
363
-
const newLastPage = Math.max(1, Math.ceil(refs.length / REPLIES_PER_PAGE));
364
-
const pageRefs = pageSlice(refs, newLastPage);
365
-
const key = threadPageQuery(threadUri, newLastPage, pageRefs).queryKey;
366
-
queryClient.setQueryData<ReplyPage>(key, (prev) => ({
367
-
replies: [...(prev?.replies ?? []), reply],
368
-
parentReplies: prev?.parentReplies ?? {},
369
-
}));
359
+
newRef: BacklinkRef,
360
+
newReply: Reply,
361
+
): BacklinkRef[] {
362
+
const previousRefs = getRefs(threadUri);
363
+
const updatedRefs = [...previousRefs, newRef];
364
+
365
+
const newLastPage = Math.max(
366
+
1,
367
+
Math.ceil(updatedRefs.length / REPLIES_PER_PAGE),
368
+
);
369
+
const oldPageRefs = pageSlice(previousRefs, newLastPage);
370
+
const oldKey = threadPageQuery(threadUri, newLastPage, oldPageRefs).queryKey;
371
+
const oldData = queryClient.getQueryData<ReplyPage>(oldKey);
372
+
373
+
setRefs(threadUri, updatedRefs);
374
+
375
+
const pageRefs = pageSlice(updatedRefs, newLastPage);
376
+
const newKey = threadPageQuery(threadUri, newLastPage, pageRefs).queryKey;
377
+
queryClient.setQueryData<ReplyPage>(newKey, {
378
+
replies: [...(oldData?.replies ?? []), newReply],
379
+
parentReplies: oldData?.parentReplies ?? {},
380
+
});
381
+
382
+
return updatedRefs;
370
383
}
371
384
372
385
function removeRefAndReply(
···
374
387
replyUri: string,
375
388
currentPage: number,
376
389
) {
377
-
const updatedRefs = getRefs(threadUri).filter(
378
-
(ref) => refToUri(ref) !== replyUri,
379
-
);
390
+
const previousRefs = getRefs(threadUri);
391
+
const oldPageRefs = pageSlice(previousRefs, currentPage);
392
+
const oldKey = threadPageQuery(threadUri, currentPage, oldPageRefs).queryKey;
393
+
const oldData = queryClient.getQueryData<ReplyPage>(oldKey);
394
+
395
+
const updatedRefs = previousRefs.filter((ref) => refToUri(ref) !== replyUri);
380
396
setRefs(threadUri, updatedRefs);
397
+
398
+
if (!oldData) return;
381
399
const pageRefs = pageSlice(updatedRefs, currentPage);
382
-
const key = threadPageQuery(threadUri, currentPage, pageRefs).queryKey;
383
-
queryClient.setQueryData<ReplyPage>(key, (prev) =>
384
-
prev
385
-
? { ...prev, replies: prev.replies.filter((r) => r.uri !== replyUri) }
386
-
: prev,
387
-
);
400
+
const newKey = threadPageQuery(threadUri, currentPage, pageRefs).queryKey;
401
+
queryClient.setQueryData<ReplyPage>(newKey, {
402
+
...oldData,
403
+
replies: oldData.replies.filter((r) => r.uri !== replyUri),
404
+
});
388
405
}
389
406
390
407
function buildBreadcrumb(