A shopping list is a set of items associated with a specific three-word token. We need to allow users to start new lists, so they can save the things they need to buy. To start a new list, we will need to do a few things:
Generate a new, unique token
Save the token to localStorage
Show the user the list view
Up to this point, the app has rendered the items in the list associated with the token my test list. Before we can allow users to make new lists, we have to stop showing them this test list.
Acceptance criteria
[x] @the-collab-lab/shopping-list-utils is added as a dependency to the project.
[x] The string my test list in App.jsx is replaced with null, so users are not automatically subscribed to any list.
If a user doesn’t already have a token:
[x] They are redirected from the List (/list) page back to the home (/) page.
[x] A button in the Home component allows them to create a new list.
[x] Clicking the button generates a new token and saves it to localStorage using the setListToken function in App.jsx.
[x] Once the token has been created and saved, the user is redirected to the List view.
If a user does already have a token:
[x] They are automatically redirected to the List (/list) page.
Notes
The generateToken function from the shopping-list-utils package should be used to generate the token. More information on that package its documentation. Importing it will look something like this:
import { generateToken } from '@the-collab-lab/shopping-list-utils';
The setListToken function takes one argument: the new list token.
Eventually the welcome/home page will look like this wireframe. It’s good for your whole team to look at the wireframe now, but be sure not to try to implement all of the visible functionality at once. There will be future stories to add the other features such as joining an existing list.
For this story, it's sufficient just to have a simple "create list" button. Although you are not required to save the token to Firestore, some teams have opted to also save the token to Firestore when generating a token.
Summary
A shopping list is a set of items associated with a specific three-word token. We need to allow users to start new lists, so they can save the things they need to buy. To start a new list, we will need to do a few things:
localStorageUp to this point, the app has rendered the items in the list associated with the token
my test list. Before we can allow users to make new lists, we have to stop showing them this test list.Acceptance criteria
@the-collab-lab/shopping-list-utilsis added as a dependency to the project.my test listinApp.jsxis replaced withnull, so users are not automatically subscribed to any list.If a user doesn’t already have a token:
/list) page back to the home (/) page.Homecomponent allows them to create a new list.localStorageusing thesetListTokenfunction inApp.jsx.Listview.If a user does already have a token:
/list) page.Notes
generateTokenfunction from theshopping-list-utilspackage should be used to generate the token. More information on that package its documentation. Importing it will look something like this:setListTokenfunction takes one argument: the new list token.