Handle empty search queries in a helpful manner #53
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Visit the preview URL for this PR (updated for commit 893dae1): https://tcl-57-smart-shopping-list--pr53-jg-handle-empty-sear-cyx52ghq.web.app (expires Fri, 02 Jun 2023 01:24:46 GMT) 🔥 via Firebase Hosting GitHub Action 🌎 Sign: ad3eb6c34c2ec5986fcc218178df5985eb9c9ffb |
|
|
||
| export function AddItem({ listToken, data }) { | ||
| const [itemName, setItemName] = useState(''); | ||
| const { state } = useLocation(); // React Router DOM state - persisted between List and Add-Item routing - leveraged to quickly add a non-existing item the user attemped to search for. |
There was a problem hiding this comment.
I haven't see useLocation() before - this is cool! Nice work, Jon!
emilysellers
approved these changes
May 26, 2023
There was a problem hiding this comment.
Great work, @jongranados ! The addition of the functionality to add the item being searched for is a really nice touch.
2 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
For an example of how to fill this template out, see this Pull Request.
Description
This PR adds features that provide the user with feedback when their search query returns empty. Additionally, it provides them a way to quickly add these non-existing items to their list, right when they discover that it doesn't exist in it. The feedback was implemented by leveraging MUI's TextField error handling. The quick-add feature was implemented by leveraging React-Router-Dom's location-specific state which allowed for the persistence of the user input between components at two different locations.
Related Issue
Closes #46
Acceptance Criteria
Stretch goal
Type of Changes
Updates
Before
The user was not provided any feedback when their search did not match anything in their list.
1.mov
After
The user is provided feedback and a quick way to add the non-existing item to their list.
2.mov
Testing Steps / QA Criteria