User Story 04: Add Items to List and Display List

[lindseyindev]

Description

1. New Add Item Form feature, users can now enter the name of the item and choose from options representing a frequency of purchase with 7 days for “Soon”, 14 days for “Kind of Soon”, and 30 days for “Not Soon”. The default is 7 days.
2. We used semantic HTML and combined the radio buttons under a
   element to improve accessibility for screen readers.
3. When a user submits the form 3 data points are sent to the firebase database: the item name, the frequency of purchase converted to a number, and date of purchase set to an initial value of null.
4. We refactored /ListView.jsx so that items added are displayed in a simple unordered list after they're added and removed the add item component from that page.
5. We identified and noted where we will add the token which will allow us to save each item under the user's specific token.
6. When the form is submitted if the data is successfully sent to the database, the user will receive a message that includes the item name telling them it was successfully added, this message disappears after two seconds using the setTimeout() function.

Related Issue

Closes #4

Acceptance Criteria

• [x] User is presented with a form that allows them to enter the name of the item and select how soon they anticipate needing to buy it again (Soon, Kind of Soon, Not Soon)

• [x] When the user submits the form, the item is saved to the database, associated with the user’s token

• [x] Along with the item name, an integer corresponding to the estimated number of days until next purchase is saved: 7 for “Soon”, 14 for “Kind of Soon”, and 30 for “Not Soon”

• [x] The last purchased date should be set to null initially (i.e. you can create an item without purchasing it)

• [x] Item names should be displayed as a simple, unordered list on the list view after they’re added

Type of Changes

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

Updates

Before

After

Testing Steps / QA Criteria

From your terminal navigate to the main branch using git checkout main, create a local branch with git checkout -b am-ld-addItem and pull down our branch with git pull origin am-ld-addItem

• Navigate to localhost:3000/addItemView
• Create a token and save into your browser localStorage (run localStorage.setItem('list-token', 'yourtokenname')
• Fill out the form with a new item and frequency, testing out different buttons.
• Confirm that item name and frequency appears in the items collection of the database under the token name you have created [here] (https://console.firebase.google.com/u/0/project/tcl-36-smart-shopping-list/firestore/data/~2Fitems~2Fy5SteQP9oNovRl6WJhhQ).
• Note: purchasedDate will be set to null
• Confirm that after the item was added you see a message at the top of the page "Successfully added --item name--" which disappears after 2 seconds.
• Confirm the item and frequency has been added to the shopping list on localhost:3000/listView path.
• Note: tokens will be added later to separate shopping lists to specific users

[github-actions[bot]]

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

https://tcl-36-smart-shopping-list--pr18-am-ld-additem-gwt5h83c.web.app

_{(expires Tue, 25 Jan 2022 04:03:35 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

[lindseyindev]

Alena and I spoke about separating the form into components for example we used the radio button 3 times, @djtaylor8 @shelleymcq do you think we should separate the radio buttons or any part into their own components and would this make it more or less readable for you two? Please let @alenamedved and I know! Or if you have any suggestions for making this code more future-proof!

[djtaylor8]

Alena and I spoke about separating the form into components for example we used the radio button 3 times, @djtaylor8 @shelleymcq do you think we should separate the radio buttons or any part into their own components and would this make it more or less readable for you two? Please let @alenamedved and I know! Or if you have any suggestions for making this code more future-proof!

Hmm I don't think a radio button needs to be pulled out into its own component. The entire form itself could be a component, but getting too granular and breaking it down further seems unnecessary. I think what you both did in the form works well!

[rudidev08]

PR notes are A+ - loving the testing steps and screenshots. Covers info for PMs, other devs, and QA quite well, and screenshot is extra effort that pays dividends with time, since as code changes, it's harder and harder to visually preview the app at this point in time.