Live view when changing a document/value in Firestore

Hello,

My main screen shows a list of elements from my database and each one of those documents has a registry that is a specific value for the user. Basically it is a list within a list and I achieved to show that value just fine after some help in this post.

Now my problem is that when the value is changed, the component does not show the new value right when it changes and it is necessary to refresh the page or visit some other page in the web and come back and it will be just fine. There are also some issues when there is a grid showing some elements from my database in Firestore and I delete some document and sometimes it disappears but the rest of remaining documents create some weird visual effect because they occupy the empty space left by the eliminated document but with images or names mixed.

I wonder if there is a way to live view the values that I mentioned and also make it more efficient when showing the database documents.

Thank you!

If you’ve populated the “inner list” with Items array then the connection between Firebase and UI will be “broken” and live updates will not show up in the inner list. I’m afraid but making that work will probably require some custom coding from your side to make the inner list listen the Data sheet values.

Regarding the Grid not showing the elements. It’s impossible to get better idea of this without debugging the code on your project. I’d guess the UI issues (When deleting documents) are related to the fact that part of the list item component values comes from Data sheet and the inner list comes from Items Array list which is not linked to the List Data state.

Thank you so much for your response. You were right and it was necessary some modifications of the code to make it work. I am not a developer so I just understand some basic concepts in the code but I am not able to generate by myself. However, I was able to make it work with the help of a friend so I wanted to share the code just in case it is useful to some other person working in a project that needs the same that I needed. Here it is the code that I put in the script editor within the component I wanted to show the database value in live.

import React, { Component } from 'react';
import './App.css';
{{IMPORTS}}
import firebase from 'firebase';
import firestore from 'firebase/firestore';

export default class {{CLASS_NAME}} extends Component {

{{PROPERTIES}}

  constructor(props) {
    super(props);

    this.state = {
{{INITIAL_STATE_PROPS}}
    };
  }

  loadScore()
{
  //Scores Query starts
    const db = firebase.firestore();
    let userID=this.props.appActions.dataSlots['ds_SlotUserId'];
    let preloadID=this.props.dataSheetRow.document_key;
    let scoresRef = db.collection('usuarios').doc(userID).collection('scores');
    let jsonArr=[];

    let query = scoresRef.where('preloadID', '==', preloadID).where('userID','==', userID).get()
    .then(snapshot => {
    if (snapshot.empty) {
      console.log('No matching documents.');
      return;
    }
    snapshot.forEach(doc => {
    	console.log(doc.id, '=>', doc.data());
    	const data = { ...doc.data(), document_key: doc.id, document_ref: doc.ref };
    	jsonArr.push(data);
    });

	this.setState({"scores": jsonArr})
  })
  .catch(err => {
    console.log("Error getting documents", err);
  });
	//Scores Query ends
}
  
  componentDidMount() {
 {{COMPONENT_DID_MOUNT_CODE}}
	this.loadScore();
  }

  componentWillUnmount() {
{{COMPONENT_WILL_UNMOUNT_CODE}}
  }

  componentDidUpdate() {
{{COMPONENT_DID_UPDATE_CODE}}
  }

  componentWillReceiveProps(nextProps) 
{
  const songID = nextProps.dataSheetRow.document_key;
    let song = nextProps.appActions.dataSheets.filteredScores.items.filter(item => item.preloadID === songID);
    if (!this.state.song) {
      this.setState({
        ...this.state,
        song
      });
      return;
    }

    if (this.state.song !== song) {
      this.loadScore();
      this.setState({
        ...this.state,
        song
      });
    }
  }

{{METHODS}}
}

Thank you so much!

3 Likes