Retro Bulletin Board Systems on atproto. Web app and TUI. lazy mirror of alyraffauf/atbbs atbbs.xyz
forums python tui atproto bbs
3
fork

Configure Feed

Select the types of activity you want to include in your feed.

web/Threads: use onMutate for deletes

+48 -31
+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(