5. As a user, I want to add a new item to my shopping list so I can start recording purchases

[fullybaked]

Summary

Users need to be able to add items to their shopping lists. To do this, the AddItem view should present them with a form that allows them to enter two things:

1. The name of the item, and
2. An estimate of when they think they’ll need to buy the item again.

The README file for the shopping list API will be helpful as you work on this feature.

Acceptance criteria

UI-related tasks:

• The ManageList view displays a form that allows them to enter the name of the item and select how soon they anticipate needing to buy it again. There should be 3 choices for this:
  • “Soon”, corresponding to 7 days
  • “Kind of soon”, corresponding to 14 days
  • “Not soon”, corresponding to 30 days
• The input that accepts the name of the item has a semantic label element associated with it
• The user can submit this form with both the mouse and the Enter key
• When the user submits the form, they see a message indicating that the item either was or was not saved to the database.

Data-related tasks:

• The console.log in the addItem function in src/api/firebase.js is replaced with a function that adds the new document to the Firestore database. That function will be imported from the firebase/firestore module.
• The user’s soon/not soon/kind of soon choice is used to calculate nextPurchasedDate

Notes

• When this feature is implemented correctly, new items will automatically show up in the list view because streamListItem gets new data from Firestore every time there’s a change.
• You will know your <label> is correctly implemented if you click on the label and keyboard focus moves to the related input. Refer to the MDN docs on <label> for more info.
• Users will be able to submit the form with the Enter key if you listen for the right JavaScript event on the right element! If you're adding an onKeyDown listener anywhere, you might be overcomplicating things.
• The add item form has the potential to be a lot of scope. Stick to the Acceptance Criteria.

[krsnamara]

Jessica and I made some progress today on this ticket. We have a question about the "Enter" key functionality. Currently we have it setup as an onSubmit={handeSubmit} which gives a user the ability to press enter to submit the new list item. The only edge case would be if the user click out of one of the inputs the enter key no longer submits the form. Rule of thumb question and acceptance criteria, does this check out for accessibility and functionality?