diff --git a/front/src/modules/companies/components/CompanyBoard/CompanyBoardCard.tsx b/front/src/modules/companies/components/CompanyBoard/CompanyBoardCard.tsx index f8e97781cd..65df5fa694 100644 --- a/front/src/modules/companies/components/CompanyBoard/CompanyBoardCard.tsx +++ b/front/src/modules/companies/components/CompanyBoard/CompanyBoardCard.tsx @@ -73,21 +73,22 @@ export function CompanyBoardCard({ entity: Company; pipelineProgress: PipelineProgressProp; selected: boolean; - onSelect: (entity: any) => void; + onSelect: (entity: Company) => void; onCardUpdate: (pipelineProgress: PipelineProgressProp) => Promise; }) { const theme = useTheme(); + const company = entity; return ( {`${entity.name}-company-logo`} - {entity.name} + {company.name}
- onSelect(entity)} /> + onSelect(company)} /> diff --git a/front/src/modules/companies/components/CompanyBoard/CompanyProgressBoard.tsx b/front/src/modules/companies/components/CompanyBoard/CompanyProgressBoard.tsx index 5ad79865d7..11c0d3827e 100644 --- a/front/src/modules/companies/components/CompanyBoard/CompanyProgressBoard.tsx +++ b/front/src/modules/companies/components/CompanyBoard/CompanyProgressBoard.tsx @@ -24,10 +24,13 @@ type BoardProps = { }; export function CompanyProgressBoard({ pipeline }: BoardProps) { - const { initialBoard, items } = useBoard(useGetCompaniesQuery, pipeline); + const { initialBoard, items } = useBoard( + useGetCompaniesQuery, + pipeline, + ); return ( - initialBoard={initialBoard} initialItems={items} pipeline={pipeline} diff --git a/front/src/modules/pipeline-progress/components/EntityProgressBoard.tsx b/front/src/modules/pipeline-progress/components/EntityProgressBoard.tsx index 314924f6ed..8c71ed25e3 100644 --- a/front/src/modules/pipeline-progress/components/EntityProgressBoard.tsx +++ b/front/src/modules/pipeline-progress/components/EntityProgressBoard.tsx @@ -29,24 +29,24 @@ import { boardColumnsState } from '../states/boardColumnsState'; import { boardItemsState } from '../states/boardItemsState'; import { selectedBoardItemsState } from '../states/selectedBoardItemsState'; -export type EntityProgress = { - entity: any; +export type EntityProgress = { + entity: T; pipelineProgress: Pick; }; -export type EntityProgressDict = { - [key: string]: EntityProgress; +export type EntityProgressDict = { + [key: string]: EntityProgress; }; -type BoardProps = { +type BoardProps = { pipeline: Pipeline; initialBoard: Column[]; - initialItems: EntityProgressDict; + initialItems: EntityProgressDict; EntityCardComponent: React.FC<{ - entity: any; + entity: T; pipelineProgress: Pick; selected: boolean; - onSelect: (entityProgress: EntityProgress) => void; + onSelect: () => void; onCardUpdate: ( pipelineProgress: Pick, ) => Promise; @@ -79,13 +79,13 @@ const BoardColumnCardsContainer = ({ ); }; -export function EntityProgressBoard({ +export function EntityProgressBoard({ initialBoard, initialItems, pipeline, EntityCardComponent, NewEntityButtonComponent, -}: BoardProps) { +}: BoardProps) { const [board, setBoard] = useRecoilState(boardColumnsState); const [boardItems, setBoardItems] = useRecoilState(boardItemsState); const [selectedBoardItems, setSelectedBoardItems] = useRecoilState( @@ -154,26 +154,29 @@ export function EntityProgressBoard({ isInitialBoardLoaded, ]); - const calculateColumnTotals = ( - columns: Column[], - items: { - [key: string]: EntityProgress; + const calculateColumnTotals = useCallback( + ( + columns: Column[], + items: { + [key: string]: EntityProgress; + }, + ): { [key: string]: number } => { + return columns.reduce<{ [key: string]: number }>((acc, column) => { + acc[column.id] = column.itemKeys.reduce( + (total: number, itemKey: string) => { + return total + (items[itemKey]?.pipelineProgress?.amount || 0); + }, + 0, + ); + return acc; + }, {}); }, - ): { [key: string]: number } => { - return columns.reduce<{ [key: string]: number }>((acc, column) => { - acc[column.id] = column.itemKeys.reduce( - (total: number, itemKey: string) => { - return total + (items[itemKey]?.pipelineProgress?.amount || 0); - }, - 0, - ); - return acc; - }, {}); - }; + [], + ); const columnTotals = useMemo( () => calculateColumnTotals(board, boardItems), - [board, boardItems], + [board, boardItems, calculateColumnTotals], ); const onDragEnd: OnDragEndResponder = useCallback( diff --git a/front/src/modules/pipeline-progress/hooks/useBoard.ts b/front/src/modules/pipeline-progress/hooks/useBoard.ts index 8fef8a521a..bc4cee3c25 100644 --- a/front/src/modules/pipeline-progress/hooks/useBoard.ts +++ b/front/src/modules/pipeline-progress/hooks/useBoard.ts @@ -5,19 +5,18 @@ import { } from '../../../generated/graphql'; import { Column } from '../../ui/board/components/Board'; -type ItemEntity = any; type ItemPipelineProgress = Pick< PipelineProgress, 'id' | 'amount' | 'progressableId' >; -type Item = { - entity: ItemEntity; +type Item = { + entity: T; pipelineProgress: ItemPipelineProgress; }; -type Items = { [key: string]: Item }; +type Items = { [key: string]: Item }; -export function useBoard( +export function useBoard( useGetEntitiesQuery: any, pipeline: Pipeline | undefined, ) { @@ -63,17 +62,14 @@ export function useBoard( }, }); - const indexEntityByIdReducer = ( - acc: { [key: string]: ItemEntity }, - entity: ItemEntity, - ) => ({ + const indexEntityByIdReducer = (acc: { [key: string]: T }, entity: T) => ({ ...acc, [entity.id]: entity, }); const entitiesDict = entitiesQueryResult.data?.companies.reduce( indexEntityByIdReducer, - {} as { [key: string]: ItemEntity }, + {} as { [key: string]: T }, ); const items = pipelineProgresses?.reduce((acc, pipelineProgress) => { @@ -84,7 +80,7 @@ export function useBoard( }; } return acc; - }, {} as Items); + }, {} as Items); return { initialBoard, diff --git a/front/src/modules/pipeline-progress/states/boardItemsState.ts b/front/src/modules/pipeline-progress/states/boardItemsState.ts index ba46710a11..11c5be93e5 100644 --- a/front/src/modules/pipeline-progress/states/boardItemsState.ts +++ b/front/src/modules/pipeline-progress/states/boardItemsState.ts @@ -1,8 +1,6 @@ import { atom } from 'recoil'; -import { EntityProgressDict } from '../components/EntityProgressBoard'; - -export const boardItemsState = atom({ +export const boardItemsState = atom({ key: 'boardItemsState', default: {}, });