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:

https://github.com/rjwignar/AIChefBot/blob/ada5eb90e860445fb4edb781eed40c06d6130ec2/components/RecipeCardList.js#L28-L36

https://github.com/rjwignar/AIChefBot/blob/b8e28eebeec25a1e1dad3adc22b5f4229344ef98/components/RecipeCardList.js#L54-L60

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

https://github.com/rjwignar/AIChefBot/blob/b8e28eebeec25a1e1dad3adc22b5f4229344ef98/components/RecipeCard.js#L110-L116

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[bot]]

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.