Add column delete

.env.example

@@ -0,0 +1,4 @@
+DATABASE_PATH="./prisma/dev.db"
+DATABASE_URL="file:./dev.db?connection_limit=1"
+SESSION_SECRET="super-duper-s3cret"
+COOKIE_SECRET="super-duper-s3cret"

.gitignore

@@ -5,3 +5,4 @@ node_modules
 /public/build
 .env
 /prisma/dev.db
+/prisma/dev.db-journal

app/routes/board.$id/column.tsx

@@ -1,5 +1,5 @@
 import { useState, useRef } from "react";
-import { useSubmit } from "@remix-run/react";
+import { useFetcher, useSubmit } from "@remix-run/react";
 import invariant from "tiny-invariant";
 
 import { Icon } from "~/icons/icons";
@@ -23,6 +23,7 @@ interface ColumnProps {
 
 export function Column({ name, columnId, items }: ColumnProps) {
   let submit = useSubmit();
+  let deleteFetcher = useFetcher();
 
   let [acceptDrop, setAcceptDrop] = useState(false);
   let [edit, setEdit] = useState(false);
@@ -79,18 +80,46 @@ export function Column({ name, columnId, items }: ColumnProps) {
         setAcceptDrop(false);
       }}
     >
-      <div className="p-2">
-        <EditableText
-          fieldName="name"
-          value={name}
-          inputLabel="Edit column name"
-          buttonLabel={`Edit column "${name}" name`}
-          inputClassName="border border-slate-400 w-full rounded-lg py-1 px-2 font-medium text-black"
-          buttonClassName="block rounded-lg text-left w-full border border-transparent py-1 px-2 font-medium text-slate-600"
+      <div className="p-2 flex place-items-center gap-2">
+        <div className="w-full">
+          <EditableText
+            fieldName="name"
+            value={name}
+            inputLabel="Edit column name"
+            buttonLabel={`Edit column "${name}" name`}
+            inputClassName="border border-slate-400 w-full rounded-lg py-1 px-2 font-medium text-black"
+            buttonClassName="block rounded-lg text-left w-full border border-transparent py-1 px-2 font-medium text-slate-600"
+          >
+            <input type="hidden" name="intent" value={INTENTS.updateColumn} />
+            <input type="hidden" name="columnId" value={columnId} />
+          </EditableText>
+        </div>
+        <deleteFetcher.Form
+          method="post"
+          onSubmit={(event) => {
+            event.preventDefault();
+            if (
+              window.confirm(
+                "Are you sure you want to delete this column? This will delete all cards in this column.",
+              )
+            ) {
+              event.currentTarget.submit();
+            }
+          }}
         >
-          <input type="hidden" name="intent" value={INTENTS.updateColumn} />
+          <input type="hidden" name="intent" value={INTENTS.deleteColumn} />
           <input type="hidden" name="columnId" value={columnId} />
-        </EditableText>
+          <button
+            aria-label="Delete column"
+            className="hover:text-brand-red w-12 h-8 rounded-full"
+            type="submit"
+            onClick={(event) => {
+              event.stopPropagation();
+            }}
+          >
+            <Icon name="trash" />
+          </button>
+        </deleteFetcher.Form>
       </div>
 
       <ul ref={listRef} className="flex-grow overflow-auto">

app/routes/board.$id/queries.ts

@@ -75,3 +75,7 @@ export async function createColumn(
     },
   });
 }
+
+export async function deleteColumn(id: string, accountId: string) {
+  return prisma.column.delete({ where: { id, Board: { accountId } } });
+}

app/routes/board.$id/route.tsx

@@ -10,6 +10,7 @@ import { INTENTS } from "./types";
 import {
   createColumn,
   updateColumnName,
+  deleteColumn,
   getBoardData,
   upsertItem,
   updateBoardName,
@@ -76,6 +77,12 @@ export async function action({ request, params }: ActionFunctionArgs) {
       await updateColumnName(String(columnId), String(name), accountId);
       break;
     }
+    case INTENTS.deleteColumn: {
+      let { columnId } = Object.fromEntries(formData);
+      if (!columnId) throw badRequest("Missing columnId");
+      await deleteColumn(String(columnId), accountId);
+      break;
+    }
     default: {
       throw badRequest(`Unknown intent: ${intent}`);
     }

app/routes/board.$id/types.ts

@@ -14,6 +14,7 @@ export const CONTENT_TYPES = {
 export const INTENTS = {
   createColumn: "newColumn" as const,
   updateColumn: "updateColumn" as const,
+  deleteColumn: "deleteColumn" as const,
   createItem: "createItem" as const,
   moveItem: "moveItem" as const,
   moveColumn: "moveColumn" as const,