282 on opportunities page data pipeline + companies + people is fetched from be (#285)

* feature: get pipelines columns from backend

* feature: display item not found instead of crashing

* feature: add BoardCard component

* feature: display items from the backend

* refactor: extract useBoard in a hook

* refactor: export only loading and error from useBoard

* refactor: create var pipelineStage

* feature: implement support for Company boards

front/src/modules/opportunities/components/Board.tsx

@@ -22,6 +22,8 @@ import {
 import { BoardItem } from '../../ui/components/board/BoardItem';
 import { NewButton } from '../../ui/components/board/BoardNewButton';
 
+import { BoardCard } from './BoardCard';
+
 type BoardProps = {
   initialBoard: Column[];
   items: Items;
@@ -41,8 +43,8 @@ export const Board = ({ initialBoard, items }: BoardProps) => {
   );
 
   return (
-    <DragDropContext onDragEnd={onDragEnd}>
-      <StyledBoard>
+    <StyledBoard>
+      <DragDropContext onDragEnd={onDragEnd}>
         {board.map((column) => (
           <Droppable key={column.id} droppableId={column.id}>
             {(droppableProvided) => (
@@ -59,7 +61,9 @@ export const Board = ({ initialBoard, items }: BoardProps) => {
                     >
                       {(draggableProvided) => (
                         <BoardItem draggableProvided={draggableProvided}>
-                          <p>{items[itemKey].content}</p>
+                          <BoardCard>
+                            {items[itemKey]?.id || 'Item not found'}
+                          </BoardCard>
                         </BoardItem>
                       )}
                     </Draggable>
@@ -70,7 +74,7 @@ export const Board = ({ initialBoard, items }: BoardProps) => {
             )}
           </Droppable>
         ))}
-      </StyledBoard>
-    </DragDropContext>
+      </DragDropContext>
+    </StyledBoard>
   );
 };

front/src/modules/opportunities/components/BoardCard.tsx

@@ -0,0 +1,5 @@
+import styled from '@emotion/styled';
+
+export const BoardCard = styled.p`
+  color: ${(props) => props.theme.text80};
+`;

front/src/modules/opportunities/hooks/useBoard.ts

@@ -0,0 +1,75 @@
+import {
+  GetCompaniesQuery,
+  GetPeopleQuery,
+  useGetCompaniesQuery,
+  useGetPeopleQuery,
+  useGetPipelinesQuery,
+} from '../../../generated/graphql';
+import { BoardItemKey, Column, Items } from '../../ui/components/board/Board';
+
+type Entities = GetCompaniesQuery | GetPeopleQuery;
+
+function isGetCompaniesQuery(
+  entities: Entities,
+): entities is GetCompaniesQuery {
+  return (entities as GetCompaniesQuery).companies !== undefined;
+}
+
+function isGetPeopleQuery(entities: Entities): entities is GetPeopleQuery {
+  return (entities as GetPeopleQuery).people !== undefined;
+}
+
+export const useBoard = () => {
+  const pipelines = useGetPipelinesQuery();
+  const pipelineStages = pipelines.data?.findManyPipeline[0].pipelineStages;
+  const initialBoard: Column[] =
+    pipelineStages?.map((pipelineStage) => ({
+      id: pipelineStage.name,
+      title: pipelineStage.name,
+      colorCode: pipelineStage.color,
+      itemKeys:
+        pipelineStage.pipelineProgresses?.map(
+          (item) => `item-${item.associableId}` as BoardItemKey,
+        ) || [],
+    })) || [];
+
+  const pipelineEntityIds = pipelineStages?.reduce(
+    (acc, pipelineStage) => [
+      ...acc,
+      ...(pipelineStage.pipelineProgresses?.map((item) => item.associableId) ||
+        []),
+    ],
+    [] as string[],
+  );
+
+  const pipelineEntityType: 'Person' | 'Company' | undefined =
+    pipelineStages?.[0].pipelineProgresses?.[0].associableType;
+  console.log(pipelineEntityType);
+
+  const query =
+    pipelineEntityType === 'Person' ? useGetPeopleQuery : useGetCompaniesQuery;
+
+  const entitiesQueryResult = query({
+    variables: { where: { id: { in: pipelineEntityIds } } },
+  });
+
+  const indexByIdReducer = (acc: Items, entity: { id: string }) => ({
+    ...acc,
+    [`item-${entity.id}`]: entity,
+  });
+
+  const items: Items | undefined = entitiesQueryResult.data
+    ? isGetCompaniesQuery(entitiesQueryResult.data)
+      ? entitiesQueryResult.data.companies.reduce(indexByIdReducer, {} as Items)
+      : isGetPeopleQuery(entitiesQueryResult.data)
+      ? entitiesQueryResult.data.people.reduce(indexByIdReducer, {} as Items)
+      : undefined
+    : undefined;
+
+  return {
+    initialBoard,
+    items,
+    loading: pipelines.loading || entitiesQueryResult.loading,
+    error: pipelines.error || entitiesQueryResult.error,
+  };
+};

front/src/modules/opportunities/queries/index.ts

@@ -0,0 +1,19 @@
+import { gql } from '@apollo/client';
+
+export const GET_PIPELINES = gql`
+  query GetPipelines {
+    findManyPipeline(skip: 1) {
+      id
+      name
+      pipelineStages {
+        name
+        color
+        pipelineProgresses {
+          id
+          associableType
+          associableId
+        }
+      }
+    }
+  }
+`;

front/src/modules/ui/components/board/Board.tsx

@@ -7,10 +7,10 @@ export const StyledBoard = styled.div`
   height: 100%;
 `;
 
-export type BoardItemKey = `item-${number}`;
+export type BoardItemKey = `item-${number | string}`;
 export interface Item {
   id: string;
-  content: string;
+  content?: string;
 }
 export interface Items {
   [key: string]: Item;