add a feature to delete a card when updating with an empty card name

sakihet · Nov 16, 2023 · 37b810e · 37b810e
1 parent 37baf73
commit 37b810e
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 0 deletions.
diff --git a/src/components/CardItem.tsx b/src/components/CardItem.tsx
@@ -10,6 +10,7 @@ export default function CardItem(
     name,
     pos,
     hasDescription,
+    deleteCard,
     updateCardName,
     handleDragEnd,
     handleDragStart,
@@ -20,6 +21,7 @@ export default function CardItem(
     name: string,
     pos: Pos,
     hasDescription: boolean,
+    deleteCard: (cardId: string, listId: string) => void,
     updateCardName: (id: string, name: string, listId: string) => void,
     handleDragEnd: (e: JSX.TargetedDragEvent<HTMLDivElement>) => void,
     handleDragStart: (e: JSX.TargetedDragEvent<HTMLDivElement>) => void,
@@ -57,6 +59,8 @@ export default function CardItem(
       if (ref.current?.value) {
         updateCardName(id, ref.current?.value, listId)
         setEditing(false)
+      } else if (ref.current?.value === '') {
+        deleteCard(id, listId)
       }
     }
   }

diff --git a/src/components/CardList.tsx b/src/components/CardList.tsx
@@ -8,6 +8,7 @@ export default function CardList(
     listId,
     isDragEnterCardFromTheOther,
     updateCardName,
+    deleteCard,
     handleDragEndCard,
     handleDragEnterCard,
     handleDragStartCard,
@@ -17,6 +18,7 @@ export default function CardList(
     cards: Card[]
     listId: string
     isDragEnterCardFromTheOther: boolean
+    deleteCard: (cardId: string, listId: string) => void
     updateCardName: (id: string, name: string, listId: string) => void
     handleDragEndCard: () => void
     handleDragEnterCard: (e: JSX.TargetedDragEvent<HTMLDivElement>) => void
@@ -41,6 +43,7 @@ export default function CardList(
             name={card.name}
             pos={idx === 0 ? "first" : (idx === (cards.length - 1) ? "last" : "middle")}
             hasDescription={card.description !== ''}
+            deleteCard={deleteCard}
             updateCardName={updateCardName}
             handleDragEnd={handleDragEndCard}
             handleDragStart={handleDragStartCard}

diff --git a/src/components/PageBoard.tsx b/src/components/PageBoard.tsx
@@ -89,6 +89,11 @@ export default function PageBoard(
     }
   }
 
+  const deleteCard = (cardId: string, listId: string) => {
+    const updated = service.deleteCard(appState.value, cardId, boardId, listId)
+    updateState(updated)
+  }
+
   const handleClickDeleteCards = (e: JSX.TargetedEvent<HTMLButtonElement>) => {
     const { listId } = e.currentTarget.dataset
     if (listId && boardId) {
@@ -284,6 +289,7 @@ export default function PageBoard(
                 listId={list.id}
                 isDragEnterCardFromTheOther={!!draggingCardListId && (list.id !== draggingCardListId) && (list.id === dragEnteredListId)}
                 updateCardName={updateCardName}
+                deleteCard={deleteCard}
                 handleDragEndCard={handleDragEndCard}
                 handleDragEnterCard={handleDragEnterCard}
                 handleDragStartCard={handleDragStartCard}

diff --git a/src/components/PageComponents.tsx b/src/components/PageComponents.tsx
@@ -152,6 +152,7 @@ export default function PageComponents() {
               name={'Card 1'}
               pos={'first'}
               hasDescription={true}
+              deleteCard={() => { }}
               updateCardName={() => { }}
               handleDragEnd={() => { }}
               handleDragStart={() => { }}
@@ -166,6 +167,7 @@ export default function PageComponents() {
               cards={cards}
               listId={list1.id}
               isDragEnterCardFromTheOther={false}
+              deleteCard={() => { }}
               updateCardName={() => { }}
               handleDragEndCard={() => { }}
               handleDragEnterCard={() => { }}