Save favorites items for users in Firebase


Another thing I am trying to achieve is to give the user the possibility to save some favorite items from the collection so these favorites are shown in the first screen after login.

I have created a collection in Firebase named “users” and I have created users with the UID from the authentication section. The items to be saved as favorites are placed in a different collection and I am not sure how to create that connection. I thought about creating an icon in the UI that has 2 states depending if it is true or false the fact that it is favorite.

Also I believe that within each item in the collection there has to be a collection with all UID from each user so it says that particular item is favorite or not. But I don’t know exactly how to proceed with that link or reference and how to make it in React Studio.

Thank you.

I think this has many different approaches. Check e.g. this video series about Firestore and storing “favorites”:

The simplest solution is of course to create userFavorites collection and store all favorite documents there and query the collection with a user id. This means that document data is duplicated into userFavorites collection when user presses “Favorite”.

I understand the process but there is something I don’t get to comprehend completely. I have a collection of items and each of those items has different values/fields, something like:

/collectionItems {
     Item1 {
            name: Lorem
            image: ipsum 
            link: dolor
     Item 2 {
            name: Lorem
            image: ipsum 
            link: dolor

I also have a collection with the users information like uid, email, picture, etc. I understand I have to create another collection for the favorites. Inside this collection is where I don’t know exactly how to make it work. I am guessing each document has to be the uid for each user? How do I specify exactly that the user has Item1 in his favorites?

I’m not quite sure what you mean by “I am guessing each document has to be the uid for each user? How do I specify exactly that the user has Item1 in his favorites?”…

In databases (SQL or noSQL) you always have to have some kind of unique identifier (or nested structure) to be able find the data you need. In this case every favorite document in Favorites collection needs to contain User Id which can be then used for retrieving favorites for certain user.

Thank you so much for your answer.

Ok. I understand now that just specifying the ID of the items saved in favourites is enough to create the reference to the document. I thought it would be necessary to create some kind of reference to retrieve all the fields within that document saved in favorites.

I am going to try to do it with one and see if it works. Thank you!

Also trying to make progress here. So I proceeded as I thought it would work. I created a collection in the root folder which name is “users”, then I created a document with the specific ID of a user taken from the Auth section, and inside that document, besides a couple of fields with some info I created a collection called favorites. Inside this favorites collection I manually created a couple of documents with the same exact ID that I have in two documents from the main documents collection.

Now in React Studio I have created a sheet where the text in the collection ID like this:


It gives me what I wanted. A sheet with a column where the document_key is the list of favorites documents for that user. But unfortunately I am not able to get the fields or data from that document to create the card. The link to the image, the name of the document, the link to an associated pdf, all that data is stored in the main collection. How do I make it to get all that data once it has saved the document_key of the document?

I am thinking that maybe all that data needs to be duplicated, so I wonder how would I do it with React Studio. I placed an empty heart icon in the top of the document card, with the intention that when the user clicks on it, it automatically saves it into his favorites. So I am guessing that action would have to save in its own favorites collection all the data placed in the main documents collection. Also the heart would be filled instead of empty.

Any orientation about how to make that happen?

Obviously if you want everything to be in one Sheet then you’d need to have duplicated data in Database.

I’d simply go with a custom code If the use case is just to show “favorite” button if item is not in user favorites and show “unfavorite” button if item us in the favorites.

So edit the code file so that one loads the Favorites into one array when screen is loaded and then for each item you simply check if the item id is available in Favorites array. If item is found from favorites collection then change button state to “unfavorite”.

Anyway this probably needs to be done in code and is probably not possible in scripts in Studio.

Thank you so much. And how can I make it to duplicate all data when the user click in the icon?

We’ll just use the Save data interaction and connect the data from the UI and save to your “Favorites” Data sheet and then to your Favorites Firestore collection.

In the next release one can use component props in Save data so you can collect data from Fields, Data slots or Props.

I’d suggest you to check the Firebase’s latest video series about just this kind of use case:

Thank you for your patience and guidance. I was able to achieve it! I created the favorites subcollection within each userID in the database and connected with the dataSheet and then configured the heart icon to save all fields in the dataSheet. Now it is working wonderfully!

Now I have to figure out how to change the icon for the filled one when the item is in favorites, so when the user clicks on it, it removes the item from the favorites collection. I am still learning and I don’t know how to create the code.

That’s the tricky part in this. You need to somehow create a script which checks if item is in the Favorites collection. If it is then you show “Remove” button and if item is not in the favorites then you show “Add to favorites” button state.

I just found an additional issue before that. I was testing the favorites interaction with the dataSlot of the userID with a default value manually added, so I could refresh the dataSheet from React Studio and check that everything was working fine. Now I removed that default value, so the query of the favorite dataSheet depends on the dataSlot that collected the userID in the login gate.

My login gate is configured with Firebase using Google. If the user log in, it goes to the favorites screen but apparently the dataSlot is not saving the userID because the screen is empty and I get the message “No nested comp set for ‘list’ element in “Welcome” screen”.

I don’t have a users dataSheet. I believe it is just enough to save the user data in the dataSlot but now I am wondering if it necessary to create that dataSheet.

Any ideas how to solve this?

You just need to debug the code in Developer tools or see the console log and try to fins what is the issue. You also probably need to set the “Force loading when app starts” from Data sheet settings but I dont think it will solve the issue. Best way to find out what’s going on is to debug the code which is also the main idea behind the Studio; it generates real code.

I could solved that problem. It was my mistake configuring the data source of the favorites grid. Now it is working fine.

Also, I placed two different heart icons, a filled one to save data fields and save that document into the favorites. That one is already working. I added a different icon to use it to remove that document from favorites. So now I have the two interactions to add and remove from favorites. I will try to figure out how to show or hide each one depending if the document is in the favorites or it isn’t.

Thank you!

I had an idea. I created two different components. They are exactly the same but one of them uses the filled icon to save a document into favorites and the other one uses the empty icon to remove from favorites. Now, what I did is to select a different component for the favorite grid and the general one. It works just fine as I see now the favorites just with the icon to remove, and documents appear listed in the general grid with the icon to include in the favorites.

It would be better to see in the general list the documents already in the favorite section with a different icon but it is fine for now. With some time I will keep improving this, but I am going to leave it there and try to achieve another goal related with showing the specific score given a userID for each document. Some time ago I asked about that in another post so I will write there once I try several things I have in mind.

Thank you!