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 (
@@ -71,6 +67,14 @@ const TransactionMobile = () => { 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 );