Issue refreshing a list/grid from a collection in Firestore

[petoma]

Hello,

I have a list of documents that reflects one of the collections in my Firestore database. It does not happen always but sometimes when I delete one of them, the rest of the elements mixed in a weird way and it seems as I have duplicated or mixed elements. However if I refresh the page or go to another and come back, it is just fine. So the issue is related to refreshing properly the UI. Here I leave a small video I recorded of the issue:

Bug_ListOfDocuments

If I delete the documents to the right, with no elements later it goes fine. The issue appears when the element that I delete has other to its right because it does not reallocate and refresh properly.

How could I fix this?

[ousooners2834]

I wonder if you can trigger a page refresh of sorts when you hit that button. Idk this is a good one for @juha_neonto or @Antti_Neonto to give some advice on. I would be interested in knowing that best practice here.

[Antti_Neonto]

One can always use “Refresh Data sheet” interaction if you want “force” Data sheet to reload data form server.

[petoma]

I just tried that and it keeps showing the same behaviour. The button that I was clicking in the video has 2 interactions:

1. Delete Component entry
2. Refresh Component data sheet

However, when I delete an entry that has elements to the right in the list shows that behavior that was visible in the video.

[petoma]

I also tried to establish a specific button to refresh the dataSheet and it does not work either. The behavior remains and there are issues when I delete the first elements of the list. It does not happen if I delete elements in the end of the list.

listBug afterRefreshingSheet

[ousooners2834]

Can you paste pictures of your react studio and the code you have doing all this? There could be something with how you set it up but can’t tell from what you have posted.

Also - run some experiments after duplicating the react studio file. Like try loading a whole new screen once you do that and see if it persists. We can narrow it down that way easier.

[petoma]

Of course. I must say that it is something that always happens when I create a list/grid with documents from my database that are shown through a component. For example, I have another screen that shows data from my users like a table. I created a component which basically a row with different columns showing the name, email, date that was registered and a score obtained. In that row I have a button to delete that entry and when I use the button it works and delete the registry but the UI is refreshed and I need to refresh the page. It something similar to this issue but with columns and rows of text.

Back to this particular list, I have a visual component which is basically a card:

Then I have a dataSheet that is connected to one of the folders of my users, showing some of their documents:

Then, in the Home screen I have a horizontal list/grid which I link to that dataSheet:

And it is filled with the component that I showed above:

I can share the code of the component and the Home Screen where the list/grid is but I don’t want to overwhelm this with too many code. How should I share the code?

[petoma]

I have been digging deeper into this and I believe the issue is a general problem refreshing the information from the database when the collection is in Firestore. Basically, when I create a list/grid based in a dataSheet that takes its values from Firestore, it will not show properly the values unless I refresh the page. It the new element goes at the end of the list, there won’t be a problema and it will come up. But if the new element is to be in the beginning of the list, it will mix the present elements with the new one. It happens with every list that I have test in React Studio.

Here I have prepared a really simple example. I have created a simple component with two fields: name and userEmail and 2 buttons to edit and delete those entries.

Than I have created a Screen where I have placed a list/grid based in that component that takes the values from a the dataSheet “testCollection”:

I have added an additional component to write entries in that “testCollection” that I can reveal/Hide with the floating icon.

I have recorded a video where I show what happens when I add entries that are supposed to be included in the list. You can see the information get mixed the same I showed with the cards in my previous emails.

ShowingBug in testCollection

I can provide the code for the components or the Screen but the issue is general to every grid/list that I have done in React Studio showing information from Firestore.

Let me know if I have to provide more info.

Thanks.