Inconsistent behavior from multi-level Firebase data

Hello world. I’m helping a friend make a coaching app for fencing. I’ve already created data in Firebase that includes these levels:

  • Clubs (Collection)
    • Fencers (Collection)
      • Individual Fencer Entries (Documents)

After a user selects a Club to view, the next screen has a List of Fencers at the Club to view.

When I use the Collection ID “Clubs/$slot(‘ds_ActiveClub’)/Fencers” for the FencerData Data Sheet, React Studio loads updated data from Firebase, so I think I have the syntax there correct.

Otherwise it wouldn’t work at all. However, when I run a preview, the List shows no data for Fencers:

When I replace “$slot(‘ds_ActiveClub’)” in the Collection ID with the document ID for the test club in the FencerData Data Sheet, the data loads from Firebase on the data sheet, and in the preview, the list includes fencer data:

Please advise. Thanks.

Have you debugged this so that you check that the Data slot “ds_ActiveClub” really has the value at the runtime? You can do this e.g. by adding a text label into screen and connect it to the Data slot.

Confirmed. The value is certainly passing through. Actually, as I look at my data slots, when I’ve done the preview, I haven’t been removing the default value from the data slot (we’re having issues with the picker, per another thread), so at no point is that value ever anything other than that key value.

Speaking of which, though, do you know why this would show up eight times? I only have the one text block, linked to the data slot’s value, and it shows up more than once.


Hi,

Unfortunately I’m not able to figure out the issue based on the screenshots. In the chat app we have similar structure where the Chat messages collection is loaded from “path”: chatrooms/$slot(‘ds_selectedChatroomKey’)/messages and it works.

If you want us to quickly check out the React Studio project file (.rsproj) you can zip it and send to hello@neonto.com

Thanks. It’s my friend’s project, so let me get permission from him before I send it. Cheers,

-Jeff

Could that be the issue then? ie. at runtime, it’s using the default value of the dataslot - which I’m guessing has no data.

What happens if you go to DataSheet tab, change the default value of the dataslot to the one with the test club?

That’s the value we have in that slot right now, which is why it works at all. I’m having another, related issue with using the Picker to select clubs. Today, one of my tasks is to set it up as a List of Clubs instead. We believe that will at least let the user pick whichever club they want. Right now, since we’re in pre-pre-production, it’s just hard-coded to flow into the test club.

Gotcha. I tend to go with a flatter structure too to keep things simple. Eg. I rarely use a data collection inside a collection.

Personally I start with each screen one by one, and not move on until I have the entire screen debugged. I do find that certain debugging can take a long time as there are some idiosyncrasies with the application.

One of the best ways to debug is to open the .js file(s) in the Works In Progress directory. You can see what React Studio does and where it places the various pieces of code. Also, you can change the .js files manually in a text editor and see changes right away in the web browser. But of course these changes are not reflected in the React Studio project file so I would have to add the “fixes” back in after.

Thanks, Tom, but I’m afraid I don’t know anything about coding, myself. The guy for whom I’m building the app does, though, so at least there’s that. :wink:

Meanwhile, I just sent this to Neonto:
This is really weird. I just made a List of Clubs to get around the limitations of the Picker. I removed the document key from the Data Slot, and tried a preview of logging in. It sure looks like it’s working correctly. Another odd difference is that the key only shows up once on the next page, versus multiple times when we used the picker. I think I’m unblocked, and that the List will be our best solution for our project, but that’s some very odd behavior for the picker.

You had the persistence setting on for the Data slots which mean that the Data slot values are stored in the browser’s local storage. This means that you either need to clear the local storage or the whatever “old” you may have in the Data slot will be in the Data slot when you run the app.

About the many document keys in the text label. The text box in select button’s Save data interaction has all those values. You can see it if you click the text field and copy the value with cmd+a and paste in the text editor. It’s just so small text filed that the other “lines” are not visible.

Lastly the picker is put into component and the limitation is that it can expand only inside the component. That’s why you dont see the whole list.

Let me update this. We’ve found that when we copy-paste either buttons that save data to Firebase OR the fields from which they pull data, the data to which the originals refer often persist in the copies.

indent preformatted text by 4 spacessendData_elButton_to_POCCards1 = () => {
const dataSheet = this.props.appActions.getDataSheet('POCCards1');

let row = this.props.dataSheetRow || {
  "BOTTOMTitle": this.props.BOTTOMTitle,
  "BOTTOMFlavor": this.props.BOTTOMFlavor,
  "BOTTOMCardBody": this.props.BOTTOMCardBody,
  "dataSheetRow": this.props.dataSheetRow,
};
row = { ...row, 
  Theme: this.getValue_elThemeField(),
  TOPTitle: this.getValue_elTitleNew(),
  TOPCardBody: this.getValue_elBodyNew(),
  TOPFlavor: this.getValue_elFlavorNew(),
};
if (this.props.dataSheetId === dataSheet.id) {
  return this.props.appActions.updateInDataSheet('POCCards1', row);
} else {
  return this.props.appActions.addToDataSheet('POCCards1', row);
}

}

The references to “bottom Cards” are old data, not tied to the existing fields or buttons. We don’t know a way to remove those connections without deleting and recreating them, which has been our work-around.

Let me update this. I’ve made a tiny sample app to demonstrate this bug. I’ll email that to hello@neonto.com. Thanks, @Antti_Neonto

Note that the button that picks classes doesn’t work, whether it tries saving to the datasheet containing all characters or to the one that only contains the single “active character.” the button generates the code below. Notice that it’s trying to reference the Firebase document by the ID that’s stored in document_path. This key does not exist in that sheet, but document_key does, and the line that’s trying to reference the Firebase document by document_key is commented out. Thus, when it goes to try to get the Firebase document, it throws an exception because the path to the Firebase document doesn’t exist.

From DataSheet_activeCharacter.js

 replaceItemByRowIndex(idx, item, options) {
    //super.replaceItemByRowIndex(idx, item, options);
    
    console.log("update in firebase: ", item);
  
    const db = this.firebase.firestore();
    //const collection = db.collection(options.servicePath);
    //const docRef = collection.doc(item.document_key);
    const docRef = db.doc(item.document_path);
      
    docRef.update((({ key, document_ref, document_key, document_path, ...item }) => (item))( item ))
      .then(() => {
        this._fetchComplete(null, options);
      })
      .catch((error) => {
        console.error("Error updating document: ", error);
        this._fetchComplete(error, options);
      });
  }

I think there was a good reason to use document_path instead of document_key in data sheet operations. I just don’t remember what it was anymore. document_path should be available in exported app it’s just not visible in Data sheet editor. Even though document_path is not available in Save data -interaction settings you can write it in Save data -interaction’s ‘transform value’ script.

Example script:

input['document_path'] = 'Characterzzzz/'+this.context.appActions.dataSlots['ds_ActiveChar'];
return input;

Also please change Class property in Save data settings to use dataSheetRow.Class value instead of Class (Element) value.

Thanks. I added that script to both of the edit buttons, but it still doesn’t work. I’m not able to pick the data sheet row on my app for some reason.


I’m going to go try that script with some of my other project files to see whether I can get those to work.