[REACT] originalData | reverting changes

[david10sing]

Hi

I have the following code to send an update to the server and on success, update some properties of the eventRecord like so

/** Send the request to the server to update the booking */
  updateBooking(booking)
    .then(async ({ data: { attributes: bookingAttributes } }) => {
      /** Once a bookinng is updated, fetch the updated by user details */
      const updatedBy = await getBookingUpdatedBy(bookingid);
      const updatedAt = bookingAttributes.updatedAt;

  /**
   * We need to update the following attributes on the eventRecord
   * to ensure that they are in sync with the database
   */
  const updates = {
    duration: bookingAttributes.duration,
    endDate: bookingAttributes.endDate,
    startDate: bookingAttributes.startDate,
    updatedBy,
    updatedAt,
  };

  await eventRecord.setAsync(updates);
})
.catch(err => {
  IS_DEV && console.log(err);
  console.log('An error occured. Reverting dates for event record.');
  /**
   * If an error occcured, we reset the eventRecord's
   * start and end date
   */
  console.log(originalData);
  eventRecord.set({
    startDate: originalData.startDate,
    endDate: originalData.endDate,
  });
});

Is there a way to set the originalData to the new data on success? The issue is that if a user makes a second update to the same record and there is an error, the originalData refers to the data on first load.

So is there a way to set the originalData or to revert changes 2 to changes 1?

I look forward to your help.

Regards
David

[mats]

Sounds like you're looking for this? https://bryntum.com/docs/scheduler/#Core/data/Model#function-revertChanges

[david10sing]

Hi mats,

I have tried that function and unfortunately it does nothing for me. I've tried to call it in the catch but nothing happened on the grid.

[mats]

Ok, try to debug it and see what's wrong? Works just fine online, try it here for example: https://www.bryntum.com/examples/scheduler/basic/

Move the 'Click me' task then in console:

scheduler.eventStore.first.revertChanges()

[david10sing]

Hi Mats,

I've looked into the revertChanges and what it looks like it's doing is reverting to the previous value. On the first fail, it looks like it is picking up what the modified properties was on an eventResize end. However, on the second try to resize an event, it does not pick up the modified items.

Is it because the revertChanges() function uses set instead of setAsync()?

[mats]

Not following - you can try to make many changes in https://bryntum.com/examples/scheduler/basic/, drag drop, rename a task etc. Then call revertChanges and you'll see it reverts the model to its initial state.

[david10sing]

Where is meta.modified set?

When I revertChanges, sometimes this.meta.modified is an empty object so it does not revert the changes.

[mats]

It's reset after you sync changes to the server

[david10sing]

Hi Mats,

We do not use the standard CRUD way that you guys use for your demo. We post or patch the records and if there is an error on the server, I want to revert the changes.

I am asking when a change happen to an event, where in the code does the old value get stored in this.meta.modified?

For example, during EventResize, after the eventResize, we patch the record on the server. If there is an error, I want to revertChanges. On the first fail, the modified object is populated with the duration and endDate. However, on the second fail, it is not. So the revertChanges does nothing and the grid shows that the endDate has been updated.

So my question is where is the meta.modified object set so I can debug why it is not being set.

[mats]

You should not have to do this manually, it's all handled internally already. The resize feature supports async finalization where you can opt out after asking your server if the change was accepted. Have you seen: https://bryntum.com/examples/scheduler/validation

Easiest way is just to search our sources for meta.modified to learn how / when it's used. Main point for you to look at would be Model#inSet method