Merge pull request #123 from VasylievYurii/AddMealModal2

Add meal modal2

src/components/AddProductForm/AddProductForm.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Formik, Form, ErrorMessage } from 'formik';
 import * as Yup from 'yup';
 import { format } from 'date-fns';
@@ -17,11 +17,32 @@ import {
   WeightInputLabel,
   // WeightInputLabel,
 } from './AddProductForm.styled';
-import { useDispatch } from 'react-redux';
+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 [calculatedCalories, setCalculatedCalories] = useState(0);
+  const isMealAdd = useSelector(selectIsMealAdd);
+  const [showModal, setShowModal] = useState(false);
+
+    useEffect(() => {
+      if (isMealAdd) {
+            toggleModal();
+        }
+    }, [isMealAdd]);
+
+  const closeAllModal = () => {
+    onClick()
+  };
+
+  const toggleModal = () => {
+    setShowModal((prevState) => !prevState);
+  };
 
   const dispatch = useDispatch();
 
@@ -54,18 +75,23 @@ const AddProductForm = ({ id, title, calories, onClick }) => {
 
   const handleSubmit = (values, actions) => {
     console.log(values);
-    delete values.calories;
-    console.log(values);
-    dispatch(postDiaryMealsThunk(values));
 
-    // handleCloseClick();
+    dispatch(postDiaryMealsThunk(values));
+        actions.resetForm();
+    setCalculatedCalories(0);
   };
 
+
   const handleCloseClick = () => {
     onClick();
   };
 
   return (
+    <>
+            <ToastContainer />
+    {showModal && <BasicModalWindow onClick={toggleModal} >
+        <AddProductSuccess closeAllModal={closeAllModal} calories={calculatedCalories} onClick={toggleModal} />
+      </BasicModalWindow>}
     <Formik
       initialValues={initialValues}
       validationSchema={schema}
@@ -111,7 +137,9 @@ const AddProductForm = ({ id, title, calories, onClick }) => {
             </Calories>
 
             <ButtonsContainer>
-              <PFPrimaryBtn type="submit" onClick={handleSubmit}>
+                <PFPrimaryBtn type="submit"
+                  // onClick={handleSubmit}
+                >
                 Add to diary
               </PFPrimaryBtn>
               <PFOutlinedBtn type="button" onClick={handleCloseClick}>
@@ -121,7 +149,8 @@ const AddProductForm = ({ id, title, calories, onClick }) => {
           </Container>
         </Form>
       )}
-    </Formik>
+      </Formik>
+      </>
   );
 };
 

src/components/AddProductSuccess/AddProductSuccess.jsx

@@ -7,20 +7,18 @@ import {
   Next,
   ToTheDairy,
 } from './AddProductSuccess.styled';
+import avocado from '../../assets/avocado.png';
 
-const AddProductSuccess = ({ calories, onClick }) => {
-  const handleCloseClick = () => {
-    onClick();
-  };
+const AddProductSuccess = ({ closeAllModal, calories }) => {
 
   return (
     <ProductForm>
-      <ImgProduct src="" alt="" />
+      <ImgProduct src={avocado} alt="avocado" loading="lazy"/>
       <Title>Well done</Title>
       <Calories>
         Calories: <span>{calories}</span>
       </Calories>
-      <Next type="button" onClick={handleCloseClick}>
+      <Next type="button" onClick={() => closeAllModal()}>
         Next product
       </Next>
       <ToTheDairy to="/diary">

src/components/AddProductSuccess/AddProductSuccess.styled.js

@@ -11,6 +11,8 @@ export const ProductForm = styled.div`
 export const ImgProduct = styled.img`
   width: 123px;
   height: 84px;
+  margin-top: 48px;
+
 `;
 
 export const Title = styled.h2`

src/redux/meals/mealsOperations.js

@@ -5,7 +5,7 @@ import { instance } from '../auth/operations';
 
 const options = {
   position: 'top-center',
-  autoClose: 4000,
+  autoClose: 3000,
   hideProgressBar: false,
   closeOnClick: true,
   pauseOnHover: true,
@@ -45,6 +45,7 @@ const delMeal = async (mealId, thunkAPI) => {
 
 const postMeal = async (currentProduct, thunkAPI) => {
   try {
+    delete currentProduct.calories;
     const response = await instance.post(`diaries/meals`, currentProduct);
     return response.data;
   } catch (e) {

src/redux/meals/mealsSlice.js

@@ -5,16 +5,19 @@ const mealInitialState = {
     isLoading: false,
     error: null,
     meals: [],
+    isMealAdd: false,
 };
 
 const onPending = (state) => {
     state.isLoading = true;
     state.error = null;
+    state.isMealAdd = false;
 };
 
 const onRejected = (state, { payload }) => {
     state.isLoading = false;
     state.error = payload;
+    state.isMealAdd = false;
 };
 
 const arrOfActs = [getDiaryMealsThunk, delDiaryMealsThunk, postDiaryMealsThunk];
@@ -38,10 +41,9 @@ export const diarySlice = createSlice({
                 state.error = null;
             })
             .addCase(postDiaryMealsThunk.fulfilled, (state, { payload }) => {
-                console.log('payload', payload);
                 state.isLoading = false;
-                // state.meals.push(payload);
                 state.error = null;
+                state.isMealAdd = true;
             })
             .addMatcher(isAnyOf(...addStatusToActs('pending')), onPending)
             .addMatcher(isAnyOf(...addStatusToActs('rejected')), onRejected)

src/redux/selectors.js

@@ -18,6 +18,7 @@ export const selectOneWorkout = (state) => state.workouts.oneWorkout;
 export const selectMeals = (state) => state.meals.meals;
 export const selectMealsIsLoading = (state) => state.meals.isLoading;
 export const selectMealsError = (state) => state.meals.error;
+export const selectIsMealAdd = (state) => state.meals.isMealAdd;
 
 // =========== P R O D U C T S ==================