created new db collection for a new sharable list token successfully

[zeeatwork]

Description

This PR adds new instructions to clarify the user flow when creating a new token and adding the first item. This was accomplished by

1. Adding app usage instructions to the Home page
2. Displaying an alert to confirm token generation with the token name
3. Using the history() method to route the user to the add list page, creating a more natural user flow

Related Issue

This PR 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 (see Testing Steps / QA Criteria below for clarification regarding the AC as of April 29, 2021.)

Type of Changes

	Type
	:bug: Bug fix
✓	:sparkles: New feature
✓	:hammer: Refactoring
	:100: Add tests
	:link: Update dependencies
	:scroll: Docs

Updates

Before

After

Testing Steps / QA Criteria

1. make sure you are on the branch za-jw-add-welcoming-prompt
   2. npm install
   3. npm start
   4. Make sure your URL is localhost:3000/ and resembles the screenshot below.

If the URL has anything in addition, such as list or add-item, you may have worked with this app in the past and already have a token saved in your local storage. If your page resembles the screenshot above, proceed to step 5. Otherwise:

The following steps are one way to check your local storage when using Chrome as your browser:

• right click anywhere on the page
• select Inspect
• select Application

• Under Storage, open your Local Storage and select http://localhost:3000. If you have an already existing token, you will see it listed under your Key and Value as token and a random three word value.

• highlight the token and Delete.
• return to localhost:3000 to continue testing.

5. Click button Create New List
6. You will see a SweetAlert confirming you have created a list, what your new token is, and a message to encourage the user to add their first item to the list. The button Create New List also sends the newly created token to the Cloud Firestore.
7. Open the Cloud Firestore TCL 23 and search the left-hand column to find your newly created user token.

Token is now able to be shared with another user who may enter it when at the welcome screen. This gives all users who use the same token access to the same list.

8. User will now find themselves at the add-item page, prompting them to add their first item.

9. To replicate the action of a new user accessing the list with the same token, open an incognito window and proceed to localhost:3000. You will be able to enter the three word token at the welcome screen. This will take you to the same list that you just created.

Note that before a user enters their first item in the list, they will see a filler object item already existing on the list. Due to time constraints, we were unable to pursue developing the functionality to omit this item. Currently, without it, the user token will not be sent to the database. We understand that it would improve the user experience to not have an item that the user did not enter appearing on their list. We are hopeful to put time into this issue in the near future.

In the meantime, the item that is automatically added upon token creation could potentially be displayed as a user example that the user can later delete on their own.

[github-actions[bot]]

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

https://tcl-23-shopping-list--pr21-za-jw-add-welcoming-www71fl2.web.app

_{(expires Sun, 09 May 2021 02:52:48 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

[yenly]

I like the creative approach, but by changing the flow of how the app behaves after creating a list, you're changing the requirements for two issues:

• 8

  • This creates the issue that the list is never empty. Thinking about usability from the user's perspective, what would users feel with always having to delete a filler object they didn't want?

• 3

  Once the token has been created and saved, the user is redirected to the "list" view

As engineers, we can suggest changes in requirements. But Product owners usually decide on requirements and AC because they are in communication with the stakeholders. We are building the app to help solve problems for the stakeholder.

I confused you both by asking you to cover a particular use case in addition to this week's AC. As discussed in our office hours, due to the time already spent, I recommend going with the assumption that the token does not need to be stored in Firestore when the list is created. This is a more straightforward approach. We can file a new issue to handle the particular use case to address later.

[jssckbl]

@yenly I think everything was covered from your comment. Let us know if there are still additional changes that need to be made before merge. I intend to write up something for the refactor and missed opportunities column for what would be great to still complete.