Using a list inside another list


#1

Hi. Can I use a list inside a list? The images explains the question. Such as posts and comments. In React Studio looks fine, I mean is listing. Query looks fine. However looking in a browser it doesn’t show up.

Thank you, Marcos


#2

Hi, You should be able to put list inside List item (just tested it myself with Restaurant demo app). Note that when you are using same data sheet as data source for every Comment list then all items will see the same post comments (in case if you are looking posts list). If you show the comments only in Post details page then it definitely works.

Try debugging with Browser’s developer tools by adding breakpoints to code and checking if data is really loaded.


#3

Hi Antti. Just checking, so that means we can’t show comments because they will be the same and you only know if there are some comments after you click to go to details, so you saved the id into the dataSlot? Not so good :frowning: There must be a clever way to do this…
The problem brings me back to an old problem, I only get the dataSlot value is clicking


#4

We’ll if you have e.g. Latest three comments in collection inside Post document then you can show those inside list item. That’s probably the way the most apps model their data structure. Then when you click “show more comments” the user is forwarded to details screen and comments are loaded from Comments collection.

You can also store all comments inside the post item but it depends a bit if there are thousands of comments then you should store comments in two places. Latest comments into nested collection inside Post document and all comments into main level Comments collection.

Update! Just noticed that plugin ignores nested collections when loading main level collection into Data sheet. We’ll check if nested collections could be loaded like one can load JSON type of columns. This way you can give nested collection (comments) column name as Items Array for the comments list.


#5

Hey Antti. Thank you. For now this news is a relieve. I’ll wait and while move forward with other issues. Thank again


#6

Just a heads up about this matter.

It seems that it is not that simple to load subcollection into Data sheet same way as you can have JSON or array. We’ll check this matter again tomorrow but if there are any Firebase experts available we’re happy to get your input on this.


#7

Hey Antti. Yes indeed. Not possible at this time. I tried in many ways. This definitely would be great! It’s fine, for now, I’m going to use what React Studio can do, combining saving collections, documents, and for the comments the Increment interaction using FireStore. Works just like “medium” when it comes to showing responses. I’m happy :slight_smile: In the future, we’ll treat this matter again showing the last 3 comments which would be more engaging.

I made some research, mainly reading Firebase documentation trying further integration with FB, and to show collections and subcollections, which is possible on Firestore. It turns out that none of my “hacking solutions” worked out.

Hoping you guys come with some future god news. Best, Marcos


#8

Hi,

The more we study how the Firestore subcollections work we’ve come into conclusion that it is not possible to match it into Data sheet format. When Firestore returns Document it does not return it’s subcollections. If one wants to create this kind of “feed” then maybe it should be done by creating an API which returns JSON from on the Firestore database.

Anyway we’re going to release experimental feature which allows users to edit the code template file in the Studio. Code templates are pretty much self explanatory. This way one can add e.g. one import to component without needing to write plugin for simple snippets.

This way you can create new query in each list item and fill array with the results. It is not the easiest way but is workable solution when one needs to show “list inside list” and there is no backend/API which returns JSON.

Here’s an example:

https://neonto.cloud/preview/84eyj5jw


#9

That’s great news! looking forward to see this experimental feature.


#10

You also need to understand that every time you load the list there is 1 query made for each list item which is important to understand because using Firestore charges every document read.

https://firebase.google.com/docs/firestore/pricing


#11

Yeap. Thanks for the reminder :slight_smile: I will .limit () Items to prevent what could be a big problem. Btw, does React Studio support Cursors to manage queries?


#12

I’m not 100% sure but you could try to add e.g. .startAt($slot(‘dataslotname’) into your Query in Data sheet view.


#13

Hey Antti. Awesome last React Studio update! The first thing I did was open the new experimental “Edit Template” feature. I’ve just tried using the example above but it didn’t work. It behaves like nothing is happening. Is there any requirement? I mean, the way you structure screens, components and lists and the right place to edit the template?

Thank you



#14

No there is nothing special in my project file.

Basically the code creates query/fetch Firestore collection every time when it is loaded into list and then creates array out of it. Array is then set as data source for the list (with a value transformer script: return this.state._items;)

In my example i’ve used subcollection for comments but i don’t see any reason why you couldn’t create query to “main level” comments collection as well.

Here’s the project file (unfortunately without Firestore config): https://s3.amazonaws.com/sc.neonto.com/example_projects/socialFeedArrayTesting.rsproj.zip


#16

Me too. I changed to sub collections just to get organized. It seems easier if kept at a shallow level. Thanks for sharing the file. :slight_smile:


#17

Hi Antti. Good morning over there.

I was able to make work the feed with posts and comments using the template editor. However, I couldn’t delete an entry for comments. Nothing happens.

Also, after a comment is made in any post, and then you post a new one, comments will change places appearing in the post where they don’t’ belong.

I was enabled to reproduce your sample 100%. I mean there is a Key with numbers 0 and 1 in the datasheet, that I couldn’t make it work.
I suspect that this is causing this problem.

Another question. For setting the array in data tab. Where are you setting this? an empty field in datasheet?

I invite you and whoever is interested in testing the app to visit.
https://catalyzrapp.firebaseapp.com/

For Antti, that is register in the neighborhood Sumare, you can find 4 post. For the test, simple post the the fifth.

Thank you


#18

If you’re using the array as data source for list then you cannot use Delete. If you debug the delete button code you see that Firebase Delete and Add goes through Data sheet. When there is an array used as data source then there is no Data sheet present at all in the exported code.

Delete requires “connection” to data sheet. you could do probably do this by creating details view which loads needed Data sheet row as data source from the screen.

The Array in Data tab is set in Items Array setting and it’s value transformer script.

Adding new comments works on my demo project. Maybe you’re not addressing the comment key properly into data slot (if you’re using sub-collection).


#19

I see. Good idea. I thought something similar, limiting the list to (3), without the delete button and at the end, using the RS tail block a link to all comments. Finally there you can delete the entry.

About the Array. In your case, the property is set to “comments test”. where is commentstest?

My other question is how do you set the “key” as I can see in your data sheet? In your sample, the field is empty, or not set. However, if you leave it blank, it will not be saved and the toy will not work properly, I guess.

And finally, document_ref
In your case, in the data sheet filled " SocialFeed/2Q3ppKTZTSWgbeDdH9ap " How do you do that? I men writing the path?

Thank you for your help


#20

Key and document_ref are just accidentally in the demo app’s Data sheet. They don’t have any purpose and I guess they appeared while I was testing Save data interaction. Key is only used because in React list items should have some sort of key for each list item. It’s just a value starting from 0. Key is also reserved name so one should not use name key in any Database field.

Read more e.g. here: https://www.robinwieruch.de/react-list-key

Comment test is simply a property which exists only so that we can load the script. It does not contain any data. There could be prop with any name instead of Comment test.

As you can see this kind of custom script usage causes project to become pretty messy.


#21

Thanks for the clarification. I was hopping that was the problem. :worried: