Added rename board feature

jatin1510 · May 24, 2024 · 2341154 · 2341154
1 parent 66afec9
commit 2341154
Show file tree

Hide file tree

Showing 6 changed files with 149 additions and 2 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -3,6 +3,7 @@ import { Inter } from "next/font/google";
 import "./globals.css";
 import { ConvexClientProvider } from "@/providers/convex-client-provider";
 import { Toaster } from "@/components/ui/sonner";
+import { ModalProvider } from "@/providers/modal-provider";
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
@@ -20,6 +21,7 @@ export default function RootLayout({
             <body className={inter.className}>
                 <ConvexClientProvider>
                     <Toaster />
+                    <ModalProvider />
                     {children}
                 </ConvexClientProvider>
             </body>

diff --git a/components/actions.tsx b/components/actions.tsx
@@ -9,12 +9,13 @@ import {
     DropdownMenuItem,
     DropdownMenuSeparator,
 } from "@/components/ui/dropdown-menu";
-import { Link2, Trash2 } from "lucide-react";
+import { Link2, Pencil, Trash2 } from "lucide-react";
 import { toast } from "sonner";
 import { useApiMutation } from "@/hooks/use-api-mutation";
 import { api } from "@/convex/_generated/api";
 import { ConfirmModal } from "./confirm-modal";
 import { Button } from "./ui/button";
+import { useRenameModal } from "@/store/use-rename-modal";
 
 interface ActionProps {
     children: React.ReactNode;
@@ -31,6 +32,8 @@ export const Actions = ({
     id,
     title,
 }: ActionProps) => {
+    const { onOpen } = useRenameModal();
+
     const { mutate, pending } = useApiMutation(api.board.remove);
 
     const onDelete = () => {
@@ -63,12 +66,21 @@ export const Actions = ({
                     <Link2 className="h-4 w-4 mr-2" />
                     Copy board link
                 </DropdownMenuItem>
+                <DropdownMenuItem
+                    className="p-2 cursor-pointer"
+                    onClick={() => onOpen(id, title)}
+                >
+                    <Pencil className="h-4 w-4 mr-2" />
+                    Rename
+                </DropdownMenuItem>
                 <DropdownMenuSeparator />
                 <ConfirmModal
                     header={`Delete board?`}
                     description={
                         <div>
-                            To confirm, type <span className="font-semibold">{title}</span> in the box below
+                            To confirm, type{" "}
+                            <span className="font-semibold">{title}</span> in
+                            the box below
                         </div>
                     }
                     disabled={pending}

diff --git a/components/modals/rename-modal.tsx b/components/modals/rename-modal.tsx
@@ -0,0 +1,70 @@
+"use client";
+
+import {
+    Dialog,
+    DialogClose,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+} from "@/components/ui/dialog";
+import { api } from "@/convex/_generated/api";
+import { useApiMutation } from "@/hooks/use-api-mutation";
+import { useRenameModal } from "@/store/use-rename-modal";
+import { FormEventHandler, useEffect, useState } from "react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+
+export const RenameModal = () => {
+    const { mutate, pending } = useApiMutation(api.board.update);
+
+    const { isOpen, onClose, initialValues } = useRenameModal();
+
+    const [title, setTitle] = useState(initialValues.title);
+
+    useEffect(() => {
+        setTitle(initialValues.title);
+    }, [initialValues.title]);
+
+    const onSubmit: FormEventHandler<HTMLFormElement> = (e) => {
+        e.preventDefault();
+        mutate({ id: initialValues.id, title })
+            .then(() => {
+                toast.success("Board renamed");
+            })
+            .catch(() => toast.error("Failed to rename board"))
+            .finally(onClose);
+    };
+
+    return (
+        <Dialog open={isOpen} onOpenChange={onClose}>
+            <DialogContent>
+                <DialogHeader>Edit board title</DialogHeader>
+                <DialogDescription>
+                    Enter a new title for this board
+                </DialogDescription>
+                <form onSubmit={onSubmit} className="space-y-4">
+                    <Input
+                        disabled={pending}
+                        required
+                        maxLength={60}
+                        value={title}
+                        onChange={(e) => setTitle(e.target.value)}
+                        placeholder="Board title"
+                    />
+                    <DialogFooter>
+                        <DialogClose asChild>
+                            <Button type="button" variant="outline">
+                                Cancel
+                            </Button>
+                        </DialogClose>
+                        <Button disabled={pending} type="submit">
+                            Save
+                        </Button>
+                    </DialogFooter>
+                </form>
+            </DialogContent>
+        </Dialog>
+    );
+};
diff --git a/convex/board.ts b/convex/board.ts
@@ -50,3 +50,24 @@ export const remove = mutation({
         await ctx.db.delete(args.id);
     },
 });
+
+export const update = mutation({
+    args: {
+        id: v.id("boards"),
+        title: v.string(),
+    },
+    handler: async (ctx, args) => {
+        const identity = await ctx.auth.getUserIdentity();
+        if (!identity) {
+            throw new Error("Unauthorized");
+        }
+
+        const title = args.title.trim();
+        if (!title) throw new Error("Title is required");
+
+        if (title.length > 60)
+            throw new Error("Title cannot be longer than 60 characters");
+
+        return await ctx.db.patch(args.id, { title: args.title });
+    },
+});
diff --git a/providers/modal-provider.tsx b/providers/modal-provider.tsx
@@ -0,0 +1,22 @@
+"use client";
+
+import { RenameModal } from "@/components/modals/rename-modal";
+import { useEffect, useState } from "react";
+
+export const ModalProvider = () => {
+    const [isMounted, setIsMounted] = useState(false);
+
+    useEffect(() => {
+        setIsMounted(true);
+    }, []);
+
+    if (!isMounted) {
+        return null;
+    }
+
+    return (
+        <>
+            <RenameModal />
+        </>
+    );
+};
diff --git a/store/use-rename-modal.ts b/store/use-rename-modal.ts
@@ -0,0 +1,20 @@
+import { create } from "zustand";
+
+const defaultValues = {
+    id: "",
+    title: "",
+};
+
+interface IRenameModal {
+    isOpen: boolean;
+    initialValues: typeof defaultValues;
+    onOpen: (id: string, title: string) => void;
+    onClose: () => void;
+}
+
+export const useRenameModal = create<IRenameModal>((set) => ({
+    isOpen: false,
+    onOpen: (id, title) => set({ isOpen: true, initialValues: { id, title } }),
+    onClose: () => set({ isOpen: false, initialValues: defaultValues }),
+    initialValues: defaultValues,
+}));