Stop obscuring deleted recipes in Generate Similar RecipeCardList

[rjwignar]

This fixes #205

This is the default onDelete prop passed to Recipe Cards when a RecipeCardList renders recipe cards:

AIChefBot/components/RecipeCardList.js

Lines 28 to 36 in ada5eb9

	// callback from RecipeCard, recipe is deleted from database, then:
	// filter out the deleted recipe, rerender the recipes array
	const handleOnDelete = (recipe) => {
	const updatedRecipes = savedRecipes.filter((e) => e._id !== recipe._id);
	setSavedRecipes(updatedRecipes);
	if (onUpdateAfterDelete) {
	onUpdateAfterDelete(updatedRecipes); // Call parent's update function
	}
	}

AIChefBot/components/RecipeCardList.js

Lines 54 to 60 in b8e28ee

	<RecipeCard
	recipe={recipe}
	onDelete={handleOnDelete}
	onSelect={(isSelected) => handleSelect(recipe, isSelected)}
	isSelected={selectedRecipes.some((r) => r._id === recipe._id)}
	isSelectable={isSelectable}
	/>

onHandleDelete() obscures deleted recipes from the RecipeCardList, so the onDelete prop is only used when on the /account/recipes.js:

AIChefBot/components/RecipeCard.js

Lines 110 to 116 in b8e28ee

	// Check current URL
	// Remove recipe from view if in account page, otherwise keep it
	if (router.asPath == '/account/recipes') {
	onDelete(recipe);
	}
	cacheSetUnsaved(recipe);
	}

This is useful when a user deletes recipes from their Saved Recipes list.
However, recipes.js renders a second RecipeCardList because it also hosts the Generate Similar Recipes use case:

We don't want this RecipeCardList to pass handleOneDelete() to its RecipeCards.

Changes

• Added onDelete prop to RecipeCardList
• In /account/recipes.js, passed an empty onDelete prop to RecipeCardList rendered for Generate Similar Recipes use case.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
ai-chef-bot	✅ Ready (Inspect)	Visit Preview	Apr 15, 2024 9:14pm
ai-chef-bot-2	✅ Ready (Inspect)	Visit Preview	Apr 15, 2024 9:14pm

[kpunno]

I don't know what I'm looking at but I'm glad it fixes things.

[kpunno]

@rjwignar

Can you elaborate on this? Or perhaps demonstrate this to me? Thanks.

[rjwignar]

Can you elaborate on this? Or perhaps demonstrate this to me? Thanks.

I can try to break it down, but I can also give a demonstration this afternoon:

Bug Explanation

• The /account/recipes page has two RecipeCardLists:
  • One for showing a User's Saved Recipes
  • A second when generating Similar Recipes
• Whenever we delete a recipe from either of these lists, we obscure it from view using the RecipeCard onDelete prop shown above.
• That onDelete is defined by handleOnDelete in RecipeCardList, shown above, which contains the actual logic for hiding deleted recipes
• When you delete recipes while looking at saved recipes, handleOnDelete will remove those recipes from view
• The bug: This also happens if you Generate Similar Recipes, Save and then Delete a recipe you generated:
  

Bug Fix:

• This fix involves passing a different onDelete prop to the Generate Similar Recipes RecipeCardList such that removing one of those recipes does not remove it from view:
  
• Making this change required also adding an onDelete prop to RecipeCardList that we can define at render-time
• Then when we render the RecipeCardList used in the Generate Similar Recipes, we pass an empty so removed recipes aren't obscured from view.

[kpunno]

@rjwignar

I think I understand. Thanks for the detailed explanation.

So line 56 will decide whether or not to use the "empty" version of handling deletion? If the "empty" version was not provided, use the "real" version?

[rjwignar]

That's correct.
If we don't provide an onDelete when rendering a RecipeCardList, we'll pass the real one (handleOnDelete) to the RecipeCards.

It's not the most elegant fix. But doing it this way ensures that even though the two RecipeCardLists are on the /account/recipes page, we can give a different behaviour to the RecipeCardList used in the Generate Similar Recipes use case.

When we migrate the Generate Similar Recipes parts of /account/recipes to the generate folder, we won't have to do this and can instead program it the way we do the other generation scenarios

[kpunno]

Ok, looks good. Thanks!

I've updated the issue so we can log all of the changes that have been made and need to be "undone". In the event that there are more changes that affect Generate Similar due to its location, we can add those to the list in this issue: #198