[REACT] How to (re)load Kanban Data

[jasonlunsford]

Dear Support,

We are attempting to add a feature where users can dynamically load different data sets into the Kanban board. The data sets are all structured the SAME - no changes to the Columns or the column configuration is required - but the DATA itself is different. Currently we're attempting to load the data via a traditional useEffect together with useState, as below:

const [taskData, setTaskData] = useState<any[]>();
...
useEffect(() => {
   setTaskData([...props?.deliverablesData]);
}, [props]);

I know from analyzing code flow and by placing breakpoints that the data is available and is being set into taskData state variable correctly.

However, NO data is appearing in the Kanban board. Furthermore, I have a function that SHOULD force a reload, but this isn't working either:

  const onLevelChange = (payload) => {
    setLevel(payload);

switch (payload) {
  case 'deliverable':
    setTaskData([...props.deliverablesData]);
    break;

  case 'task':
    setTaskData([...props.tasksData]);
    break;

  default:
    break;
}
  };

The main question is, how can I support dynamic data reloads into Kanban? Here's how I've got my Kanban configured:

class DeliverableTask extends TaskModel {
  static get fields() {
    return [
      { name: 'name', type: 'string', defaultValue: 'Task Name' },
      { name: 'description', type: 'string', defaultValue: 'Description' },
      { name: 'priority', type: 'string', defaultValue: 'No priority' },
      { name: 'lookupActionType', type: 'string', defaultValue: 'Task' },
      {
        name: 'lookupActionStatus',
        type: 'string',
        defaultValue: 'Not started',
      },
      { name: 'endDate', type: 'number' },
    ];
  }
}
...
return (
   <>
      <BryntumProjectModel
        ref={projectRef}
        tasks={taskData}
        taskModelClass={DeliverableTask}
      />
      <BryntumTaskBoard
        height={'100%'}
        ref={boardRef}
        taskRenderer={taskRenderer}
        project={projectRef}
        {...taskBoardConfig}
      />
   </>
);

Thank you for your help!

[marcio]

Hey Jason,

Can you share what your configuration looks like? The React state management looks correct at first sight, but we would need a full test case for us to debug.

[jasonlunsford]

Hi Marcio,

So I found this in your documentation, from this page:

https://bryntum.com/products/taskboard/docs/guide/TaskBoard/integration/react/data-binding#binding-existing-data-to-the-project

The source code does NOT match the copy, but nevertheless here's the copy I'm referring to:

Screen Shot 2023-08-15 at 14.02.31.png (124.1 KiB) Viewed 515 times

Note the highlighted sentence. THAT is what I'm seeing. The Kanban board is NOT rendering any data.

What does this mean?:

<BryntumProjectModel> must be returned first for other components to use it.

Does that mean I need to mount the <BryntumProjectModel> BEFORE I try mounting the Kanban board?

Thanks man!

[jasonlunsford]

Hi Marcio,

Quick update. I added this line to prevent TaskBoard from getting an empty array. This worked, now I'm seeing data on LOAD:

if (!taskData.length) return null;

However, I still cannot CHANGE my data:

  const onLevelChange = (payload) => {
    setLevel(payload);

switch (payload) {
  case 'deliverable':
    setTaskData([...props.deliverablesData]);
    break;

  case 'task':
    setTaskData([...props.tasksData]);
    break;

  default:
    break;
}
  };

Let me know what you need to see and I'll post the code here.

[marcio]

Hey Jason,

Regarding <BryntumProjectModel> must be returned first for other components to use it., it means that you should return as you shared

return (
   <>
   // first, before all components
      <BryntumProjectModel
        ref={projectRef}
        tasks={taskData}
        taskModelClass={DeliverableTask}
      />
      <BryntumTaskBoard
        height={'100%'}
        ref={boardRef}
        taskRenderer={taskRenderer}
        project={projectRef}
        {...taskBoardConfig}
      />
   </>
);

Regarding the state, that looks like a bug, I was able to reproduce that on one of our demos, and created a ticket for it https://github.com/bryntum/support/issues/7313

[saki]

Yes, confirmed, it's a bug. We will investigate/debug/fix it.

[saki]

Hello Jason,

although this is a bug and will be fixed, the workaround is very easy. Bind property events of the project, instead of tasks and it will work as expected. Here is the sample:

    const [tasks, setTasks] = useState([]);

    useEffect(() => {
        console.log(taskBoard.current.instance, project.current.instance);
        setTasks(projectData.tasks);
    }, []);

    return (
        <>
            {/* BryntumDemoHeader component is used for Bryntum example styling only and can be removed */}
            <BryntumDemoHeader />
            <BryntumProjectModel
                ref={project}
                events={tasks} // <-- tasks => events
                assignments={assignments}
                resources={resources}
            />
            <BryntumTaskBoard
                ref={taskBoard}
                project={project}
                {...taskBoardConfig}
            />
        </>
    );
}

[jasonlunsford]

Hi Saki,

Confirmed, your workaround works great. I'll keep this in place until you guys fix the original defect. Thank you very much for the help with this!

[saki]

Jason, FYI, the bug has been fixed. The fix will become available in the next nightly and next patch release.