diff --git a/src/components/AddExerciseForm/AddExerciseForm.jsx b/src/components/AddExerciseForm/AddExerciseForm.jsx index 76e27520..ffee0e44 100644 --- a/src/components/AddExerciseForm/AddExerciseForm.jsx +++ b/src/components/AddExerciseForm/AddExerciseForm.jsx @@ -12,7 +12,7 @@ import { } from './AddExerciseForm.styled'; import Timer from '../Timer/Timer'; -import { getUserParams } from '../../redux/auth/operations'; +// import { getUserParams } from '../../redux/auth/operations'; import { useDispatch } from 'react-redux'; import { useEffect, useState } from 'react'; import { toast } from 'react-toastify'; @@ -20,8 +20,6 @@ import { addWorkout } from '../../redux/workouts/workoutsOperations'; // import { selectOneWorkout } from '../../redux/selectors'; // import { useSelector } from 'react-redux'; - - export const AddExerciseForm = ({ onClick, exeId, @@ -54,13 +52,11 @@ export const AddExerciseForm = ({ return ( - Time - { +const AddProductForm = ({ id, title, calories, onClick, onClickSuccess }) => { const [calculatedCalories, setCalculatedCalories] = useState(0); - const isMealAdd = useSelector(selectIsMealAdd); - const [showModal, setShowModal] = useState(false); - useEffect(() => { - if (isMealAdd) { - toggleModal(); - } - }, [isMealAdd]); + // const [showModal, setShowModal] = useState(false); - const closeAllModal = () => { - onClick(); - }; + // useEffect(() => { + // if (isMealAdd) { + // toggleModal(); + // } + // }, [isMealAdd]); - const toggleModal = () => { - setShowModal((prevState) => !prevState); - }; + // const closeAllModal = () => { + // onClick(); + // }; + + // const toggleModal = () => { + // setShowModal((prevState) => !prevState); + // }; const dispatch = useDispatch(); @@ -73,9 +70,11 @@ const AddProductForm = ({ id, title, calories, onClick }) => { }; const handleSubmit = (values, actions) => { + onClickSuccess(); dispatch(postDiaryMealsThunk(values)); actions.resetForm(); - // setCalculatedCalories(0); + + onClick(); }; const handleCloseClick = () => { @@ -85,15 +84,7 @@ const AddProductForm = ({ id, title, calories, onClick }) => { return ( <> - {showModal && ( - - - - )} + { + const isMealAdd = useSelector(selectIsMealAdd); -const AddProductSuccess = ({ closeAllModal, calories }) => { return ( Well done - Calories: {calories} + Calories: {isMealAdd?.calories} - closeAllModal()}> + onClick()}> Next product diff --git a/src/components/ProductsItem/ProductsItem.jsx b/src/components/ProductsItem/ProductsItem.jsx index c86d5aa0..b0ad3252 100644 --- a/src/components/ProductsItem/ProductsItem.jsx +++ b/src/components/ProductsItem/ProductsItem.jsx @@ -2,6 +2,7 @@ import { useState } from 'react'; import sprite from '../../assets/sprite.svg'; import BasicModalWindow from '../BasicModalWindow/BasicModalWindow'; import AddProductForm from '../AddProductForm/AddProductForm'; +import AddProductSuccess from '../AddProductSuccess/AddProductSuccess'; import { ProductItemContainer, TopLineWrapper, @@ -14,18 +15,43 @@ import { CategoryWrapper, } from './ProductsItem.styled'; -const ProductsItem = ({ id, title, calories, category, weight, recommended }) => { +const ProductsItem = ({ + id, + title, + calories, + category, + weight, + recommended, +}) => { const [showModal, setShowModal] = useState(false); + const [showModalSuccess, setShowModalSuccess] = useState(false); const toggleModal = () => { setShowModal((prevState) => !prevState); }; + const handleToggleSuccessModal = () => { + setShowModalSuccess((prevState) => !prevState); + }; + return ( - {showModal && - - } + {showModal && ( + + + + )} + {showModalSuccess && ( + + + + )}
diff --git a/src/redux/auth/authSlice.js b/src/redux/auth/authSlice.js index 8e08551a..3cfdf1f4 100644 --- a/src/redux/auth/authSlice.js +++ b/src/redux/auth/authSlice.js @@ -73,7 +73,7 @@ const authSlice = createSlice({ state.isRefreshing = false; state.error = null; }) - .addCase(refreshUser.pending, (state, action) => { + .addCase(refreshUser.pending, (state) => { state.isRefreshing = true; }) .addMatcher( diff --git a/src/redux/auth/operations.js b/src/redux/auth/operations.js index 0ce37834..1be71b6f 100644 --- a/src/redux/auth/operations.js +++ b/src/redux/auth/operations.js @@ -130,21 +130,21 @@ export const updateAvatar = createAsyncThunk( ); -export const getUserParams = createAsyncThunk( - 'auth/getparams', - async (_, thunkAPI) => { - const state = thunkAPI.getState(); - const persistedToken = state.auth.token; - - if (persistedToken === null) { - return thunkAPI.rejectWithValue('Unable to fetch user'); - } - - try { - const res = await axios.get('/api/auth/getuser'); - return res.data; - } catch (error) { - return thunkAPI.rejectWithValue(error.message); - } - }, -); +// export const getUserParams = createAsyncThunk( +// 'auth/getparams', +// async (_, thunkAPI) => { +// const state = thunkAPI.getState(); +// const persistedToken = state.auth.token; + +// if (persistedToken === null) { +// return thunkAPI.rejectWithValue('Unable to fetch user'); +// } + +// try { +// const res = await axios.get('/api/auth/getuser'); +// return res.data; +// } catch (error) { +// return thunkAPI.rejectWithValue(error.message); +// } +// }, +// ); diff --git a/src/redux/meals/mealsSlice.js b/src/redux/meals/mealsSlice.js index 7c36fd3d..f1f193ae 100644 --- a/src/redux/meals/mealsSlice.js +++ b/src/redux/meals/mealsSlice.js @@ -17,7 +17,7 @@ const onPending = (state) => { const onRejected = (state, { payload }) => { state.isLoading = false; state.error = payload; - state.isMealAdd = false; + state.isMealAdd = null; }; const arrOfActs = [getDiaryMealsThunk, delDiaryMealsThunk, postDiaryMealsThunk]; @@ -43,7 +43,7 @@ export const diarySlice = createSlice({ .addCase(postDiaryMealsThunk.fulfilled, (state, { payload }) => { state.isLoading = false; state.error = null; - state.isMealAdd = true; + state.isMealAdd = payload; }) .addMatcher(isAnyOf(...addStatusToActs('pending')), onPending) .addMatcher(isAnyOf(...addStatusToActs('rejected')), onRejected)