Merge pull request #168 from AnnaTsepilova/bugfix/shoping-listt

end
AnnaTsepilova · Apr 20, 2023 · ea1ffcd · ea1ffcd
2 parents 4a10aab + 50c2088
commit ea1ffcd
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 20 deletions.
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/redux/userRecipes/userRecipesSlice.js b/src/redux/userRecipes/userRecipesSlice.js
@@ -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;