4. As a user, I want to set up a new shopping list so I can start tracking purchased items.

[stacietaylorcima]

Summary

A shopping list is a set of items associated with the owner's unique id and the name of the shopping list. Users need to be able to create new shopping lists. To do this, the Home view should present them with a form that allows them to enter the name of their list. Additionally, we need to do a few things to create that list:

1. Save the token to localStorage
2. Save the list to our database using the createList function in firebase.js
3. Show the user the list view

Acceptance criteria

UI-related tasks:

• The Home view displays a form that allows users to enter the name of a shopping list and then create a list with that name.
• 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 list either was or was not created and saved to the database.

Data-related tasks:

• Clicking the button uses the createList function in src/api/firebase.js to create a new shopping list for the user.
• The shopping list path is stored in local storage using the setListPath function.
• Once the list has been created and saved, the user is redirected to the List view.

Notes

• The createList function takes three arguments: the current user's id, the current user's email, and the name of the shopping list.
• The setListPath function takes one argument: the new list token.
• If you get stuck trying to redirect the user, check out the useNavigate hook from react-rotuer.