2

I have a calendar driven by data from firebase. When a user makes an edit, by moving or resizing a task, it will quickly move back to its original position, then the database will update the client, and the new data will be shown on the page.

Here is a simple diagram to explain:

A - User moves task in calendar UI
↓
B - UI flicks back to its previous position
↓
C - Data is sent to Cloud Firestore
↓
D - Updated data is returned to the client via a realtime listener
↓
E - UI is updated

The delay between points A and E can be as small as 50ms, but in times as long as 1000ms.

Is there any way, after a user makes a change, to store temporary data in the user's browser that reflects the updates while the data in firestore is being updated? When the realtime listener fires, it will reset the temporary data and all will be up to date.

This is my current code to listen for changes and update the projects variable:

const [projects, loadingProjects, errorProjects] = useCollection(
    organisationID && firebase.firestore().collection('organisations').doc(organisationID).collection("projects"),
    {
      snapshotListenOptions: { includeMetadataChanges: true },
    }
  );

How would I go about implementing a system like this in React?

Benjamin Sommer
  • 1,058
  • 3
  • 15
  • 35

2 Answers2

3

One way to do this is to save the data to the local state at the first time you fetch it, and the calendar will refer to it.

That is, after the first rendering, the state is separated from firestore.

Something like this.

function App() {
  const [localData, setLocalData] = useState(null);

  useEffect(() => {
    setLocalData(dataFromFirestore)
  }, []);

  const handleClick = (data) => {
    setLocalData(data)
    saveDataToFirestore(data)
  }

  return <Calender onClick={handleClick} data={localData} />
}
banyan
  • 3,837
  • 2
  • 31
  • 25
  • Is there a simple way I can listen for changes from the hook so I can update the local store? I know in your example the state is separated from firestore completely, but the app is multi-user, so if another user updates firestore, this client would have outdated data. Ideally after every change is safely in the database, the onSnapshot would be triggered and the new data would be written to the local store. This way, if another user updates the database, the change will go through to the client and update his screen. – Benjamin Sommer Mar 25 '20 at 18:44
  • 1
    Did I understand it right, that "projects" holds always the live data from firebase? In that case you could use the useEffect() Hook to always update localData when projects changes: useEffect(()=>{ setLocalData(projects); }, [projects]} – torquan Apr 03 '20 at 11:46
0

Don't know you can switch or not but one solution is use Firestore database for this purpose as in this this database even if your database is not actually updated it is intelligent enough to see the change and update the data.

Con: As it is billed according to number of times it read database this might reflect in your bill

REALWISHALL
  • 9
  • 1