From babc9c62151b9daab3f8b8b85b439b8a1c5a9dbb Mon Sep 17 00:00:00 2001
From: Brad Traversy <traversymedia@gmail.com>
Date: Mon, 6 Nov 2023 15:36:50 -0500
Subject: [PATCH] Delete transaction (DOM Only)

---
 src/App.vue                        | 14 +++++++++++++-
 src/components/TransactionList.vue | 10 +++++++++-
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 38a0aef..7465f09 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,7 +3,10 @@
   <div class="container">
     <Balance :total="total" />
     <IncomeExpenses :income="+income" :expenses="+expenses" />
-    <TransactionList :transactions="transactions" />
+    <TransactionList
+      :transactions="transactions"
+      @transactionDeleted="handleTransactionDeleted"
+    />
     <AddTransaction @transactionSubmitted="handleTransactionSubmitted" />
   </div>
 </template>
@@ -66,4 +69,13 @@ const handleTransactionSubmitted = (transactionData) => {
 const generateUniqueId = () => {
   return Math.floor(Math.random() * 1000000);
 };
+
+// Delete transaction
+const handleTransactionDeleted = (id) => {
+  transactions.value = transactions.value.filter(
+    (transaction) => transaction.id !== id
+  );
+
+  toast.success('Transaction deleted.');
+};
 </script>
diff --git a/src/components/TransactionList.vue b/src/components/TransactionList.vue
index 8c3afb7..a9085e2 100644
--- a/src/components/TransactionList.vue
+++ b/src/components/TransactionList.vue
@@ -7,7 +7,9 @@
       :class="transaction.amount < 0 ? 'minus' : 'plus'"
     >
       {{ transaction.text }} <span>${{ transaction.amount }}</span
-      ><button class="delete-btn">x</button>
+      ><button class="delete-btn" @click="deleteTransaction(transaction.id)">
+        x
+      </button>
     </li>
   </ul>
 </template>
@@ -21,4 +23,10 @@ const props = defineProps({
     required: true,
   },
 });
+
+const emit = defineEmits(['transactionDeleted']);
+
+const deleteTransaction = (id) => {
+  emit('transactionDeleted', id);
+};
 </script>