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

[hun-ah]

Description

This PR allows a user to add a new item to their list and to select the next time they think they will purchase said item.

We have created a new component called AddItem.jsx, which contains a form with a text and select input. These inputs will keep track of the users changes and set them into the itemValue state.

Upon submission of the form, the addItem function from firebase.js will run, which takes in two parameters: the listPath prop (passed down from App.jsx into ManageList.jsx and finally into AddItem.jsx) and the itemValue state (an object containing the item name as a string and the daysUntilNextPurchase as a number). Upon form submission, the user will be alerted if the item was successfully added to the database or not.

In the firebase.js file, we have updated the addItem function to use the setDoc method from firebase to create a new document and save to the database.

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

Enhancement

Updates

Before

After

Testing Steps / QA Criteria

1. run npm start
2. on the / or "home" route, make sure to click the list displayed to set the listPath
3. navigate to the Manage List page using the navigation
4. enter an item name, select a timeframe and click the add item button
5. navigate to the List page using the navigation to see the newly added item

[github-actions]

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

https://tcl-66-smart-shopping-list--pr23-an-hm-issue-5-xlmo5and.web.app

_{(expires Tue, 20 Feb 2024 12:50:47 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 2dc16cb2a79cbd6723fdc511b73e0743df1d18d0}

[StefieCaff]

Nice work, everything is working well for me.

[StefieCaff]

nice catch!

[3campos]

Having reviewed your code and tested it, I approve merging these changes! The code is well written and everything works as expected. I used a console log to confirm that the state variable, daysUntilNextPurchase, was reflecting the option (7, 14, or 30 days) selected by the user. Nice job!

As an aside, we don't have a "nextPurchasedDate" variable in the app, so I assume that is a typo in the instructions that we were provided for this issue.

[hun-ah]

As an aside, we don't have a "nextPurchasedDate" variable in the app, so I assume that is a typo in the instructions that we were provided for this issue.

You're right, there is a dateNextPurchased though - it's probably a reference to that.

[3campos]

As an aside, we don't have a "nextPurchasedDate" variable in the app, so I assume that is a typo in the instructions that we were provided for this issue.

You're right, there is a dateNextPurchased though - it's probably a reference to that.

Agreed!

[deeheber]

This looks good to merge to me. 🚀