(Week 3) Amber & Nikema (As a user, I want to set up a new shopping list)
This token baron flew gibby is associated with several list items in the database
https://console.firebase.google.com/project/tcl-3-smart-shopping-list/database/firestore/data~2F
Finishing up the story from last week - https://github.com/the-collab-lab/tcl-3-smart-shopping-list/wiki/(Week-2)-Monica-&-Nikema-(As-a-user,-I-want-to-set-up-a-new-shopping-list)
PR: https://github.com/the-collab-lab/tcl-3-smart-shopping-list/pull/49
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:
✅ Generate a new unique token
✅ Save the token to localStorage
⬜️ Show the user the list view
The following script can be used to generate a suitable token: https://gist.github.com/segdeha/21a42618ce5a54916c5b58d36ec2992e
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)
It looks like we will need to interact with Firebase to associate the user token with the list items. I will start looking at documentation and share anything I find that's relevant. Also, I will go back and study the earlier work to see how Firebase is set up in our project. --Nikema
12/30 - I watched this video and didn't code along but it I found it helpful to see how to make an app from scratch with Firebase and React. I know some of this is already in place from the first week in our app. Firebase Tutorial With React Hooks
More Resources I'm looking at:
- Getting Started With Cloud Firestore on the Web - Firecasts
- Getting Started with Firebase on the Web
- Official Cloud Firestore for Web documentation
- React Firestore The current list on the app is using this set of components
--Nikema
I need to look up the Context API
If creating a new list, clear any token if it exists in localstorage
- Generate a new token
If retrieving
- grab token from localstorage
The add item will need access to the token string so it can be added to the database
- Add item to the new list
- Send token and item to the database
- Show list of all items associated with a given token
Our query was fine we needed to build an index because it is a compound query
At Andrew's suggestion, I changed the query from the hard-coded token to the one saved in local storage. https://github.com/the-collab-lab/tcl-3-smart-shopping-list/pull/49/commits/3c28ba36488c5a90294cbbbccd5425632c585ac8#r362364011
