List inside a list not refreshing properly

I have noticed that now there is something not working as it used to do just fine before. I am guessing it might be related with some RS update.

In one of my components, I have a list that shows a list within a list. Something similar to the comments to each restaurant in the demo example. To achieve that comments are properly refreshed, I used the Script editor and wrote the following:

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();
let userID=this.context.appActions.dataSlots[‘ds_SlotUserId’];
let preloadID=this.props.dataSheetRow.document_key;
const ref = db.collection(‘usuarios’).doc(userID).collection(‘scores’)
.where(‘preloadID’, ‘==’, preloadID)
this._cancelSnapshot = ref.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({“scores”: jsonArr, _itemsDocKey: docKey});
}
);
}

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

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

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

{{METHODS}}
}

Then I list the scores with the properties section and it was working fine but now it does not refresh properly and it might be showing a different score than the one that correspond to the document.

Is there any way to fix it?

Ok. I have found the solution. It was not only that I had to add the:

import ScreenContext from ‘./ScreenContext’;
static contextType = ScreenContext;

But also that the update modified two lines and I had to add the dataSheetRow word to make it work. This is the working code now:

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

export default class {{CLASS_NAME}} extends Component {

static contextType = ScreenContext;

{{PROPERTIES}}

constructor(props) {
super(props);

this.state = {

{{INITIAL_STATE_PROPS}}
};
}

_updateItems = (docKey) => {
const db = firebase.firestore();
let userID=this.context.appActions.dataSlots[‘ds_SlotUserId’];
let preloadID=this.props.dataSheetRow.document_key;
const ref = db.collection(‘usuarios’).doc(userID).collection(‘scores’)
.where(‘preloadID’, ‘==’, preloadID)
this._cancelSnapshot = ref.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({“scores”: 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);
}
}

{{METHODS}}
}

1 Like

Hi, great that you got it working. Custom scripts may require some additional tweaks after the latest updates. The code generation is using the screenContext for passing data between components which is a bit different than it used to be.