I have a two tasks: T1 and T2.
T2 is a children of T1 and I'm using flat data to load it to the gantt:
[
{ id : 1, name : 'T1' },
{ id : 2, name : 'T2', parentId : 1 }
]
In my task store I have 'tree' and 'transformFlatData' set to true.
When the page load it all looks fine, by adding for example new task is causing an error (there is more operations causing this error):
Id collision on 2
I was investigating the issue and found out that when the page load the task store stores 3 records rather than two:
T1 (with T2 inside the children array) and T2 as a task on the same level as T1:
Then in onDataReady I have a breakpoint and inspecting allRecords of project.current.taskStore shows the issue where T2 is children of T1 but also it's on the same level in the array as T1 as I explained above.
I don't really use allRecords, I just thought the issue is with this store as this looked to me as a mix of flat and tree data.
After you said that's the correct behaviour I was further investigated my issue and I manage to replicate the bug.
The 'id collision' error happens only when I pass my data as a prop and then call React setState.
This is a minimal code example which you could try yourself, just run it and hit 'Add new Task' button, please:
When I move the data from props directly to the Table2 all is working as expected.
Also if I remove the line which set the state:
setCanUndo(project.current.stm.canUndo);
this works.
I need to pass the data as a prop and I'm using setState in few places so this is a requirement for me.
Would you be able to advice on how to fix this one please?
BTW.
If I'm using useRef for ProjectModel
const project = useRef<ProjectModel>(.....);
as in this example above the data is not render in React 18 in strict mode. I had to remove strict mode to make it work.
Are you aware of this? I hope this will be resolved in the future.
I deleted the id from addTask function and still have the same error: 'Id collision on 2'.
I hardcoded the id here only for demo purposes, in my app I auto increment it.
I have to use custom ids, but I'm making sure this is unique.
If you try to run this example you can see that this error shows up after you click (just once) on add task (even if you delete id as per your suggestion).
Also the error complains about collision on 2 but I'm trying to add task with id 3 (in this example).
Checking the example that you provided, it seems that the main thing is that you're using useRef, and the re-render process triggers an update in the project config, and the config is not updatable in the runtime. I'm sharing an example using useMemo, and with that, is working just fine.
I'm using useRef because I'm sharing the project with Timeline and TaskBoard, if I use useMemo this won't work.
The useRef comes with one of your example (Timeline).
Could you advise some solution which takes the data sharing into consideration, please?