Using a list inside another list

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?

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

1 Like

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


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

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:

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.

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

Thank you

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).

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

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.

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

Hi Antti. I tested several times your demo and looks like it has the same problem. Please take a look at the prints. I never commented on Pauli’s post. This happen right after you post a new Status. Not a comment.

Actually, data are saved in the right place and data slots are alright. Feed is messy only after making a new Post Status. if you go to another screen and come back, everything will be fine.

Yeah it’s probably about that state is not updated for list items with arrays because the comments array is not created the “standard React Studio way”. I’ll check this with developer tomorrow.

1 Like

great! wishing they will find the solution. Thank you []

Hi, I discussed with developer and the issue is in the Code template and how React updates lists. Here’s a new code template for my demo project:

import React, { Component } from ‘react’;
import ‘./App.css’;
{{IMPORTS}}
import firebase from ‘firebase’;

export default class {{CLASS_NAME}} extends Component {

{{PROPERTIES}}

constructor(props) {
super(props);

this.state = {

{{INITIAL_STATE_PROPS}}
};
}

_updateItems = (docKey) => {
const db = firebase.firestore();
const collection = db.collection(SocialFeed/${docKey}/comments);
this._cancelSnapshot = collection.onSnapshot(
(querySnapshot) => {
let jsonArr = [];
let key = 0;
querySnapshot.forEach((doc) => {
const data = { …doc.data(), key: key++, document_key: doc.id, document_ref: doc.ref };
jsonArr.push(data);
});
this.setState({_items: jsonArr, _itemsDocKey: docKey});
}
);
}

componentDidMount() {
{{COMPONENT_DID_MOUNT_CODE}}
this._updateItems(this.props.dataSheetRow.document_key);
}

componentWillUnmount() {
{{COMPONENT_WILL_UNMOUNT_CODE}}
this._cancelSnapshot();
}

componentDidUpdate() {
{{COMPONENT_DID_UPDATE_CODE}}
let itemsDocKey = this.props.dataSheetRow.document_key;
if (this.state._itemsDocKey && this.state._itemsDocKey !== itemsDocKey) {
this._cancelSnapshot();
this._updateItems(itemsDocKey);
}
}

componentWillReceiveProps(nextProps) {
{{COMPONENT_WILL_RECEIVE_PROPS}}
}

{{METHODS}}
}

In case the forum breaks the code here it is in text file: https://s3.amazonaws.com/sc.neonto.com/example_projects/socialFeed_PostItem_template_new.txt.zip

1 Like

Awesome Antti! And again, thank you for sharing such good tool

Hey! I didn’t see this post and it is exactly what I have been trying to figure it out for some time. I have had issues updating lists in my project when adding or deleting documents since the beginning. Here there are a couple of posts that I published trying to find the exact issue:

https://discuss.reactstudio.com/t/bug-refreshing-list-grid-adding-elements-in-between-existing-documents/810

https://discuss.reactstudio.com/t/issue-refreshing-a-list-grid-from-a-collection-in-firestore/803/8

In the example that I provided the issue was showed in a list/grid with input fields:

But it does not happen only with input fields but also when documents have images or different values.

Edit. @Marcos_Alencar helped me to apply this solution to my lists but it is not what I am looking for because with the array solution I am not able to delete documents, just to add them. I will wait until this issue with the lists/grids is approached by the React Studio team. Thank you!

Regarding using input fields in a list.

What should happen is the data is updated from server? It`s pretty complicated when you think about it, sometimes it should update the input field values but what if user has already edited the field but not submitted it and same time a new value is fetched from server?

We probably implement this so that input fields are updated only when screen loads or ”refresh data sheet” interaction is run.

I understand the situation but I believe the issue in React Studio is not exactly that. When I create a list with input fields, when editing those fields it does not edit the database until I click the “icon” that has the “save data” action to the dataSheet. The problem is when a new element is added to the collection that the list is updated “partially” showing mixed elements. It happens the same with the cards that I have without input fields but with images and some other elements (text, icons, image, etc.). I am going to approach to configure these lists using the array method and see if that solves the issue but I believe -and my knowledge is limited- that lists/grid should update better because it is needed a complete refresh in the page to show modifications like added or deleted documents.

I created a new thread precisely asking about this and then I remembered @Antti_Neonto shared in some thread the code to update lists in RS. I finally found it here. Is it possible that the code that was shared need an update to accomodate the latest updates of React Studio?