Bugfix transactions

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 }) => {

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,

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;
     },
   },
 });

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',
 });
 

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;
+export default transactionsSlice.reducer;

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);
     }
   },
 );
-

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;