[REACT] TypeScript issue with BryntumProjectModel

[jasonlunsford]

Dear Support,

We're having a tough time nailing down the TypeScript issue we're seeing. The error we are seeing:

Screen Shot 2023-08-14 at 13.15.25.png (156.65 KiB) Viewed 312 times

We have tried assigning multiple types to projectRef and boardRef, including:

ProjectModel
TaskModel
BryntumProjectModelProps

Our source code:

const DeliverablesBoard = (props: DeliverablesBoardProps) => {
  const boardRef = useRef<any>(null);
  const projectRef = useRef<any>(null);
  const taskBoardConfig = useConfig();
  const [taskData, setTaskData] = useState<any[]>([...props?.data]);
  

  ...
  

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

[marcio]

Hey Jason,

Why are you using a useRef for the project configuration and not just a plain JS object? What's the use case of your project? Can you provide more clarification to that?

[jasonlunsford]

Great question Marcio,

I'm still learning how to use your technology, and I ran into several strange issues using ProjectModel (disappearing data, cards not rendering, etc). I ultimately ended up just copying directly from an example I took from your website, the "Inline Data Demo (React)" example specifically. The source code I used as an example is below.

Is there a better way to set up my ProjectModel??

function App() {
    const taskBoard = useRef();
    const project = useRef();

const [tasks] = useState(projectData.tasks);
const [assignments] = useState(projectData.assignments);
const [resources] = useState(projectData.resources);

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

export default App;

[marcio]

Hey Jason,

That's the recommended way to set up when using ProjectModel.

If you're having some buggy behavior please let us know to check and assist you.