improve typing

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<void>;
 }) {
   const theme = useTheme();
+  const company = entity;
   return (
     <StyledBoardCardWrapper>
       <StyledBoardCard selected={selected}>
         <StyledBoardCardHeader>
           <img
-            src={getLogoUrlFromDomainName(entity.domainName).toString()}
-            alt={`${entity.name}-company-logo`}
+            src={getLogoUrlFromDomainName(company.domainName).toString()}
+            alt={`${company.name}-company-logo`}
           />
-          <span>{entity.name}</span>
+          <span>{company.name}</span>
           <div style={{ display: 'flex', flex: 1 }} />
-          <Checkbox checked={selected} onChange={() => onSelect(entity)} />
+          <Checkbox checked={selected} onChange={() => onSelect(company)} />
         </StyledBoardCardHeader>
         <StyledBoardCardBody>
           <span>

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<Company>(
+    useGetCompaniesQuery,
+    pipeline,
+  );
 
   return (
-    <EntityProgressBoard
+    <EntityProgressBoard<Company>
       initialBoard={initialBoard}
       initialItems={items}
       pipeline={pipeline}

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<T> = {
+  entity: T;
   pipelineProgress: Pick<PipelineProgress, 'id' | 'amount' | 'closeDate'>;
 };
 
-export type EntityProgressDict = {
-  [key: string]: EntityProgress;
+export type EntityProgressDict<T> = {
+  [key: string]: EntityProgress<T>;
 };
 
-type BoardProps = {
+type BoardProps<T> = {
   pipeline: Pipeline;
   initialBoard: Column[];
-  initialItems: EntityProgressDict;
+  initialItems: EntityProgressDict<T>;
   EntityCardComponent: React.FC<{
-    entity: any;
+    entity: T;
     pipelineProgress: Pick<PipelineProgress, 'id' | 'amount' | 'closeDate'>;
     selected: boolean;
-    onSelect: (entityProgress: EntityProgress) => void;
+    onSelect: () => void;
     onCardUpdate: (
       pipelineProgress: Pick<PipelineProgress, 'id' | 'amount' | 'closeDate'>,
     ) => Promise<void>;
@@ -79,13 +79,13 @@ const BoardColumnCardsContainer = ({
   );
 };
 
-export function EntityProgressBoard({
+export function EntityProgressBoard<T>({
   initialBoard,
   initialItems,
   pipeline,
   EntityCardComponent,
   NewEntityButtonComponent,
-}: BoardProps) {
+}: BoardProps<T>) {
   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<T>;
+      },
+    ): { [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(

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<T> = {
+  entity: T;
   pipelineProgress: ItemPipelineProgress;
 };
-type Items = { [key: string]: Item };
+type Items<T> = { [key: string]: Item<T> };
 
-export function useBoard(
+export function useBoard<T extends { id: string }>(
   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<T>);
 
   return {
     initialBoard,

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<EntityProgressDict>({
+export const boardItemsState = atom<any>({
   key: 'boardItemsState',
   default: {},
 });