manage shopping list by adding new item #21
Conversation
…dropdown selection for user to select when they will need the item again
…t frequency and click submit
… firestore database
…side addItem func
EmmaBin
requested review from
mindyzwan,
mentalcaries,
MarcosPerez16 and
sar-mko
|
Visit the preview URL for this PR (updated for commit 5a1d721): https://tcl-76-smart-shopping-list--pr21-ar-eb-add-new-item-i-n8xipbvg.web.app (expires Sun, 01 Sep 2024 16:11:37 GMT) 🔥 via Firebase Hosting GitHub Action 🌎 Sign: 512b1a88be8ae05fd3e727b99332819df760271d |
| <button type="submit">Submit</button> | ||
| </form> | ||
| {formSubmitted && <div>{formData.name} is added to your list</div>} | ||
| </div> |
There was a problem hiding this comment.
bug the success message works when an item is added, however the message doesn't clear. If I submit an item, and then start submitting a second item, the success message just gets updated with the new item name
There was a problem hiding this comment.
praise (non-blocking): I like how an alert is used for showing the message here! And I see it was used to solve this bug, great idea.
There was a problem hiding this comment.
@mentalcaries Thank you for catching this bug and the issue we overlooked with implementing addItem.
| <button type="submit">Submit</button> | ||
| </form> | ||
| {formSubmitted && <div>{formData.name} is added to your list</div>} | ||
| </div> |
There was a problem hiding this comment.
praise (non-blocking): I like how an alert is used for showing the message here! And I see it was used to solve this bug, great idea.
| addItem(listPath, { | ||
| itemName: formData.name, | ||
| daysUntilNextPurchase: parseInt(formData.frequency), | ||
| }) | ||
| .then(() => { | ||
| window.alert(`${formData.name} has been added to your list.`); | ||
| setFormData({ | ||
| name: '', | ||
| frequency: '', | ||
| }); | ||
| }) | ||
| .catch((error) => { | ||
| window.alert(`${formData.name} failed to add to your list.`); | ||
| console.error('Error:', error); | ||
| }); | ||
| } |
There was a problem hiding this comment.
note (non-blocking): This does read very cleanly! I like that you considered that in your usage here. And it does work well here, but it may be worthwhile to know that it's not an exact swap for using async/await see here for a document on it!
For an example of how to fill this template out, see this Pull Request.
Description
We updated the manageList component by adding a form to take the user's input, a user can add the name of the item and select one of the three options. When the form is submitted, the use can see a message displayed.
Related Issue
closes #5
Acceptance Criteria
UI-related tasks:
“Soon”, corresponding to 7 days
“Kind of soon”, corresponding to 14 days
“Not soon”, corresponding to 30 days
Data-related tasks:
Type of Changes
featureUpdates
Before
After
Testing Steps / QA Criteria