Merge branch 'dev' of https://github.com/AnnaTsepilova/yummy-app-front …

…into dev
AnnaTsepilova · Jul 10, 2024 · 0768214 · 0768214
2 parents cd5ff69 + ea1ffcd
commit 0768214
Show file tree

Hide file tree

Showing 10 changed files with 56 additions and 51 deletions.
diff --git a/src/components/AddRecipeForm/AddRecipeForm.jsx b/src/components/AddRecipeForm/AddRecipeForm.jsx
@@ -133,22 +133,22 @@ const AddRecipeForm = () => {
   };
 
   const handleOnSubmit = async () => {
-    console.log('AddRecipeForm');
-    const newUrl = await addRecipeImg(imgData);
-
-    const recipeItem = {
-      title: itemTitleRecipe,
-      description: aboutRecipe,
-      recipeImage: newUrl,
-      category: category.value,
-      cockingTime: cookingTimeRecipe.value,
-      ingredients: userIngredientsList.map(e => {
-        return { [`${e.id}`]: `${e.unitCount} ${e.unit}` };
-      }),
-      preparation: recipePreparation,
-    };
-
     try {
+      let newUrl = '';
+      if (imgData) {
+        newUrl = await addRecipeImg(imgData);
+      }
+      const recipeItem = {
+        title: itemTitleRecipe,
+        description: aboutRecipe,
+        recipeImage: newUrl,
+        category: category.value,
+        cockingTime: cookingTimeRecipe.value,
+        ingredients: userIngredientsList.map(e => {
+         return { [`${e.id}`]: `${e.unitCount} ${e.unit}` };
+        }),
+        preparation: recipePreparation,
+      };
       addRecipe(recipeItem).then(() => {
         Notify.success('Recipe was added to database.', {
           fontSize: '16px',

diff --git a/src/components/MyRecipesList/MyRecipesItem/MyRecipesItem.jsx b/src/components/MyRecipesList/MyRecipesItem/MyRecipesItem.jsx
@@ -12,16 +12,18 @@ import {
   RecipeImg,
   RecipeSubtitle,
 } from './MyRecipeItem.styled';
-import { Link } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 import { StyledNotFoundImg } from './MyRecipeItem.styled';
-import { selectFavoriteRecipes } from 'redux/userRecipes/userRecipesSelectors';
-import { getFavoriteRecipes } from 'redux/userRecipes/userRecipesOperations';
+import { selectFavoriteRecipes, selectMyRecipes } from 'redux/userRecipes/userRecipesSelectors';
+import { getFavoriteRecipes, getMyRecipe } from 'redux/userRecipes/userRecipesOperations';
 
 const MyRecipesItem = ({ data, btnStyle, removeFnc, change, page }) => {
   const { _id, title, description, preview, time } = data;
   const dispatch = useDispatch();
   const recipes = useSelector(selectFavoriteRecipes);
+  const myrecipes = useSelector(selectMyRecipes);
+  const { pathname } = useLocation();
   return (
     <Item>
       <ImgWrapper>
@@ -43,11 +45,11 @@ const MyRecipesItem = ({ data, btnStyle, removeFnc, change, page }) => {
         </RecipeBtn>
         <DeleteBtn view={btnStyle} onClick={async () => {
           await dispatch(removeFnc(_id))
-          if (recipes.length === 1) {
+          if (recipes.length === 1 || myrecipes.length === 1) {
             if (page > 1) {
               change(prev => prev - 1);
             } else {
-              dispatch(getFavoriteRecipes(1));
+              pathname === '/my' ? dispatch(getMyRecipe(1)) : dispatch(getFavoriteRecipes(1));
             }
           }
         }}>

diff --git a/src/components/PopularRecipe/PopularRecipe.style.js b/src/components/PopularRecipe/PopularRecipe.style.js
@@ -45,13 +45,13 @@ export const TitleStyled = styled.h3`
 `;
 
 export const PopularRecipeItem = styled.li`
-  /* display: flex;
+  display: flex;
   padding-bottom: 13px;
 
   width: 343px;
   height: auto;
 
-  border-bottom: 1px solid rgba(112, 112, 112, 0.17);
+  /* border-bottom: 1px solid rgba(112, 112, 112, 0.17); */
 
   &:not(:first-child) {
     margin-top: 24px;
@@ -69,7 +69,7 @@ export const PopularRecipeItem = styled.li`
     &:not(:first-child) {
       margin-top: 24px;
     }
-  } */
+  }
 `;
 
 export const LinkStyled = styled(Link)`

diff --git a/src/components/RecipeDescriptionFields/RecipeDescriptionFields.jsx b/src/components/RecipeDescriptionFields/RecipeDescriptionFields.jsx
@@ -60,7 +60,6 @@ const RecipeDescriptionFields = ({
             name="image"
             type="file"
             onChange={handleOnImgSelect}
-            required
           ></ImageInput>
         </ImgLabel>
         <WrapperFieldsInput>

diff --git a/src/components/RecipeInngredientsList/CheckBox/CheckBox.jsx b/src/components/RecipeInngredientsList/CheckBox/CheckBox.jsx
@@ -1,4 +1,4 @@
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 
 import {
   Box,
@@ -12,17 +12,27 @@ import * as ReactDOMServer from 'react-dom/server';
 import { Notify } from 'notiflix';
 import { useState } from 'react';
 import ButtonLoader from 'components/RecipePageHero/RecipeHeroContent/ButtonLoader/ButtonLoader';
+import { selectShoppingList } from 'redux/userRecipes/userRecipesSelectors';
 
-const CustomCheckbox = ({ recipeId, ingredientId, measure, isChecked }) => {
-  const elem = document.getElementById(ingredientId);
-  const elem1 = document.getElementById(measure);
+const CustomCheckbox = ({ recipeId, ingredientId, measure, ttl }) => {
+  const shoppingList = useSelector(selectShoppingList);
+  const checkFunc = () => {
+    const recipesId = shoppingList
+      ?.filter(item => item.id === ingredientId)
+      .flatMap(item => item.recipesId);
+    if (recipesId.includes(recipeId)) {
+      return true;
+    }
+    return false;
+  };
   const [check, setCheck] = useState(false);
-  const [check1, setCheck1] = useState(false);
   const dispatch = useDispatch();
   const handleChange = async e => {
-    if (check || check1) return;
-    if (isChecked) {
-      setCheck1(true);
+    const elem = document.getElementById(ingredientId);
+    const elem1 = document.getElementById(ingredientId + ttl);
+    if (check) return;
+    if (checkFunc()) {
+      setCheck(true);
       if (elem1) {
         elem1.innerHTML = '';
       }
@@ -35,15 +45,15 @@ const CustomCheckbox = ({ recipeId, ingredientId, measure, isChecked }) => {
         <ButtonLoader color="var(--primary-green)" width={333} />
       );
 
-      elem.insertAdjacentHTML('beforeend', buttonLoaderHtml);
+      elem?.insertAdjacentHTML('beforeend', buttonLoaderHtml);
       const arr = [];
       const reqObj = {};
       reqObj['measure'] = measure;
       reqObj['ingredientId'] = ingredientId;
       arr.push(reqObj, recipeId);
       await dispatch(removeFromShoppingList(arr));
-      elem.removeChild(elem.lastChild);
-      return setCheck1(false);
+      elem?.removeChild(elem.lastChild);
+      return setCheck(false);
     }
     setCheck(true);
     const buttonLoaderHtml = ReactDOMServer.renderToStaticMarkup(
@@ -65,9 +75,9 @@ const CustomCheckbox = ({ recipeId, ingredientId, measure, isChecked }) => {
   };
   return (
     <Box id={ingredientId} onClick={handleChange}>
-      {isChecked && (
+      {checkFunc() && (
         <Svg
-          id={measure}
+          id={ingredientId + ttl}
           viewBox="0 0 17 17"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"

diff --git a/src/components/RecipeInngredientsList/RecipeInngredientsList.jsx b/src/components/RecipeInngredientsList/RecipeInngredientsList.jsx
@@ -14,12 +14,11 @@ import {
   Title,
 } from 'components/RecipeInngredientsList/RecipeInngredientsList.styled';
 import CustomCheckbox from 'components/RecipeInngredientsList/CheckBox/CheckBox';
-import { selectRecipe, selectShoppingList } from 'redux/userRecipes/userRecipesSelectors';
+import { selectRecipe } from 'redux/userRecipes/userRecipesSelectors';
 import { ReactComponent as DefaultImage } from 'images/Plugs/image.svg';
 
 const RecipeInngredientsList = ({ ingredients, recipeId }) => {
   const list = useSelector(selectRecipe); // eslint-disable-line
-  const shoppingList = useSelector(selectShoppingList);
   return (
     <Box>
       <ListHeader>
@@ -30,12 +29,10 @@ const RecipeInngredientsList = ({ ingredients, recipeId }) => {
         </div>
       </ListHeader>
       <List>
-        {ingredients?.map(({ _id, ttl, desc, thb, measure }) => {
-          const isChecked = shoppingList?.filter(item => item.id === _id).flatMap(item => item.recipesId).includes(recipeId);
+        {ingredients?.map(({ _id, ttl, thb, measure }) => {
           if (!_id) {
             return null;
           }
-
           return (
             <ListItem key={_id}>
               <Wrapper>
@@ -52,7 +49,7 @@ const RecipeInngredientsList = ({ ingredients, recipeId }) => {
                   recipeId={recipeId}
                   ingredientId={_id}
                   measure={measure}
-                  isChecked={isChecked}
+                  ttl={ttl}
                 />
               </ButtonWrapper>
             </ListItem>

diff --git a/src/pages/MyRecipesPage/MyRecipesPage.jsx b/src/pages/MyRecipesPage/MyRecipesPage.jsx
@@ -20,7 +20,6 @@ const MyRecipesPage = () => {
   const recipes = useSelector(selectMyRecipes);
   const isLoading = useSelector(selectIsLoading);
   const totalMyRecipes = useSelector(selectTotalMyRecipes);
-
   const [page, setPage] = useState(1);
   const perPage = 4;
   const count = Math.ceil(totalMyRecipes / perPage);
@@ -41,7 +40,7 @@ const MyRecipesPage = () => {
       {isLoading ? (
         <Loader />
       ) : (
-        <MyRecipesList items={recipes} removeFnc={removeMyRecipe} />
+        <MyRecipesList items={recipes} change={setPage} page={page} removeFnc={removeMyRecipe} />
       )}
 
       {count > 1 && (

diff --git a/src/redux/userRecipes/userRecipesOperations.js b/src/redux/userRecipes/userRecipesOperations.js
@@ -143,11 +143,10 @@ export const getMyRecipe = createAsyncThunk(
 
 export const removeMyRecipe = createAsyncThunk(
   'userRecipes/removeMyRecipes',
-  async (id, { rejectWithValue, dispatch }) => {
+  async (id, { rejectWithValue }) => {
     try {
       const data = await removeMyRecipeAPI(id);
-      await dispatch(getMyRecipe());
-      return data.id;
+      return data;
     } catch (error) {
       return rejectWithValue(error.response.status);
     }

diff --git a/src/redux/userRecipes/userRecipesSlice.js b/src/redux/userRecipes/userRecipesSlice.js
@@ -76,7 +76,7 @@ const userRecipesSlice = createSlice({
       })
       .addCase(getMyRecipe.rejected, rejected)
       .addCase(removeMyRecipe.fulfilled, (state, { payload }) => {
-        const index = state.myRecipes.findIndex(item => item.id === payload);
+        const index = state.myRecipes.findIndex(item => item._id === payload);
         state.myRecipes.splice(index, 1);
         state.isLoading = false;
       })
@@ -101,7 +101,6 @@ const userRecipesSlice = createSlice({
         state.isLoading = true;
       })
       .addCase(removeFromShoppingList.fulfilled, (state, { payload }) => {
-        console.log(payload);
         state.shoppingList = payload.shoppingList;
         state.isLoading = false;
         state.error = null;

diff --git a/src/service/API/userRecipesAPI.js b/src/service/API/userRecipesAPI.js
@@ -73,7 +73,7 @@ export const getShoppingList = async () => {
 
 export const removeMyRecipeAPI = id => {
   return axios.delete(`/ownRecipes/${id}`).then(({ data }) => {
-    return data;
+    return data._id;
   });
 };