Issue #8 feat: Refactor list view components by adding prompts to the differen…

[RossaMania]

…t forms. Conditionally render buttons to go to and from the "/list" and the "/manage-list" views. Add navigation functionality with useNavigate hook.

Co-authored-by: Falak zahrafalak@users.noreply.github.com

For an example of how to fill this template out, see this Pull Request.

Description

Refactor list view components by adding prompts to the different forms. Conditionally render buttons to go to and from the "/list" and the "/manage-list" views. Add navigation functionality with useNavigate hook.

When a user starts a new list, they need a little guidance on how to get started. We added instructions in the "/list" view when the list is empty. We also added a button that takes the user over to the "/manage-list" view. Additional prompts were added as well. These included instructions on adding an item and picking when the user would want to buy that item next. Also, a prompt and button to go back to the "/list" view was added as well.

We wanted to use welcoming and conversational language, but also provide firm instructions on what the user can and should do. Like a "digital assistant" but actually helpful! 😸

We already have React Router installed, so we kept it simple by using the useNavigate hook and click handlers to guide the user from page to page!

Related Issue

closes #8

Acceptance Criteria

• 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

Use one or more labels to help your team understand the nature of the change(s) you’re proposing. E.g., bug fix or enhancement are common ones.

enhancement user experience helpful feature

Updates

Before

After

Testing Steps / QA Criteria

Click this preview link for this PR!
https://tcl-77-smart-shopping-list--pr32-fz-rc-feat-add-promp-3zw3l7nm.web.app/
Remember, our app uses Google auth. Please sign in with your Google account!

1. Make sure you see the message "Hello from the home(/) page!"
2. Type in the name of your new list in the "Name Your List" text field.
3. Click that "Create List" button.
4. This should take you to the "/list" view. If you don't see the "Hello from the /list page!" please click on that big blue List link at the bottom of the app screen.
5. Read the prompt, and look for the "Get started!" button. Click the "Get started!" button.
6. You should see the "Hello from the /manage-list page!" and the new, helpful prompts we have written!
7. Follow the prompts, click the buttons, and be sure to try out the "Let's go!" navigation button on the /manage-list page, as well as the "Add items" button on the /list page (only visible once items are added) to try out that smooth navigation between pages! 😄

[github-actions]

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

https://tcl-77-smart-shopping-list--pr32-fz-rc-feat-add-promp-3zw3l7nm.web.app

_{(expires Sat, 14 Sep 2024 21:57:58 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: b77df24030dca7d8b6561cb24957d2273c5e9d72}

[RossaMania]

I should have some free time tomorrow.

Does anybody have a problem if I try to refactor this ManageList.tsx view and make a AddItemForm.tsx component to render inside that ManageList view?

[eternalmaha]

@RossaMania I think refactoring the ManageList view to render an addItem component is definitely needed and helpful at some point! I remember that was a conversation we were having in the previous issue and as we both were building the add item feature, since the application is getting so large, and ManageList has a few different functions now

[RossaMania]

@RossaMania I think refactoring the ManageList view to render an addItem component is definitely needed and helpful at some point! I remember that was a conversation we were having in the previous issue and as we both were building the add item feature, since the application is getting so large, and ManageList has a few different functions now

There's probably room for like a PurchaseTimelineForm or BuyAgainForm or something, but that may be too granular--too specific--since it's related to adding an item to a list. Either way, a fantastic "tomorrow problem"!

[tannaurus]

Great work ya'll! Left a couple thoughts that you can feel free to do with what you wish 🙂

[RossaMania]

Falak and I met and were able to discuss the feedback!

• We used in-line functions for navigation, instead of click handlers!
• We shortened up some prompts for readability!
• We changed some button names for clarity as well--for both users and accessibility!
• We changed some div elements to sections HTML elements!

[alex-andria]

Nice job Ross and Falak! I love all the different user friendly prompts between empty list pages and prompts for adding your next list. Clean use of your form functionality as well. 🧠

One thing to maybe think about in the future is if you wanted the instructional prompt "Next, pick when you plan on buying this item again!" and "Let's go look at your list!" to always be present - which is how it is currently even after multiple items are added. Or if you'd like it to only be present until after the first item is added.

Otherwise, great job to you both for addressing all the other comments so quickly!