creating a new shopping list #20
Conversation
|
Visit the preview URL for this PR (updated for commit 927c189): https://tcl-78-smart-shopping-list--pr20-dc-tc-new-shopping-l-rsv86j0c.web.app (expires Thu, 29 Aug 2024 15:29:06 GMT) 🔥 via Firebase Hosting GitHub Action 🌎 Sign: c781903507c1507075d7a974036959ddeec29c0a |
There was a problem hiding this comment.
The feature works as expected, thank you for the comments in the code.
We had the idea that later on we can implement toast notifications to display the messages. Given the redirection to the /list view, the messages are not visibly displayed.
Looking forward to the code review!
There was a problem hiding this comment.
The feature for creating new lists works well, code is looks good and is easy to understand. As GrannyYetta mentionted in the comments, in the future we could implement toaster for all notifications. Right now the user doesn't see any success message because they are redirected to the List view right after submitting the form.
There was a problem hiding this comment.
Nice job team. Your feature works well. 💥💥
Something to consider if you have the time now or later during styling/refactoring (last 2 weeks) is adding a timer to show the success or error message before redirecting the users to the list page. Cause now I dont get to see the success message after adding, it just takes me to list page. But if a timer is in place I will see it before it redirects.
The timer will also help for the error message too cause now if I get an error it never goes away whereas if there was a timer the error message will show for like 5 seconds and then clear by itself.
| const handleCreateListButton = async (e) => { | ||
| e.preventDefault(); | ||
| if (!listName) { | ||
| setMessage('Enter a list name'); | ||
| return; | ||
| } | ||
|
|
||
| try { | ||
| await createList(userId, userEmail, listName); | ||
| setMessage('New list successfully created'); | ||
|
|
||
| const createListPath = `${userId}/${listName}}`; | ||
| setListPath(createListPath); | ||
| navigate('/list'); //redirect to the list view | ||
| } catch (error) { | ||
| //Logging and error messages if list is not created | ||
| console.error('error creating a list', error); | ||
| setMessage('Failed to create list. Please try again!'); | ||
| } | ||
| }; |
There was a problem hiding this comment.
Good job on this function team! it is a pleasant way to handle async calls!
For an example of how to fill this template out, see this Pull Request.
Description
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
Homeview 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:Related Issue
issue #4
Acceptance Criteria
UI-related tasks:
Homeview displays a form that allows users to enter the name of a shopping list and then create a list with that name.labelelement associated with itEnterkeyData-related tasks:
createListfunction insrc/api/firebase.jsto create a new shopping list for the user.setListPathfunction.Listview.Updates
Before
Home view, there is no list label and create a list button.
After
creating list button and form
after writing a list name you should navigate to list view
Home view after creating a list
Testing Steps / QA Criteria