Create a new list

[vivitt]

Description

Add a form in the Home view, so users are able to create a new lists by submitting a new list name. Save a list token in the local storage and redirect the user to the list page when a new list is successfully created. Show an error message when create list fails and when the user submits an empty string.

Related Issue

closes #4

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.

Type of Changes

feature

Updates

Before

After

Testing Steps / QA Criteria

• git pull origin vi_ce_form_list
• npm start
• log in
• create a new list at http://localhost:3000/
• check the token is saved in local storage

[github-actions]

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

https://tcl-71-smart-shopping-list--pr21-vi-ce-form-list-bkn6tf5u.web.app

_{(expires Thu, 22 Feb 2024 09:38:32 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 1e7ade9d0f374c4ddb5d7ab6fc541062fc7a1ab4}

[llyorshch]

@ocsiddisco , @vivitt , I have added you as assignees to the issue. It's just for the record. Nothing to be done from your side. Now the ball it's on the reviewers' rooftop.

[BikeMouse]

looking good

[llyorshch]

Hi,

Well done! 🙂

The work is pretty good so far but there's a small little thing missing. Please, implement the redirection to the list view but with the redirection to the list that was created. It's true it's not explicitly expressed but IMHO, the redirection makes no sense if you are not redirected.

Again, you did it pretty well! It's just a small little detail that in fact, I think it must be better described in the issue.

Thanks!

[llyorshch]

Please, implement the redirection to the list that was actually created. Once that is done, The PR is ready to be merged. Do not forget to get the changes from the other team!

Good job! 😄

[borjaMarti]

All criteria met, good job!! 🥳

[borjaMarti]

Another way we could write the path attribute in the Route element would be with a template literal which uses listPath state (/list/${listPath}), but I don't really know which one would be the best practice. Just a thought in case anyone can chime in, no need to change it.