feat: rollback card/list if duplicate index

src/server/api/routers/board.ts

@@ -210,7 +210,7 @@ export const boardRouter = createTRPCRouter({
           deletedBy: userId,
         });
 
-        if (!deletedLists?.length) {
+        if (!Array.isArray(deletedLists)) {
           throw new TRPCError({
             message: `Failed to delete lists`,
             code: "INTERNAL_SERVER_ERROR",
@@ -223,7 +223,7 @@ export const boardRouter = createTRPCRouter({
           deletedBy: userId,
         });
 
-        if (!deletedCards?.length) {
+        if (!Array.isArray(deletedCards)) {
           throw new TRPCError({
             message: `Failed to delete cards`,
             code: "INTERNAL_SERVER_ERROR",

src/server/api/routers/list.ts

@@ -53,7 +53,8 @@ export const listRouter = createTRPCRouter({
         name: input.name,
         createdBy: userId,
         boardId: board.id,
-        index: latestListIndex ? latestListIndex + 1 : 0,
+        index:
+          latestListIndex || latestListIndex === 0 ? latestListIndex + 1 : 0,
       });
 
       if (!result)
@@ -161,7 +162,7 @@ export const listRouter = createTRPCRouter({
         deletedBy: userId,
       });
 
-      if (!deletedCards?.length)
+      if (!Array.isArray(deletedCards))
         throw new TRPCError({
           message: `Failed to delete cards`,
           code: "INTERNAL_SERVER_ERROR",
@@ -177,7 +178,7 @@ export const listRouter = createTRPCRouter({
 
       await listRepo.shiftIndex(ctx.db, {
         boardId: list.boardId,
-        listIndex: list.id,
+        listIndex: list.index,
       });
 
       return { success: true };

src/views/board/components/DeleteListConfirmation.tsx

@@ -1,6 +1,7 @@
 import { api } from "~/utils/api";
 import { useBoard } from "~/providers/board";
 import { useModal } from "~/providers/modal";
+import { usePopup } from "~/providers/popup";
 
 import Button from "~/components/Button";
 
@@ -14,6 +15,7 @@ export function DeleteListConfirmation({
   const utils = api.useUtils();
   const { boardData } = useBoard();
   const { closeModal } = useModal();
+  const { showPopup } = usePopup();
 
   const refetchBoard = async () => {
     if (boardData?.publicId) {
@@ -30,6 +32,14 @@ export function DeleteListConfirmation({
       closeModal();
       return refetchBoard();
     },
+    onError: async () => {
+      closeModal();
+      await refetchBoard();
+      showPopup({
+        header: "Unable to delete list",
+        message: "Please try again later, or contact customer support.",
+      });
+    },
   });
 
   return (
@@ -46,7 +56,10 @@ export function DeleteListConfirmation({
         <Button onClick={() => closeModal()} variant="secondary">
           Cancel
         </Button>
-        <Button onClick={() => deleteList.mutate({ listPublicId })}>
+        <Button
+          isLoading={deleteList.isPending}
+          onClick={() => deleteList.mutate({ listPublicId })}
+        >
           Delete
         </Button>
       </div>