Add item to firestore

[marshjaja]

Description

New feature: Add new item to list by saving it to Firestore.
Used a single useState for the form data.

Related Issue

Closes #5

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

Type of Changes

feature

Updates

Before

After

Testing Steps / QA Criteria

• Do a git pull and git checkout mm-jo-rendered-list.
• Open the homepage by running npm start.
• Navigate to ManageList.
• Complete the form to add a new item.
• Submit using enter or clicking Add Item button.
• You should see a success message.
• Navigate to List to see the added item.

[github-actions]

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

https://tcl-79-smart-shopping-list--pr20-mm-qg-feat-additem-o0v3zun6.web.app

_{(expires Sat, 31 Aug 2024 11:25:34 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: d91d9ddbda780208241c52942f544acf8e81407a}

[Hudamabkhoot]

The only thing I would suggest is removing the console.log statements other than that well done! 👏

[joriordan332]

Looks great guys! Well done 😃

[redapy]

everything works as expected, great work team! I left only a small note

[redapy]

because we are not trying to update items here, it would be better to use the addDoc function instead of setDoc. (it takes the listCollectionRef directly, you won't need const newItemEntry = doc(listCollectionRef);)

Also, you can remove these comments as you already replaced console.log