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.

[petoma]

Instead of continuing in the React Studio Updates I will post it here as I believe the issue that I was talking about with the recent release is the same that I was posting some time ago. In the previous videos and pictures I was showing an issue that I have had with lists not showing properly the list of documents when some changes are done. I have recorded a new video using the last Beta version and with the option “Don’t export placeholder data” checked in the dataSheet:

ListRemainedDocumentsIssue

In the video I have a Screen with a collection of documents without any filter. The label of the filter that I am using is the text in the bottom right of each card, which are the spanish words for the difficulty levels.
Then I begin to select the different levels to check how it does it, as the list is configured to change the query when I change the picker.

• The first level that I select is “Elemental” and there are no matching documents in the database so it is correct so far.
• The second level is “Principiante” and it goes just fine. From showing no elements, all documents in that level appear on screen. Perfect.
• The third option is “Muy fácil” and again it goes fine. All of the previous documents disappear and I get all the new one. Alright.
• The fourth level (Fácil) is the first time that I get the issue. There is one document from the previous query that remains in the screen. I circle with the mouse that document pointing the text of the level not matching with the picker.
• I continue with the next level, “Fácil/Intermedio” where that particular document remains in the screen and refuses to go.
• With the next option (“Intermedio”) the following documents are just refreshing fine, but the first one of the list is the issue still present.
• The last of the options (“Intermedio/avanzado”) shows how the issue scalates and increments. I have no matching documents in the database with this level, so is should be empty like the first option, however I get three documents, the first one persists and I get two more that shouldn’t be there.
• After that I go back to the first option “Elemental” where there was no documents, and there they are the three rebels.
• Then I visit some other screen and when I come back they are gone and the list is empty -as it should be- reflecting properly the “Elemental” level that is selected in the picker and dataSlot.

I have left the console in the right side and I hope it is useful to discover and solve the issue.

Anything else that is necessary just let me know.

[Antti_Neonto]

This took some time to understand how the filtering works but have you tested to load the exact query into Data sheet? I mean the query where(‘level’,’==’,‘Fácil’)?

When I test with your project I get notification that there is no index created for that.

[petoma]

If you need me to explain how it is done I have no problem. Indeed I have tested exactly that query. As for the ‘level’,’==’,‘Fácil’ this is the correct output:

This correct result is obtained if it is the first time that I filter the list. However, if I keep changing the levels (queries) at some point there will be some documents that remain there, and coming back to the same query as before (‘level’,’==’,‘Fácil’) the output is different:

That screenshot shows exactly the same query but the first four documents are not supposed to be there, the correct query begins in the second line. I have been changing the query for some time because the longer that I keep changing, the more documents that remain there. It is accumulative. If one document decide to stay, the following documents that decide to stay will do it after it.

Maybe you have a previous version of my project. I am constantly changing things and recently I have been improving that part. Maybe you remember when I changed the way the pickers work to be able to filter with two conditions (two pickers). I am going to send you the current version of the project and I will give your email account access to read all the documents in the database so you can test yourself.

The project is deployed in:

https://proyectopiano-a7084.web.app/

If you need anything else just let me know.

P.S. @Antti_Neonto Done. I just sent the project and changed the status of your email in my database so you have access to all the documents.

[petoma]

Something you may find interesting. I exported the last version of my project with the last stable release of React Studio and the issue is not there. At least I have not been able to reproduce it and I have tried for a while. So it seems to be something that came up with that beta version. What I do still have is the issue with the horizontal lists in the home screen where the elements get mixed when I delete some of the documents like I showed in previous messages in this thread, but the most recent issue refreshing the different queries seem not to be present in the stable release of RS.

[Antti_Neonto]

Debugging your project is definitely quite tricky to debug but maybe adding additional logging to the Firebase plugin will give me more insights. I’ll give it another look on Monday.

I dont think we’ve changed anything with the code generation for the lists with the new version of Studio. The only thing that could have something to do with this was that in which life cycle method the Data slot scripts are triggered.

Anyway if you’d like to get the ‘real’ search and category thing working you should check if you could host the song information e.g. in Xano’s backend and keep using the Firestore for signup and other data. With Xano you could build much more complex filterings for the song data without needing to keep many copies of each song just for filtering purpose. The downsize would be that your song data would be publicly available through API (in case someone uses developer tools and reads the JSON…) but that’s a trade-of if the login is kept in the other backend.

[petoma]

I am sorry if my project is not easy to debug. I am not a programmer so I don’t know about protocols to facilitate that. If you let me know what you need I will gladly do it. I am certain that the issue is not coming from my firestore data or query because I have checked in detail and it is just fine. And also the same query shows different outputs depending on the context. What I have done to try to show this is to create differentiated screens for each query. So in the video that I share now, there are a specific screen with a list that is referencing to a specific dataSheet that has that specific query. That means that the list needs to be refreshed and because of that if shows the correct output. However, if I switch the query with the picker, that means that I have a list in a screen that needs to be refreshed and show a different dataSheet for each option, and that is where the issue shows. It does not refresh properly always. There are some documents that remain there.

filterIssue

I have taken a real close look to it and I have thought about everything. I have thought about the issue being related with the accent in some categories (Fácil, Fácil/Intermedio,…) but I don’t think it is that because I have elements from the “Intermedio” level that also remain there and that category does not have accent. I have manually removed the documents that I see they decide to stay there, but then there are others that are the one remaining. What I have noticed is that the documents that remain are located mainly at the end of the line. I have 4 documents in each row, so the fourth document of the first row is one that use to remain when I switch category.

As for using Xano, I wouldn’t mind to move to a different database but I have seen that the Free plan allows only 100 records of data, which I believe wouldn’t be enough for my project. This is just an educational project and I take no profit from it so I would like to have an option that does not require to pay subscription. If at some point I do have profit from it, I would gladly go for a paid plan.

As always thank you and let me know if you need me to give you some info. I am quite certain that there is some way to render the list in React Studio that creates this issue. May it be related with the change that you did with the “Show more” button? The new behavior is related to how the lists refresh to show new elements, or that is what tells me my intuition.

[Antti_Neonto]

I added some additional logging to Firestore plugin and was able to get some understanding about the issue. Firestore seems to return list of songs without e.g. Clocks (Coldplay) but it appears in the list.

Anyway I need to debug this with the developers next week. I’ll keep you posted

[petoma]

Thank you for looking into this. I keep digging about it. I am going to try now to create the list as a component and include the component in the screen. Maybe that changes something. I will come back later to let you know. By the way, I have improved a little bit more the simplified project deleting some unnecessary elements and including something that might be necessary to run the project and not get an error. I am going to send the updated version to the email. Just to let you know that it is convenient to use the last one that I am sending you.

P.S. Ok. I am back. I have tried creating the list in a component and including the component in the Screen but the result is the same. Now, after trying several combinations I have noticed the issue happens always with the same documents:

• If you go to “Muy fácil” and then to any other level you pick, the fourth element in the list -last one of the first row- will remain in the screen. It happens that it is “Clocks” but if I remove that element from Firestore, it would happen with the document that takes that specific place in the list (last one in the first row).

• If you go to “Fácil/Intermedio” and then to any other level you pick, the first document in the last row but one -penultimate row- will be the document staying in the screen. It is “All you need is love”, but as with the previous, if I remove that document from the list, it would happen with the one taking its place.

• If you go to “Fácil” and then to any other level you pick, the last element of the third row with be the one staying. It is “Bohemian Rhapsody” but when I have tried to remove that one, it happens with some other document in that specific spot.

• If you go to “Intermedio” and then to any other level you pick, the second document in the second row will remain in the screen. It is “Adagio” from Albinoni but it would be any other if I make some changes in the database.

Now all those issues are accumulative, which means that if you keep switching levels in the picker without refreshing, you will get more of these documents remaining in the screen.

I hope all this information is useful to solve the issue. Thank you!

[Antti_Neonto]

Great news! We finally found the issue. It was related to duplicate keys in list which causes React to render duplicate rows etc. in some cases. There was actually a warning about this in the console log but we never thought about that would be critical.

We’ll post a new build soon here!

[Antti_Neonto]

Here’s a new build: https://s3.amazonaws.com/sc.neonto.com/ReactStudio_v183_build412_experimental.zip

[petoma]

That’s great news! I have been trying different things but with no luck. I am going to try this new build and let you know. Thanks!

[petoma]

Ok. The problem is gone now but the button “Show more” behaves the same way it did before -in the stable release-. So when I click the button the list refresh entirely and it scrolls up to the top.