Merge pull request #133 from VasylievYurii/Fix/modal-products-closing…

…-both Fix open and close product modal
VasylievYurii · Nov 19, 2023 · 345f911 · 345f911
2 parents a79d6a8 + 2c414a7
commit 345f911
Show file tree

Hide file tree

Showing 7 changed files with 77 additions and 60 deletions.
diff --git a/src/components/AddExerciseForm/AddExerciseForm.jsx b/src/components/AddExerciseForm/AddExerciseForm.jsx
@@ -12,16 +12,14 @@ 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';
 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 (
     <Container>
-
       <Gif src={gifUrl} alt={name} />
 
       <Title>Time</Title>
 
       <TimerWrapper>
-
         <Timer
         // data={data}
         // setDinamicBurnCal={setDinamicBurnCal}

diff --git a/src/components/AddProductForm/AddProductForm.jsx b/src/components/AddProductForm/AddProductForm.jsx
@@ -19,29 +19,26 @@ import {
 } from './AddProductForm.styled';
 import { useDispatch, useSelector } from 'react-redux';
 import { postDiaryMealsThunk } from '../../redux/meals/mealsOperations';
-import { selectIsMealAdd } from '../../redux/selectors';
-import AddProductSuccess from '../AddProductSuccess/AddProductSuccess';
-import BasicModalWindow from '../BasicModalWindow/BasicModalWindow';
 import { ToastContainer } from 'react-toastify';
 
-const AddProductForm = ({ id, title, calories, onClick }) => {
+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 (
     <>
       <ToastContainer />
-      {showModal && (
-        <BasicModalWindow onClick={toggleModal}>
-          <AddProductSuccess
-            closeAllModal={closeAllModal}
-            calories={calculatedCalories}
-            onClick={toggleModal}
-          />
-        </BasicModalWindow>
-      )}
+
       <Formik
         initialValues={initialValues}
         validationSchema={schema}

diff --git a/src/components/AddProductSuccess/AddProductSuccess.jsx b/src/components/AddProductSuccess/AddProductSuccess.jsx
@@ -8,16 +8,20 @@ import {
   ToTheDairy,
 } from './AddProductSuccess.styled';
 import avocado from '../../assets/avocado.png';
+import { useSelector } from 'react-redux';
+import { selectIsMealAdd } from '../../redux/selectors';
+
+const AddProductSuccess = ({ onClick }) => {
+  const isMealAdd = useSelector(selectIsMealAdd);
 
-const AddProductSuccess = ({ closeAllModal, calories }) => {
   return (
     <ProductForm>
       <ImgProduct src={avocado} alt="avocado" loading="lazy" />
       <Title>Well done</Title>
       <Calories>
-        Calories: <span>{calories}</span>
+        Calories: <span>{isMealAdd?.calories}</span>
       </Calories>
-      <Next type="button" onClick={() => closeAllModal()}>
+      <Next type="button" onClick={() => onClick()}>
         Next product
       </Next>
       <ToTheDairy to="/diary">

diff --git 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 (
     <ProductItemContainer key={id}>
-      {showModal && <BasicModalWindow onClick={toggleModal} >
-        <AddProductForm id={id} title={title} calories={calories} onClick={toggleModal} />
-      </BasicModalWindow>}
+      {showModal && (
+        <BasicModalWindow onClick={toggleModal}>
+          <AddProductForm
+            id={id}
+            title={title}
+            calories={calories}
+            onClick={toggleModal}
+            onClickSuccess={handleToggleSuccessModal}
+          />
+        </BasicModalWindow>
+      )}
+      {showModalSuccess && (
+        <BasicModalWindow onClick={handleToggleSuccessModal}>
+          <AddProductSuccess onClick={handleToggleSuccessModal} />
+        </BasicModalWindow>
+      )}
       <section>
         <TopLineWrapper>
           <LeftTopLabelWrapper>

diff --git 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
@@ -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
@@ -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)