From 7f12d217b0d72183e026ff63593ce318ec9fd51f Mon Sep 17 00:00:00 2001 From: Mykola Stotskyi Date: Wed, 23 Feb 2022 23:36:42 +0200 Subject: [PATCH 1/4] upd --- src/components/InputTable/InputTable.js | 70 ++++++++++++++++--- src/redux/balance/slice.js | 11 ++- src/redux/transactions/slice.js | 12 ++-- src/redux/transactions/thunk.js | 13 ++-- .../transactions/transactionsSelectors.js | 3 +- 5 files changed, 89 insertions(+), 20 deletions(-) diff --git a/src/components/InputTable/InputTable.js b/src/components/InputTable/InputTable.js index df1fd97..f81cbc4 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,6 +79,25 @@ 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]); @@ -106,15 +126,47 @@ const InputTable = ({ options, income, onClick }) => { } dispatch(addNewTransactionThunk(details)); - dispatch(summaryThunk(obj)); - toast.success('Транзакція успішно додана', { - autoClose: 1000, - position: 'top-center', - closeOnClick: true, - }); + dispatch(summaryThunk(obj)); 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..48cf9a4 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/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..16c8342 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; From 6b0a711bb83e6ab383dcb94d67ca904ca093f857 Mon Sep 17 00:00:00 2001 From: Mykola Stotskyi Date: Thu, 24 Feb 2022 01:21:00 +0200 Subject: [PATCH 2/4] fixed* MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit фікс нотифікації при спробі зробити транзакцію на суму, що перевищує баланс, але потрібен фікс мідлвари (A non-serializable value was detected in an action, in the path:), як варіант відключив перевірку: serializableCheck: false --- .../ChartBarExpInc/ChartBarExpInc.js | 2 +- src/components/InputTable/InputTable.js | 58 ++++++++++++------- src/redux/balance/slice.js | 4 +- src/redux/store.js | 19 +++--- src/redux/transactions/thunk.js | 10 ++-- src/services/index.js | 3 +- 6 files changed, 57 insertions(+), 39 deletions(-) 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 f81cbc4..389f7ef 100644 --- a/src/components/InputTable/InputTable.js +++ b/src/components/InputTable/InputTable.js @@ -79,30 +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]); + // 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, @@ -124,9 +124,23 @@ 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)); resetInput(); diff --git a/src/redux/balance/slice.js b/src/redux/balance/slice.js index 48cf9a4..c0a1b15 100644 --- a/src/redux/balance/slice.js +++ b/src/redux/balance/slice.js @@ -56,7 +56,7 @@ const balanceSlice = createSlice({ state.isLoading = true; }, [addNewTransactionThunk.fulfilled]: (state, action) => { - console.log('b', action); + // console.log('b', action); state.value = action.payload.balance; state.isLoading = false; @@ -64,7 +64,7 @@ const balanceSlice = createSlice({ }, [addNewTransactionThunk.rejected]: (state, action) => { state.isLoading = false; - console.log('b-err', action); + // 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/thunk.js b/src/redux/transactions/thunk.js index 16c8342..0338cb8 100644 --- a/src/redux/transactions/thunk.js +++ b/src/redux/transactions/thunk.js @@ -8,16 +8,16 @@ import { export const addNewTransactionThunk = createAsyncThunk( 'transactions/addNewTransactionThunk', async (transaction, { rejectWithValue }) => { - console.log(1); + // console.log(1); try { - console.log(2); + // console.log(2); const { data } = await addTransaction(transaction); - console.log('до ерр', data); + // console.log('до ерр', data); return data.data; } catch (error) { - console.log(3); - console.log(rejectWithValue(error)); + // console.log(3); + // console.log(rejectWithValue(error)); return rejectWithValue(error); } }, diff --git a/src/services/index.js b/src/services/index.js index e0d8e59..83eaab3 100644 --- a/src/services/index.js +++ b/src/services/index.js @@ -1,6 +1,7 @@ import axios from 'axios'; -const BASE_USER_URL = 'https://kapusta-magic8.herokuapp.com/'; +// const BASE_USER_URL = 'https://kapusta-magic8.herokuapp.com/'; +const BASE_USER_URL = 'http://localhost:5000/'; axios.defaults.baseURL = BASE_USER_URL; From 8409169b5b1bf175c0f55f7450cbdc49be028b99 Mon Sep 17 00:00:00 2001 From: Mykola Stotskyi Date: Thu, 24 Feb 2022 01:23:03 +0200 Subject: [PATCH 3/4] Update index.js --- src/services/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/services/index.js b/src/services/index.js index 83eaab3..4f1ae60 100644 --- a/src/services/index.js +++ b/src/services/index.js @@ -1,7 +1,7 @@ import axios from 'axios'; -// const BASE_USER_URL = 'https://kapusta-magic8.herokuapp.com/'; -const BASE_USER_URL = 'http://localhost:5000/'; +const BASE_USER_URL = 'https://kapusta-magic8.herokuapp.com/'; +// const BASE_USER_URL = 'http://localhost:5000/'; axios.defaults.baseURL = BASE_USER_URL; From 48ce32a50b54b8d624cd7f8967c123ccb6181d9e Mon Sep 17 00:00:00 2001 From: Mykola Stotskyi Date: Thu, 24 Feb 2022 01:23:34 +0200 Subject: [PATCH 4/4] Update index.js --- src/services/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/services/index.js b/src/services/index.js index 4f1ae60..e0d8e59 100644 --- a/src/services/index.js +++ b/src/services/index.js @@ -1,7 +1,6 @@ import axios from 'axios'; const BASE_USER_URL = 'https://kapusta-magic8.herokuapp.com/'; -// const BASE_USER_URL = 'http://localhost:5000/'; axios.defaults.baseURL = BASE_USER_URL;