Guide user to add their first tiem

[ocsiddisco]

Description

On the List Page, the user sees now a different interface displayed, depending of their experience with the application:
-> After creating their very first list, the user will see a message, a gif showing how to add an item, and a redirection button to the manage-list.
-> When a user creates a new list (and already has at least one), they will see a nice message and a redirection button to the manage-list.
-> When a user already has items in its list, it will display the items and the search component.

On Sign Out, the local storage is now being emptied.

Related Issue

Closes [#8]

Acceptance Criteria

[x] The list view, when there are no items to display, should show a prompt (e.g., a button) for the user to add their first item

Type of Changes

Enhancement & bug fix

Updates

Before

After

when a user is creating their first list

when a user has created a new list (and already has at least one list)

when a user has items present in their list

Testing Steps / QA Criteria

• git pull origin ce--ju--add-first-item
• npm start

List Page:

• Select a list and check whether the message displayed is adequate.
• Test with an existing user (once with empty list, once with items) and a newly created user.

Local Storage:

• On Logout, check your local storage, it should be empty.

[github-actions]

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

https://tcl-71-smart-shopping-list--pr24-ce-ju-add-first-it-g5aguim3.web.app

_{(expires Thu, 07 Mar 2024 15:37:26 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 1e7ade9d0f374c4ddb5d7ab6fc541062fc7a1ab4}

[vivitt]

Thank you for the work you have done and for fixing the logout bug!

I have a concern regarding the GIF that was included. I think the information it provides could be replaced by a brief text asking users to create their first list (something like 'Start by creating a list...'), as you are doing with the list items. I believe this will offer a clearer explanation and avoid any unneeded motion that might cause discomfort to some users.

If you prefer to keep the GIF, I think we can improve the alt text to make it more useful for users who rely on it. Also, I noticed that there's a warning related to the GIF: 'Assets in the public directory cannot be imported from JavaScript...'
Maybe it would be nice to fix it so we don't have to remind later to do so.

Finally, something that is out of the scope of the issue but could be nice to think about… I wonder if it wouldn't be a good idea to display the list and manageList links only when users have lists to navigate or manage. I think maybe this could result in a more intuitive user experience... What do you think?

Thank you again for your work. I look forward to hearing your thoughts.

[BikeMouse]

Hey Viviana,

Well the task merely said to add a prompt to help users to add a first item to an empty list, but I totally see what you mean - after all a new user need to create a list first before being able to add an item.

We had wanted some visual support as to show the user what to do to add an item, but I wonder if a screenshot might be better - no motion, but still the benefits on that visual aid. For clarity we could add some text above to explain what needs to be done.

[borjaMarti]

Hey team, well done!!

Tested the functionality both with no lists and already having lists and it works as expected.

I agree with Viviana about only showing the List and Manage-List links when the user already has lists (especially because the List.jsx view doesn't have a case for data.length === 0 && lists.length === 0, resulting in a null return), but that's out of scope for this issue.

The only thing I noticed: are we still using AddItem.gif? The reference to it was removed, but the file itself is part of the commit. Should we delete it?

Other than that, looks good! 🥳

[BikeMouse]

Truth to be told I hesitated to remove the file, but will do that right now

[Amaka202]

Well done team! This works as expected 💥💥