Join GitHub today
GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.Sign up
7. Alert the user to avoid duplicate items on the list #53
It mostly works but we need a way to make sure there is the duplicate is checked before sending the item to the database. I'm not super strong here but I think a callback function or promise can do it. I saw some things about useEffect also but I couldn't figure it out. I have been looking at this for too long.
In the checkForDuplicates function we take the item name and check to see if it's already on the shopping list. If it's a match it sets the duplicat state to true, the returns true. Instead of using state to determine if the item can be added we use the function return value. So duplicate items don't get added while waiting for the state to populate.
…st() at the end of addItem() so that if a user rapidly enters duplicates the current list gets checked.
stevelikesmusic left a comment
Lots of great work! Using Context to share state across routes is a great idea.
Nothing additionally from me that would be a blocker. Mostly ideas and considerations regarding code structure and component APIs. @segdeha makes a great point for the UX about keeping the user input when an error is shown. Definitely something that can be ironed out before your call
I implemented most of the changes Steve suggested. I removed the setTimeout and now the function checks for duplicates as you type. Does this break UX? I tried entering apple then apple pie. The app will warn that apple is on the list but if you keep typing the warning goes away.