feat: enable reordering of cards and lists

next.config.mjs

@@ -6,6 +6,7 @@ await import("./src/env.mjs");
 
 /** @type {import("next").NextConfig} */
 const config = {
+  reactStrictMode: false,
   images: {
     remotePatterns: [
       {

src/app/boards/[...id]/page.tsx

@@ -44,22 +44,44 @@ export default function BoardPage() {
     },
   });
 
+  const updateList = api.list.update.useMutation({
+    onSuccess: async () => {
+      try {
+        await refetchBoard();
+      } catch (e) {
+        console.log(e);
+      }
+    },
+  });
+
   const onDragEnd = ({
     source,
     destination,
     draggableId,
+    type,
   }: DropResult): void => {
     if (!destination) {
       return;
     }
 
-    updateCard.mutate({
+    if (type === "LIST") {
-      cardId: draggableId,
+      updateList.mutate({
-      currentListId: source.droppableId,
+        boardId,
-      newListId: destination.droppableId,
+        listId: draggableId,
-      currentIndex: source.index,
+        currentIndex: source.index,
-      newIndex: destination.index,
+        newIndex: destination.index,
-    });
+      });
+    }
+
+    if (type === "CARD") {
+      updateCard.mutate({
+        cardId: draggableId,
+        currentListId: source.droppableId,
+        newListId: destination.droppableId,
+        currentIndex: source.index,
+        newIndex: destination.index,
+      });
+    }
   };
 
   return (
@@ -83,44 +105,70 @@ export default function BoardPage() {
       </div>
 
       <DragDropContext onDragEnd={onDragEnd}>
-        <div className="flex">
+        <Droppable droppableId="all-lists" direction="horizontal" type="LIST">
-          {data?.lists.map((list: List) => (
+          {(provided) => (
-            <Droppable key={list.publicId} droppableId={`${list.publicId}`}>
+            <div
-              {(provided) => (
+              className="flex"
-                <div
+              ref={provided.innerRef}
+              {...provided.droppableProps}
+            >
+              {data?.lists.map((list: List, index) => (
+                <Draggable
                   key={list.publicId}
-                  className="mr-5 w-72 rounded-md border border-dark-400 bg-dark-200 px-2 py-4"
+                  draggableId={list.publicId}
-                  ref={provided.innerRef}
+                  index={index}
-                  {...provided.droppableProps}
                 >
-                  <p className="mb-4 px-4 text-sm font-medium text-dark-1000">
+                  {(provided) => (
-                    {list.name}
+                    <div
-                  </p>
+                      key={list.publicId}
-
+                      ref={provided.innerRef}
-                  {list.cards?.map((card, index) => (
+                      {...provided.draggableProps}
-                    <Draggable
+                      {...provided.dragHandleProps}
-                      key={card.publicId}
+                      className="mr-5 w-72 rounded-md border border-dark-400 bg-dark-200 px-2 py-4"
-                      draggableId={card.publicId}
-                      index={index}
                     >
-                      {(provided) => (
+                      <Droppable droppableId={`${list.publicId}`} type="CARD">
-                        <div
+                        {(provided) => (
-                          key={card.publicId}
+                          <div
-                          className="mb-2 rounded-md border border-dark-200 bg-dark-500 px-3 py-2"
+                            ref={provided.innerRef}
-                          ref={provided.innerRef}
+                            {...provided.droppableProps}
-                          {...provided.draggableProps}
+                          >
-                          {...provided.dragHandleProps}
+                            <p className="mb-4 px-4 text-sm font-medium text-dark-1000">
-                        >
+                              {list.name}
-                          <p className="text-sm text-dark-1000">{card.title}</p>
+                            </p>
-                        </div>
+
-                      )}
+                            {list.cards?.map((card, index) => (
-                    </Draggable>
+                              <Draggable
-                  ))}
+                                key={card.publicId}
-                </div>
+                                draggableId={card.publicId}
-              )}
+                                index={index}
-            </Droppable>
+                              >
-          ))}
+                                {(provided) => (
-        </div>
+                                  <div
+                                    key={card.publicId}
+                                    className="mb-2 rounded-md border border-dark-200 bg-dark-500 px-3 py-2"
+                                    ref={provided.innerRef}
+                                    {...provided.draggableProps}
+                                    {...provided.dragHandleProps}
+                                  >
+                                    <p className="text-sm text-dark-1000">
+                                      {card.title}
+                                    </p>
+                                  </div>
+                                )}
+                              </Draggable>
+                            ))}
+                            {provided.placeholder}
+                          </div>
+                        )}
+                      </Droppable>
+                    </div>
+                  )}
+                </Draggable>
+              ))}
+              {provided.placeholder}
+            </div>
+          )}
+        </Droppable>
       </DragDropContext>
     </div>
   );

src/server/api/root.ts

@@ -1,5 +1,6 @@
 import { boardRouter } from "~/server/api/routers/board";
 import { cardRouter } from "~/server/api/routers/card";
+import { listRouter } from "~/server/api/routers/list";
 import { createTRPCRouter } from "~/server/api/trpc";
 
 /**
@@ -9,7 +10,8 @@ import { createTRPCRouter } from "~/server/api/trpc";
  */
 export const appRouter = createTRPCRouter({
   board: boardRouter,
-  card: cardRouter
+  card: cardRouter,
+  list: listRouter,
 });
 
 // export type definition of API

src/server/api/routers/card.ts

@@ -1,5 +1,5 @@
 import { z } from "zod";
-import { and, eq, gte, or} from "drizzle-orm";
+import { eq, sql } from "drizzle-orm";
 
 import { cards, lists } from "~/server/db/schema";
 
@@ -24,20 +24,33 @@ export const cardRouter = createTRPCRouter({
     if (!userId) return;
 
     return ctx.db.transaction(async (tx) => {
-      const [currentList, newList] = await tx.select({ id: lists.id }).from(lists).where(or(eq(lists.publicId, input.currentListId), eq(lists.publicId, input.newListId)))
+      const [currentList] = await tx.select({ id: lists.id }).from(lists).where(eq(lists.publicId, input.currentListId))
-
+      const [newList] = await tx.select({ id: lists.id }).from(lists).where(eq(lists.publicId, input.newListId))
 
       if (!currentList?.id || !newList?.id) return;
-      
-      await tx
-        .update(cards)
-        .set({ index: input.newIndex + 1 })
-        .where(and(eq(cards.listId, newList.id), gte(cards.index, input.newIndex)))
 
-      await tx
+      if (currentList.id === newList.id) {
-        .update(cards)
+        await tx.execute(sql`
-        .set({ listId: newList.id, index: input.newIndex })
+          UPDATE ${cards}
-        .where(eq(cards.publicId, input.cardId))
+          SET ${cards.index} =
+            CASE
+              WHEN ${cards.index} = ${input.currentIndex} THEN ${input.newIndex}
+              WHEN ${input.currentIndex} < ${input.newIndex} AND ${cards.index} > ${input.currentIndex} AND ${cards.index} <= ${input.newIndex} THEN ${cards.index} - 1
+              WHEN ${input.currentIndex} > ${input.newIndex} AND ${cards.index} >= ${input.newIndex} AND ${cards.index} < ${input.currentIndex} THEN ${cards.index} + 1
+              ELSE ${cards.index}
+            END
+          WHERE ${cards.listId} = ${currentList.id};
+        `);
+      } else {
+        await tx.execute(sql`UPDATE ${cards} SET ${cards.index} = ${cards.index} + 1 WHERE ${cards.listId} = ${newList.id} AND ${cards.index} >= ${input.newIndex};`)
+
+        await tx.execute(sql`UPDATE ${cards} SET ${cards.index} = ${cards.index} - 1 WHERE ${cards.listId} = ${currentList.id} AND ${cards.index} >= ${input.currentIndex};`)
+
+        await tx
+          .update(cards)
+          .set({ listId: newList.id, index: input.newIndex })
+          .where(eq(cards.publicId, input.cardId));
+      }
     })
-  }),
+  })
 });

src/server/api/routers/list.ts

@@ -0,0 +1,45 @@
+import { z } from "zod";
+import { eq, sql } from "drizzle-orm";
+
+import { lists } from "~/server/db/schema";
+
+import {
+  createTRPCRouter,
+  publicProcedure,
+} from "~/server/api/trpc";
+
+export const listRouter = createTRPCRouter({
+  update: publicProcedure
+    .input(
+      z.object({ 
+        boardId: z.string().min(12),
+        listId: z.string().min(12),
+        currentIndex: z.number(),
+        newIndex: z.number(),
+      }))
+    .mutation(({ ctx, input }) => {
+      const userId = ctx.session?.user.id;
+
+      if (!userId) return;
+
+      return ctx.db.transaction(async (tx) => {
+        const [list] = await tx.select({ id: lists.id, boardId: lists.boardId }).from(lists).where(eq(lists.publicId, input.listId))
+
+        if (!list) return;
+
+        await tx.execute(sql`
+          UPDATE ${lists}
+          SET ${lists.index} =
+            CASE
+              WHEN ${lists.index} = ${input.currentIndex} AND ${lists.id} = ${list.id} THEN ${input.newIndex}
+              WHEN ${input.currentIndex} < ${input.newIndex} AND ${lists.index} > ${input.currentIndex} AND ${lists.index} <= ${input.newIndex} THEN ${lists.index} - 1
+              WHEN ${input.currentIndex} > ${input.newIndex} AND ${lists.index} >= ${input.newIndex} AND ${lists.index} < ${input.currentIndex} THEN ${lists.index} + 1
+              ELSE ${lists.index}
+            END
+          WHERE ${lists.boardId} = ${list.boardId};
+        `);
+      })
+
+      
+    })
+});