import React from 'react' ; import { useParams } from 'react-router-dom' ; import { TaskGroup } from 'ProjectPlanner/TaskGroup' ; import { Heading } from 'ProjectPlanner/Heading' ; import { BoardProvider , useBoardContext } from './BoardContext' ; import 'ProjectPlanner/Board.scss' ; export const Board = ( ) => { const boardId = parseInt ( useParams < { boardId : string ; } > ( ) . boardId ) ; return ( < BoardProvider boardId = { boardId } > < BoardUI /> < /BoardProvider>); } ; export const BoardUI = ( ) => { const { board , taskGroups } = useBoardContext ( ) ; return ( < div className = "board spacing" > < Heading style = { { minWidth : '25rem' } } > { board ?. name } < /Heading> < div className = "board-scroll-area" data - testid = "results" > { taskGroups && taskGroups . map ( ( taskGroup ) => { return ( < div className = "task-group-wrap" key = { taskGroup . id } > < TaskGroup taskGroupId = { 1 } name = { taskGroup . name } taskIds = { taskGroup . taskIds } / > < /div>); } ) } < /div> < /div>); } ;