diff --git a/src/components/ChartBarExpInc/ChartBarExpInc.js b/src/components/ChartBarExpInc/ChartBarExpInc.js index 3ada7e9..551a3f8 100644 --- a/src/components/ChartBarExpInc/ChartBarExpInc.js +++ b/src/components/ChartBarExpInc/ChartBarExpInc.js @@ -13,7 +13,7 @@ import useMediaQuery from '@mui/material/useMediaQuery'; export default function ChartBarExpInc({ chartData }) { const tablet = useMediaQuery('(min-width: 768px)'); const result = chartData; - const len = result.length; + const len = result?.length; const heightMobile = 50 * len + 40; const renderTopLabel = ({ payload, x, y, width, height, value }) => { diff --git a/src/components/InputTable/InputTable.js b/src/components/InputTable/InputTable.js index df1fd97..389f7ef 100644 --- a/src/components/InputTable/InputTable.js +++ b/src/components/InputTable/InputTable.js @@ -1,14 +1,15 @@ import s from './InputTable.module.css'; -import React, { useState, useEffect } from 'react'; +import React, { useState, useEffect, useLayoutEffect } from 'react'; import useMediaQuery from '@mui/material/useMediaQuery'; import { format } from 'date-fns'; import { toast } from 'react-toastify'; import 'react-datepicker/dist/react-datepicker.css'; import Select from 'react-select'; import { addNewTransactionThunk } from '../../redux/transactions/thunk'; -import { useDispatch } from 'react-redux'; +import { useDispatch, useSelector } from 'react-redux'; import DatePickerComponent from '../DatePicker/DatePicker'; import Button from '../Button/Button'; +import { getTransErr } from '../../redux/transactions/transactionsSelectors'; import { summaryThunk } from '../../redux/summary/thunk'; @@ -21,7 +22,7 @@ const InputTable = ({ options, income, onClick }) => { const dispatch = useDispatch(); const tablet = useMediaQuery('(min-width: 768px)'); - + const transErr = useSelector(getTransErr); const resetInput = () => { setProductName(''); setPayValue(''); @@ -78,11 +79,30 @@ const InputTable = ({ options, income, onClick }) => { setDate(value); }; + // useLayoutEffect(() => { + // if (!transErr) { + // toast.success('Транзакція успішно додана', { + // autoClose: 1000, + // position: 'top-center', + // closeOnClick: true, + // }); + // } else { + // toast.error( + // 'Транзакція не додана. Сума транзакції перевищує суму балансу!', + // { + // autoClose: 1000, + // position: 'top-center', + // closeOnClick: true, + // }, + // ); + // } + // }, [transErr]); + useEffect(() => { dispatch(summaryThunk(obj)); }, [date]); - const addTransaction = () => { + const addTransaction = async () => { if (!productName) { return toast.error('Ви забули про опис)', { autoClose: 2000, @@ -104,17 +124,63 @@ const InputTable = ({ options, income, onClick }) => { closeOnClick: true, }); } - - dispatch(addNewTransactionThunk(details)); + try { + const result = await dispatch(addNewTransactionThunk(details)).unwrap(); + // console.log(result); + if (result) { + return toast.success('Транзакція успішно додана', { + autoClose: 1000, + position: 'top-center', + closeOnClick: true, + }); + } + } catch (error) { + toast.error('Увага! Сума транзакції перевищує суму балансу!', { + autoClose: 1000, + position: 'top-center', + closeOnClick: true, + }); + } dispatch(summaryThunk(obj)); - - toast.success('Транзакція успішно додана', { - autoClose: 1000, - position: 'top-center', - closeOnClick: true, - }); resetInput(); + + // console.log(result.then(res => res)); + // try { + // if (!transErr) + // toast.success('Транзакція успішно додана', { + // autoClose: 1000, + // position: 'top-center', + // closeOnClick: true, + // }); + // } catch { + // console.log('catch'); + // toast.error( + // 'Транзакція не додана. Сума транзакції перевищує суму балансу!', + // { + // autoClose: 1000, + // position: 'top-center', + // closeOnClick: true, + // }, + // ); + // } + // if (payload?.response?.status === 400) { + // return toast.error( + // 'Транзакція не додана. Сума транзакції перевищує суму балансу!', + // { + // autoClose: 1000, + // position: 'top-center', + // closeOnClick: true, + // }, + // ); + // } + + // toast.success('Транзакція успішно додана', { + // autoClose: 1000, + // position: 'top-center', + // closeOnClick: true, + // }); }; + const details = { description: productName, category: category.value, diff --git a/src/redux/balance/slice.js b/src/redux/balance/slice.js index 4ea3ae5..c0a1b15 100644 --- a/src/redux/balance/slice.js +++ b/src/redux/balance/slice.js @@ -1,6 +1,9 @@ import { createSlice } from '@reduxjs/toolkit'; import { addBalanceThunk, getBalanceThunk } from './thunk'; -import { delTransactionThunk, addNewTransactionThunk } from '../transactions/thunk'; +import { + delTransactionThunk, + addNewTransactionThunk, +} from '../transactions/thunk'; const initialStateBalance = { value: null, @@ -48,17 +51,21 @@ const balanceSlice = createSlice({ state.isLoading = false; state.error = action.payload; }, + [addNewTransactionThunk.pending]: (state, _) => { state.isLoading = true; }, [addNewTransactionThunk.fulfilled]: (state, action) => { + // console.log('b', action); + state.value = action.payload.balance; state.isLoading = false; state.error = null; }, [addNewTransactionThunk.rejected]: (state, action) => { state.isLoading = false; - state.error = action.payload; + // console.log('b-err', action); + state.error = action.payload.response.data; }, }, }); diff --git a/src/redux/store.js b/src/redux/store.js index 57e5ba1..c482821 100644 --- a/src/redux/store.js +++ b/src/redux/store.js @@ -8,6 +8,7 @@ import { PURGE, REGISTER, } from 'redux-persist'; + import storage from 'redux-persist/lib/storage'; import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit'; @@ -24,13 +25,13 @@ const authPersistConfig = { }; const authPersistReducer = persistReducer(authPersistConfig, authReducer); -const middleware = [ - ...getDefaultMiddleware({ - serializableCheck: { - ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER], - }, - }), -]; +// const middleware = [ +// ...getDefaultMiddleware({ +// serializableCheck: { +// ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER], +// }, +// }), +// ]; const store = configureStore({ reducer: { @@ -42,7 +43,9 @@ const store = configureStore({ summary: summarySlice, }, - middleware, + middleware: getDefaultMiddleware({ + serializableCheck: false, + }), devTools: process.env.NODE_ENV === 'development', }); diff --git a/src/redux/transactions/slice.js b/src/redux/transactions/slice.js index c099223..4ecd942 100644 --- a/src/redux/transactions/slice.js +++ b/src/redux/transactions/slice.js @@ -1,5 +1,9 @@ -import { createSlice } from "@reduxjs/toolkit"; -import { getTransactionsThunk, addNewTransactionThunk , delTransactionThunk} from "./thunk"; +import { createSlice } from '@reduxjs/toolkit'; +import { + getTransactionsThunk, + addNewTransactionThunk, + delTransactionThunk, +} from './thunk'; const initialStateTransactions = { data: [], @@ -33,7 +37,7 @@ const transactionsSlice = createSlice({ }, [addNewTransactionThunk.rejected]: (state, action) => { state.isLoading = false; - state.error = action.payload; + state.error = action.payload.response.data; }, [delTransactionThunk.pending]: (state, _) => { state.isLoading = true; @@ -50,4 +54,4 @@ const transactionsSlice = createSlice({ }, }); -export default transactionsSlice.reducer; \ No newline at end of file +export default transactionsSlice.reducer; diff --git a/src/redux/transactions/thunk.js b/src/redux/transactions/thunk.js index 1af1351..0338cb8 100644 --- a/src/redux/transactions/thunk.js +++ b/src/redux/transactions/thunk.js @@ -8,11 +8,17 @@ import { export const addNewTransactionThunk = createAsyncThunk( 'transactions/addNewTransactionThunk', async (transaction, { rejectWithValue }) => { + // console.log(1); try { + // console.log(2); const { data } = await addTransaction(transaction); + + // console.log('до ерр', data); return data.data; } catch (error) { - rejectWithValue(error); + // console.log(3); + // console.log(rejectWithValue(error)); + return rejectWithValue(error); } }, ); @@ -22,7 +28,7 @@ export const getTransactionsThunk = createAsyncThunk( async (_, { rejectWithValue }) => { try { const { data } = await getTransactions(); - return data.data + return data.data; } catch (error) { rejectWithValue(error); } @@ -34,10 +40,9 @@ export const delTransactionThunk = createAsyncThunk( async (id, { rejectWithValue }) => { try { const { data } = await delTransaction(id); - return data.data + return data.data; } catch (error) { rejectWithValue(error); } }, ); - diff --git a/src/redux/transactions/transactionsSelectors.js b/src/redux/transactions/transactionsSelectors.js index d1c56e9..711d71e 100644 --- a/src/redux/transactions/transactionsSelectors.js +++ b/src/redux/transactions/transactionsSelectors.js @@ -1,2 +1,3 @@ -export const getTransactions = state => state.transactions.data +export const getTransactions = state => state.transactions.data; +export const getTransErr = state => state.transactions.error;