Show Error If Duplicate Already Exists

jssckbl commented 3 years ago

For an example of how to fill this template out, see this Pull Request.

Description

This PR addresses intentionally created error messages in response to various user inputs. These error message parameters exist to simplify the user experience, and maintain a clean database and user list, all while staying within the scope of the overall project.

Related Issue

Acceptance Criteria

[x] Show an error message if the user tries to submit a new item that has the exact same name as an existing item
[x] Show an error message if the user tries to submit a new item that has the same name as an existing item, where capitalization has been normalized and punctuation has been removed
[x] The user’s original input should be what gets saved in the database

Type of Changes

	Type
	:bug: Bug fix
✓	:sparkles: New feature
✓	:hammer: Refactoring
	:100: Add tests
✓	:link: Update dependencies
	:scroll: Docs

Updates

Before

https://user-images.githubusercontent.com/47455758/115407245-7a6c4300-a1b5-11eb-9ee9-b8f60fb071f5.mp4

After

https://user-images.githubusercontent.com/47455758/115407275-822be780-a1b5-11eb-8fef-0e14c2b08a82.mp4

Testing Steps / QA Criteria

Click on Add Item link
Enter in shopping item (i.e. ice cream)
You will be redirected to /list view. Navigate back to Add Item
Enter in similar shopping item with various punctuation and capitalization (i.e. Ice! CreAm.....)
Enjoy the new error message!

Notes

We decided to have the user directed back to the List view after successfully adding a new item. We felt this helped the user have visual confirmation their item was successfully added AND it helps us avoid a potential accidental entry based on how we structured the check for duplicates against the database after we grab current items in a useEffect().
There is one potential bug that could occur if the user is somehow able to enter an item in before the useEffect() has finished grabbing all the items from the Firestore.
One potential solution we considered is disabling the submit button until the query to Firestore has resolved. But we wanted mentor guidance/input on this.
Another issue we discovered is accidental or intentional white space between words/characters might allow duplicates to "sneak" into the database. Checking for white space isn't technically part of our AC, but we wanted to have a discussion with the mentors/group about using Regex to remove white space in our checkForDuplicates() function.
Finally, we're not really sure how to refactor our createListItem function. It does work as intended. However, I'm sure there is a better way to write the async function overall. I just don't know exactly how to make it simpler/better. I really don't like how many versions of a catch or error handling there is.

github-actions[bot] commented 3 years ago

Visit the preview URL for this PR (updated for commit f715127):

https://tcl-23-shopping-list--pr19-jc-jw-show-duplicate-7fh5e9nj.web.app

_{(expires Sun, 02 May 2021 19:34:14 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

yenly commented 3 years ago

I love the video walk-throughs and the notes sections in this PR really helped me understand your pair's thought process as you're working through this issue. 🎉 👏🏽 🚀

skylerwshaw commented 3 years ago

https://github.com/the-collab-lab/tcl-23-smart-shopping-list/blob/fc4845d2abbab2b4f17dd90001ace4c6243f9c10/src/App.js#L41-L64

Similar to what we discussed in our weekly sync today, our routing logic is getting complicated. If we step back and reevaluate the logic, there's a lot of commonality between the redirects since they all act on the presence of token. We could try and refactor this by 'hoisting' the routing decision tree higher to simplify and keep things DRY. Here's one example of how we could do this, and it eliminates all redirects!

Thank you for the suggestions of simplifying the routing page, @skylerwshaw! I think it is easier to read the code this way. They have been implemented.

(and I somehow deleted part of your comment. The part that gives the code to enter. Which I did apply to the project. I apologize for that!)

jssckbl commented 3 years ago

I'm currently getting an error when adding an item to the list on this branch:

I am not getting the error you are showing when I add an item to the list, so I am not quite sure how to trouble shoot it.

the-collab-lab / tcl-23-smart-shopping-list