feat: add board slug availability check with real-time validation UI

Author: LovelessCodes

apps/web/src/views/board/components/UpdateBoardSlugForm.tsx

@@ -2,11 +2,12 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { env } from "next-runtime-env";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
-import { HiXMark } from "react-icons/hi2";
+import { HiCheck, HiMiniStar, HiXMark } from "react-icons/hi2";
 import { z } from "zod";
 
 import Button from "~/components/Button";
 import Input from "~/components/Input";
+import { useDebounce } from "~/hooks/useDebounce";
 import { useModal } from "~/providers/modal";
 import { usePopup } from "~/providers/popup";
 import { api } from "~/utils/api";
@@ -50,6 +51,7 @@ export function UpdateBoardSlugForm({
     register,
     handleSubmit,
     formState: { isDirty, errors },
+    watch,
   } = useForm<FormValues>({
     resolver: zodResolver(schema),
     values: {
@@ -58,6 +60,10 @@ export function UpdateBoardSlugForm({
     mode: "onChange",
   });
 
+  const slug = watch("slug");
+  
+  const [debouncedSlug] = useDebounce(slug, 500);
+
   const updateBoardSlug = api.board.update.useMutation({
     onError: () => {
       showPopup({
@@ -72,13 +78,29 @@ export function UpdateBoardSlugForm({
     },
   });
 
+  const checkBoardSlugAvailability =
+    api.board.checkSlugAvailability.useQuery(
+      {
+        boardSlug: debouncedSlug,
+      },
+      {
+        enabled:
+          !!debouncedSlug && debouncedSlug !== boardSlug && !errors.slug,
+      },
+    );
+
+  const isBoardSlugAvailable = checkBoardSlugAvailability.data;
+
   useEffect(() => {
     const nameElement: HTMLElement | null =
       document.querySelector<HTMLElement>("#board-slug");
     if (nameElement) nameElement.focus();
   }, []);
 
   const onSubmit = (data: FormValues) => {
+    if (!isBoardSlugAvailable) return;
+    if (isBoardSlugAvailable?.isReserved) return;
+
     updateBoardSlug.mutate({
       slug: data.slug,
       boardPublicId,
@@ -107,14 +129,23 @@ export function UpdateBoardSlugForm({
         <Input
           id="board-slug"
           {...register("slug")}
-          errorMessage={errors.slug?.message}
+          errorMessage={errors.slug?.message || (isBoardSlugAvailable?.isReserved
+            ? "This board URL has already been taken"
+            : undefined)}
           prefix={`${env("NEXT_PUBLIC_BASE_URL")}/${workspaceSlug}/`}
           onKeyDown={async (e) => {
             if (e.key === "Enter") {
               e.preventDefault();
               await handleSubmit(onSubmit)();
             }
           }}
+          iconRight={
+            !!errors.slug?.message || isBoardSlugAvailable?.isReserved ? (
+              <HiXMark className="h-4 w-4 text-red-500" />
+            ) : (
+              <HiCheck className="h-4 w-4 dark:text-dark-1000" />
+            )
+          }
         />
       </div>
       <div className="mt-12 flex items-center justify-end border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
@@ -125,7 +156,8 @@ export function UpdateBoardSlugForm({
             disabled={
               !isDirty ||
               updateBoardSlug.isPending ||
-              errors.slug?.message !== undefined
+              errors.slug?.message !== undefined ||
+              isBoardSlugAvailable?.isReserved
             }
           >
             Update

packages/api/src/routers/board.ts

@@ -2,6 +2,7 @@ import { TRPCError } from "@trpc/server";
 import { z } from "zod";
 
 import * as boardRepo from "@kan/db/repository/board.repo";
+import * as boardSlugRepo from "@kan/db/repository/boardSlug.repo";
 import * as cardRepo from "@kan/db/repository/card.repo";
 import * as activityRepo from "@kan/db/repository/cardActivity.repo";
 import * as listRepo from "@kan/db/repository/list.repo";
@@ -352,4 +353,36 @@ export const boardRouter = createTRPCRouter({
 
       return { success: true };
     }),
+    checkSlugAvailability: publicProcedure
+      .meta({
+        openapi: {
+          summary: "Check if a board slug is available",
+          method: "GET",
+          path: "/boards/check-slug-availability",
+          description: "Checks if a board slug is available",
+          tags: ["Boards"],
+          protect: true,
+        },
+      })
+      .input(
+        z.object({
+          boardSlug: z
+            .string()
+            .min(3)
+            .max(24)
+            .regex(/^(?![-]+$)[a-zA-Z0-9-]+$/),
+        }),
+      )
+      .output(
+        z.object({
+          isReserved: z.boolean(),
+        }),
+      )
+      .query(async ({ ctx, input }) => {
+        const slug = input.boardSlug.toLowerCase();
+        const existingBoard = await boardSlugRepo.getBoardSlug(ctx.db, slug);
+        return {
+          isReserved: !!existingBoard
+        };
+      }),
 });

packages/db/src/repository/boardSlug.repo.ts

@@ -0,0 +1,13 @@
+import { eq } from "drizzle-orm";
+
+import type { dbClient } from "@kan/db/client";
+import { boards } from "@kan/db/schema";
+
+export const getBoardSlug = (db: dbClient, slug: string) => {
+  return db.query.boards.findFirst({
+    columns: {
+      slug: true,
+    },
+    where: eq(boards.slug, slug),
+  });
+};