added change card name functionality

task_management_app/src/components/views/CardModal.tsx

@@ -1,10 +1,11 @@
 "use client"
 
 import { useParams, useRouter } from "next/navigation"
-import { useContext, useEffect } from "react";
+import { FormEvent, useContext, useEffect, useState } from "react";
 import { BoardContext, BoardContextProps } from "../BoardContext";
-import { useStorage } from "@/app/liveblocks.config";
+import { Card, useMutation, useStorage } from "@/app/liveblocks.config";
 import { shallow } from "@liveblocks/client";
+import { BsThreeDots } from "react-icons/bs";
 
 
 
@@ -13,7 +14,7 @@ const CardModal = () => {
     const router = useRouter();
     const params = useParams();
     const {setOpenCard} = useContext<BoardContextProps>(BoardContext);
-    
+    const [editCard, setEditCard] = useState(false);
 
     const card = useStorage(root => {
        return root.cards.find(c => c.id === params.cardId) 
@@ -25,15 +26,47 @@ const CardModal = () => {
         }
     }, [params])
 
-
-
     function handleBackdrop(){
             router.back();
     }
 
+    const updateCard = useMutation(({storage}, cardId, updateData) => {
+        const cards = storage.get('cards').map(c => c.toObject());
+        const index = cards.findIndex(c => c.id === cardId);
+        const card = storage.get('cards').get(index);
+        for (let updateKey in updateData){
+            card?.set(updateKey as keyof Card, updateData[updateKey]);
+        }
+    }, [])
+
+    function handleCardNamechange(ev: FormEvent){
+        ev.preventDefault();
+        const input = (ev.target as HTMLFormElement).querySelector('input');
+        if(input){
+            const newName = input.value;
+            updateCard(params.cardId, {name: newName});
+            setEditCard(false)
+        }
+    }
+
   return (
     <div onClick={handleBackdrop} className='fixed inset-0 bg-black/80'>
-        <div onClick={ev => ev.stopPropagation()} className='bg-white p-4 mt-8 max-w-xs mx-auto'>{card?.name}</div>
+        <div onClick={ev => ev.stopPropagation()} className='bg-white p-4 mt-8 max-w-xs mx-auto'>
+            {!editCard && (
+                <div className="flex justify-between">
+                    <p>{card?.name}</p>
+                    <button onClick={() => setEditCard(true)} className="text-gray-500"><BsThreeDots/></button>
+                </div>
+            )}
+            {editCard && (
+                <div>
+                    <form onSubmit={handleCardNamechange} className="flex flex-col">
+                        <input type="text" defaultValue={card?.name} className="mb-4 border p-2 rounded-md"/>
+                        <button type="submit" className="uppercase">save</button>
+                    </form>
+                </div>
+            )}
+        </div>
     </div>
   )
 }