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:
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.
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.
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.
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.
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:
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?
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.
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.
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.
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:
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.
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.
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.
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.
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.
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.
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.
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
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!
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.
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.
