[REACT] StateTrackingManager configuration triggering an error

[marciogurka]

Forum post

Using React Gantt, when updating the store with the stm enabled, it triggers an Id duplicate error. It looks only with this configuration in the project model

  const onDataReady = useCallback((projectModel) => {
    if (projectModel.current.stm.disabled === true) {
      projectModel.current.stm.enable();
    }
  }, [])

  const project = useRef(
    new ProjectModel({
      stm: {
        autoRecord: true,
      },
      taskStore: {
        autoTree: true,
        transformFlatData: true,
        data
      },
      onDataReady: () => onDataReady(project),
    })
  );

I also attached a sample project to reproduce the error

basic.zip

[canonic-epicure]

So what happens in this ticket:

1. These two "atoms" (I'm not sure whats the right term for reactive data in the React):

    const setUndoRedoStates = useCallback((projectModel) => {
        setCanUndo(projectModel.current.stm.canUndo)
    }, []);

    const onDataReady = useCallback((projectModel) => {
        if (projectModel.current.stm.disabled === true) {
            projectModel.current.stm.enable();
        }
    }, [])

Makes react think it needs to re-render the whole Table component. (That is why the bug disappears when this line setCanUndo(projectModel.current.stm.canUndo) is commented.) Then, the whole Table constructor is called for that purpose.
2) This is already an expected thing, as it will create a new instance of ProjectModel using the same initial data. More over , the data is exactly the same object, that was used during the initial data load (from initial rendering).
3) Then, it seems our transformFlatData code mutates that object in-place so that the flat list:

    const data = [
        { id: 1, name: "Parent", status: 'doing', startDate: new Date()},
        { id: 2, name: "Child", parentId: 1, status: 'doing'  },
      ];

becomes a tree structure by moving the Child task into the children of Parent, but it keeps reference to the original object where it was, so the data looks like this:

    const data = [
        { id: 1, name: "Parent", status: 'doing', startDate: new Date(), children : [ REF_TO_CHILD ] },
        { id: 2, name: "Child", status: 'doing'  },
      ];

4. When loading the data, the Parent task goes first and all its children, so processing Parent will also pull in the Child
5. The Child is attempted to be pulled in again from the 2nd position in the data array, producing the exception.

[canonic-epicure]

This is why, the initial loading is performed w/o errors (the data is not yet mutated), but the subsequent attempts to load with the same data object will throw.

I think the transformFlatData code should not mutate the data - will try to remove that and see if that breaks any other code.