From ab20c77412dc4014b36d097627e7094bdc665d18 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9DJohn?=
 <102276922+UlianaNad@users.noreply.github.com>
Date: Sat, 13 Jan 2024 13:38:30 +0200
Subject: [PATCH] added delete function to mobile

---
 .../TransactionsDashboard.jsx                 |  2 --
 .../TransactionMobile/TransactionMobile.jsx   | 20 +++++++++++--------
 src/store/Transactions/transactionsSlice.js   |  1 -
 3 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/components/TransactionsList/TransactionDashboard/TransactionsDashboard.jsx b/src/components/TransactionsList/TransactionDashboard/TransactionsDashboard.jsx
index c545dae..74f88b9 100644
--- a/src/components/TransactionsList/TransactionDashboard/TransactionsDashboard.jsx
+++ b/src/components/TransactionsList/TransactionDashboard/TransactionsDashboard.jsx
@@ -7,7 +7,6 @@ import {
   StyledTheadItem,
   WrapTable,
 } from './TransactionDashboard.styled';
-import { fetchTransactionsThunk } from 'store/Transactions/transactionsThunk';
 import { useDispatch, useSelector } from 'react-redux';
 import { transactionsData } from 'store/Transactions/selectors';
 import { categoriesThunk } from 'store/Categories/categoriesThunk';
@@ -17,7 +16,6 @@ const TransactionsDashboard = () => {
   const dispatch = useDispatch();
 
   useEffect(() => {
-    dispatch(fetchTransactionsThunk());
     dispatch(categoriesThunk());
   }, [dispatch]);
 
diff --git a/src/components/TransactionsList/TransactionMobile/TransactionMobile.jsx b/src/components/TransactionsList/TransactionMobile/TransactionMobile.jsx
index e6ce67a..112c29c 100644
--- a/src/components/TransactionsList/TransactionMobile/TransactionMobile.jsx
+++ b/src/components/TransactionsList/TransactionMobile/TransactionMobile.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import Edit from '../helpers/Edit';
 import {
   EditButton,
@@ -14,18 +14,14 @@ import { formatCurrency } from '../TransactionsList';
 import { useDispatch, useSelector } from 'react-redux';
 import { selectCategories } from 'store/Categories/categoriesSelectors';
 import { transactionsData } from 'store/Transactions/selectors';
-import {
-  deleteTransactionThunk,
-  fetchTransactionsThunk,
-} from 'store/Transactions/transactionsThunk';
+import { deleteTransactionThunk } from 'store/Transactions/transactionsThunk';
+import { toast } from 'react-toastify';
+import { deleteTransaction } from 'store/Transactions/transactionsSlice';
 
 const TransactionMobile = () => {
   const categories = useSelector(selectCategories);
   const transactions = useSelector(transactionsData);
   const dispatch = useDispatch();
-  useEffect(() => {
-    dispatch(fetchTransactionsThunk());
-  }, [dispatch]);
 
   return (
     <div>
@@ -71,6 +67,14 @@ const TransactionMobile = () => {
                   <StyledButton
                     onClick={() =>
                       dispatch(deleteTransactionThunk(transaction.id))
+                        .unwrap()
+                        .then(() => {
+                          dispatch(deleteTransaction(transaction.id));
+                          toast.success('Transaction is deleted!');
+                        })
+                        .catch(err => {
+                          toast.error(err);
+                        })
                     }
                   >
                     Delete
diff --git a/src/store/Transactions/transactionsSlice.js b/src/store/Transactions/transactionsSlice.js
index bc37f4f..1a8fbb0 100644
--- a/src/store/Transactions/transactionsSlice.js
+++ b/src/store/Transactions/transactionsSlice.js
@@ -15,7 +15,6 @@ export const transactionsSlice = createSlice({
   },
   reducers: {
     deleteTransaction: (state, action) => {
-      console.log(action.payload);
       state.transactions = state.transactions.filter(
         transaction => transaction.id !== action.payload
       );