3. As a user, I want to set up a new shopping list so I can track purchased items #47
Conversation
We imported the token.js file that was provided in our story. We created a component called NewList to test if we could generate a token and display it to a view. The NewList component was added to AddItem.js and we were successful in creating and displaying a new token upon reloading the page.
When I imported the NewList component in AppRouter.js, I did it incorrectly and had the path './pages/List' instead of './pages/NewList'. Because of that bug, it looked like the routing wasn't working. Now the generated token displays on its own page. I also added a link to the NewList component on the home page in List.js and a link back home on NewList.js.
A shopping list consists of a set of items associated with a user’s token. Tokens can be shared with other users to allow them to co-manage a given list. Creating a new list consists of the following: [x] Generate a new, unique token [x] Save the token to localStorage [x] Show the user the list view We used the getToken function to generate a new unique token. To associate the token with a list, we save it in local storage. If it is the first time visiting the list a new token is generated. If the user is returning, we get the saved token from local storage. The last criterion was to show the list view. Currently, the list associated with a token is empty. We added placeholder text that shows the current token to demonstrate that the token persists.
I removed the variable used to generate a token and converted the initialToken variable to a function. The behavior didn't change. `initialToken` is called once when the `token` state variable is initialized. It takes the value stored in local storage if it exists, if not it generates a token with the getToken function.
src/pages/NewList.js
Outdated
| */ | ||
|
|
||
| const NewList = () => { | ||
| const generatedToken = getToken(); |
There was a problem hiding this comment.
This line wasn't needed, so I removed it. I made initialToken a function so that getToken() will only run once if needed when token is initialized.
There was a problem hiding this comment.
This is a great start, but is a little incomplete. Importantly, from the story description:
A shopping list consists of a set of items associated with a user’s token.
What I'd like to see added to what you have is the following:
- Once the user has a token, redirect them back to
/(our list view) - On the list view, show only items associated with the user's token (should be able to add this as a parameter to the Firestore query)
You may need to add some records to the database directly to get them to display. In the next set of stories, we'll address adding items to the list in a way that stores the user's token as well (I'm a bit confused how that's already implemented because that story hasn't come up yet)
I know this is a big change this late in the week! Let's talk on the call about how we want to address this as a group. It might mean carrying over this story to the coming week, but we'll get it done!
I see now. I just realized that we never fully understood the AC. |
|
All good! We'll get it worked out! |
A shopping list consists of a set of items associated with a user’s token. Tokens can be shared with other users to allow them to co-manage a given list. Creating a new list consists of the following: