Persist update on board drag and drop (#328)

* chore: move dnd lib comment aligned with import

* feature: add onUpdate on board

* chore: remove multi entity pipelines

* feature: add pipelineProgressableType field

* feature: fetch progressableType in board

* feature: implement on update to persist progress change

front/src/generated/graphql.tsx

@@ -975,6 +975,7 @@ export type Pipeline = {
   icon: Scalars['String'];
   id: Scalars['ID'];
   name: Scalars['String'];
+  pipelineProgressableType: PipelineProgressableType;
   pipelineProgresses?: Maybe<Array<PipelineProgress>>;
   pipelineStages?: Maybe<Array<PipelineStage>>;
   updatedAt: Scalars['DateTime'];
@@ -990,6 +991,7 @@ export type PipelineOrderByWithRelationInput = {
   icon?: InputMaybe<SortOrder>;
   id?: InputMaybe<SortOrder>;
   name?: InputMaybe<SortOrder>;
+  pipelineProgressableType?: InputMaybe<SortOrder>;
   pipelineProgresses?: InputMaybe<PipelineProgressOrderByRelationAggregateInput>;
   pipelineStages?: InputMaybe<PipelineStageOrderByRelationAggregateInput>;
   updatedAt?: InputMaybe<SortOrder>;
@@ -1102,6 +1104,7 @@ export enum PipelineScalarFieldEnum {
   Icon = 'icon',
   Id = 'id',
   Name = 'name',
+  PipelineProgressableType = 'pipelineProgressableType',
   UpdatedAt = 'updatedAt',
   WorkspaceId = 'workspaceId'
 }
@@ -1201,6 +1204,7 @@ export type PipelineWhereInput = {
   icon?: InputMaybe<StringFilter>;
   id?: InputMaybe<StringFilter>;
   name?: InputMaybe<StringFilter>;
+  pipelineProgressableType?: InputMaybe<EnumPipelineProgressableTypeFilter>;
   pipelineProgresses?: InputMaybe<PipelineProgressListRelationFilter>;
   pipelineStages?: InputMaybe<PipelineStageListRelationFilter>;
   updatedAt?: InputMaybe<DateTimeFilter>;
@@ -1625,7 +1629,15 @@ export type DeleteCompaniesMutation = { __typename?: 'Mutation', deleteManyCompa
 export type GetPipelinesQueryVariables = Exact<{ [key: string]: never; }>;
 
 
-export type GetPipelinesQuery = { __typename?: 'Query', findManyPipeline: Array<{ __typename?: 'Pipeline', id: string, name: string, pipelineStages?: Array<{ __typename?: 'PipelineStage', name: string, color: string, pipelineProgresses?: Array<{ __typename?: 'PipelineProgress', id: string, progressableType: PipelineProgressableType, progressableId: string }> | null }> | null }> };
+export type GetPipelinesQuery = { __typename?: 'Query', findManyPipeline: Array<{ __typename?: 'Pipeline', id: string, name: string, pipelineProgressableType: PipelineProgressableType, pipelineStages?: Array<{ __typename?: 'PipelineStage', id: string, name: string, color: string, pipelineProgresses?: Array<{ __typename?: 'PipelineProgress', id: string, progressableType: PipelineProgressableType, progressableId: string }> | null }> | null }> };
+
+export type UpdateOnePipelineProgressMutationVariables = Exact<{
+  id?: InputMaybe<Scalars['String']>;
+  pipelineStageId?: InputMaybe<Scalars['String']>;
+}>;
+
+
+export type UpdateOnePipelineProgressMutation = { __typename?: 'Mutation', updateOnePipelineProgress?: { __typename?: 'PipelineProgress', id: string } | null };
 
 export type GetPeopleQueryVariables = Exact<{
   orderBy?: InputMaybe<Array<PersonOrderByWithRelationInput> | PersonOrderByWithRelationInput>;
@@ -2199,10 +2211,12 @@ export type DeleteCompaniesMutationResult = Apollo.MutationResult<DeleteCompanie
 export type DeleteCompaniesMutationOptions = Apollo.BaseMutationOptions<DeleteCompaniesMutation, DeleteCompaniesMutationVariables>;
 export const GetPipelinesDocument = gql`
     query GetPipelines {
-  findManyPipeline(skip: 1) {
+  findManyPipeline {
     id
     name
+    pipelineProgressableType
     pipelineStages {
+      id
       name
       color
       pipelineProgresses {
@@ -2241,6 +2255,43 @@ export function useGetPipelinesLazyQuery(baseOptions?: Apollo.LazyQueryHookOptio
 export type GetPipelinesQueryHookResult = ReturnType<typeof useGetPipelinesQuery>;
 export type GetPipelinesLazyQueryHookResult = ReturnType<typeof useGetPipelinesLazyQuery>;
 export type GetPipelinesQueryResult = Apollo.QueryResult<GetPipelinesQuery, GetPipelinesQueryVariables>;
+export const UpdateOnePipelineProgressDocument = gql`
+    mutation UpdateOnePipelineProgress($id: String, $pipelineStageId: String) {
+  updateOnePipelineProgress(
+    where: {id: $id}
+    data: {pipelineStage: {connect: {id: $pipelineStageId}}}
+  ) {
+    id
+  }
+}
+    `;
+export type UpdateOnePipelineProgressMutationFn = Apollo.MutationFunction<UpdateOnePipelineProgressMutation, UpdateOnePipelineProgressMutationVariables>;
+
+/**
+ * __useUpdateOnePipelineProgressMutation__
+ *
+ * To run a mutation, you first call `useUpdateOnePipelineProgressMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useUpdateOnePipelineProgressMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [updateOnePipelineProgressMutation, { data, loading, error }] = useUpdateOnePipelineProgressMutation({
+ *   variables: {
+ *      id: // value for 'id'
+ *      pipelineStageId: // value for 'pipelineStageId'
+ *   },
+ * });
+ */
+export function useUpdateOnePipelineProgressMutation(baseOptions?: Apollo.MutationHookOptions<UpdateOnePipelineProgressMutation, UpdateOnePipelineProgressMutationVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<UpdateOnePipelineProgressMutation, UpdateOnePipelineProgressMutationVariables>(UpdateOnePipelineProgressDocument, options);
+      }
+export type UpdateOnePipelineProgressMutationHookResult = ReturnType<typeof useUpdateOnePipelineProgressMutation>;
+export type UpdateOnePipelineProgressMutationResult = Apollo.MutationResult<UpdateOnePipelineProgressMutation>;
+export type UpdateOnePipelineProgressMutationOptions = Apollo.BaseMutationOptions<UpdateOnePipelineProgressMutation, UpdateOnePipelineProgressMutationVariables>;
 export const GetPeopleDocument = gql`
     query GetPeople($orderBy: [PersonOrderByWithRelationInput!], $where: PersonWhereInput, $limit: Int) {
   people: findManyPerson(orderBy: $orderBy, where: $where, take: $limit) {

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

@@ -4,9 +4,10 @@ import {
   Draggable,
   Droppable,
   OnDragEndResponder,
-} from '@hello-pangea/dnd';
+} from '@hello-pangea/dnd'; // Atlassian dnd does not support StrictMode from RN 18, so we use a fork @hello-pangea/dnd https://github.com/atlassian/react-beautiful-dnd/issues/2350
 
 import {
+  BoardItemKey,
   Column,
   getOptimisticlyUpdatedBoard,
   Items,
@@ -17,8 +18,6 @@ import {
   StyledColumn,
   StyledColumnTitle,
 } from '../../ui/components/board/BoardColumn';
-// Atlassian dnd does not support StrictMode from RN 18, so we use a fork @hello-pangea/dnd
-// https://github.com/atlassian/react-beautiful-dnd/issues/2350
 import { BoardItem } from '../../ui/components/board/BoardItem';
 import { NewButton } from '../../ui/components/board/BoardNewButton';
 
@@ -27,19 +26,29 @@ import { BoardCard } from './BoardCard';
 type BoardProps = {
   initialBoard: Column[];
   items: Items;
+  onUpdate?: (itemKey: BoardItemKey, columnId: Column['id']) => Promise<void>;
 };
 
-export const Board = ({ initialBoard, items }: BoardProps) => {
+export const Board = ({ initialBoard, items, onUpdate }: BoardProps) => {
   const [board, setBoard] = useState<Column[]>(initialBoard);
 
   const onDragEnd: OnDragEndResponder = useCallback(
-    (result) => {
+    async (result) => {
       const newBoard = getOptimisticlyUpdatedBoard(board, result);
       if (!newBoard) return;
       setBoard(newBoard);
-      // TODO implement update board mutation
+      try {
+        const draggedEntityId = items[result.draggableId]?.id;
+        const destinationColumnId = result.destination?.droppableId;
+        draggedEntityId &&
+          destinationColumnId &&
+          onUpdate &&
+          (await onUpdate(draggedEntityId, destinationColumnId));
+      } catch (e) {
+        console.error(e);
+      }
     },
-    [board],
+    [board, onUpdate, items],
   );
 
   return (

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

@@ -50,8 +50,9 @@ const StyledBoardCardBody = styled.div`
 `;
 
 export const BoardCard = ({ item }: { item: Person | Company }) => {
-  if (item.__typename === 'Person') return <PersonBoardCard person={item} />;
-  if (item.__typename === 'Company') return <CompanyBoardCard company={item} />;
+  if (item?.__typename === 'Person') return <PersonBoardCard person={item} />;
+  if (item?.__typename === 'Company')
+    return <CompanyBoardCard company={item} />;
   // @todo return card skeleton
   return null;
 };

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

@@ -24,38 +24,49 @@ export const useBoard = () => {
   const pipelineStages = pipelines.data?.findManyPipeline[0].pipelineStages;
   const initialBoard: Column[] =
     pipelineStages?.map((pipelineStage) => ({
-      id: pipelineStage.name,
+      id: pipelineStage.id,
       title: pipelineStage.name,
       colorCode: pipelineStage.color,
       itemKeys:
         pipelineStage.pipelineProgresses?.map(
-          (item) => `item-${item.progressableId}` as BoardItemKey,
+          (item) => item.progressableId as BoardItemKey,
         ) || [],
     })) || [];
 
   const pipelineEntityIds = pipelineStages?.reduce(
     (acc, pipelineStage) => [
       ...acc,
-      ...(pipelineStage.pipelineProgresses?.map(
-        (item) => item.progressableId,
-      ) || []),
+      ...(pipelineStage.pipelineProgresses?.map((item) => ({
+        entityId: item?.progressableId,
+        pipelineProgressId: item?.id,
+      })) || []),
     ],
-    [] as string[],
+    [] as { entityId: string; pipelineProgressId: string }[],
   );
 
+  const pipelineEntityIdsMapper = (entityId: string) => {
+    const pipelineProgressId = pipelineEntityIds?.find(
+      (item) => item.entityId === entityId,
+    )?.pipelineProgressId;
+
+    return pipelineProgressId;
+  };
+
   const pipelineEntityType: 'Person' | 'Company' | undefined =
-    pipelineStages?.[0].pipelineProgresses?.[0].progressableType;
+    pipelines.data?.findManyPipeline[0].pipelineProgressableType;
 
   const query =
     pipelineEntityType === 'Person' ? useGetPeopleQuery : useGetCompaniesQuery;
 
   const entitiesQueryResult = query({
-    variables: { where: { id: { in: pipelineEntityIds } } },
+    variables: {
+      where: { id: { in: pipelineEntityIds?.map((item) => item.entityId) } },
+    },
   });
 
   const indexByIdReducer = (acc: Items, entity: { id: string }) => ({
     ...acc,
-    [`item-${entity.id}`]: entity,
+    [entity.id]: entity,
   });
 
   const items: Items | undefined = entitiesQueryResult.data
@@ -71,5 +82,6 @@ export const useBoard = () => {
     items,
     loading: pipelines.loading || entitiesQueryResult.loading,
     error: pipelines.error || entitiesQueryResult.error,
+    pipelineEntityIdsMapper,
   };
 };

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

@@ -2,10 +2,12 @@ import { gql } from '@apollo/client';
 
 export const GET_PIPELINES = gql`
   query GetPipelines {
-    findManyPipeline(skip: 1) {
+    findManyPipeline {
       id
       name
+      pipelineProgressableType
       pipelineStages {
+        id
         name
         color
         pipelineProgresses {
@@ -17,3 +19,14 @@ export const GET_PIPELINES = gql`
     }
   }
 `;
+
+export const UPDATE_PIPELINE_STAGE = gql`
+  mutation UpdateOnePipelineProgress($id: String, $pipelineStageId: String) {
+    updateOnePipelineProgress(
+      where: { id: $id }
+      data: { pipelineStage: { connect: { id: $pipelineStageId } } }
+    ) {
+      id
+    }
+  }
+`;

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

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { DropResult } from '@hello-pangea/dnd';
+import { DropResult } from '@hello-pangea/dnd'; // Atlassian dnd does not support StrictMode from RN 18, so we use a fork @hello-pangea/dnd https://github.com/atlassian/react-beautiful-dnd/issues/2350
 
 export const StyledBoard = styled.div`
   display: flex;
@@ -7,7 +7,7 @@ export const StyledBoard = styled.div`
   height: 100%;
 `;
 
-export type BoardItemKey = `item-${number | string}`;
+export type BoardItemKey = string;
 export type Item = any & { id: string };
 export interface Items {
   [key: string]: Item;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from '@emotion/styled';
-import { DroppableProvided } from '@hello-pangea/dnd';
+import { DroppableProvided } from '@hello-pangea/dnd'; // Atlassian dnd does not support StrictMode from RN 18, so we use a fork @hello-pangea/dnd https://github.com/atlassian/react-beautiful-dnd/issues/2350
 
 export const StyledColumn = styled.div`
   background-color: ${({ theme }) => theme.primaryBackground};

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

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { DraggableProvided } from '@hello-pangea/dnd';
+import { DraggableProvided } from '@hello-pangea/dnd'; // Atlassian dnd does not support StrictMode from RN 18, so we use a fork @hello-pangea/dnd https://github.com/atlassian/react-beautiful-dnd/issues/2350
 
 const StyledCard = styled.div`
   background-color: ${({ theme }) => theme.secondaryBackground};

front/src/pages/opportunities/Opportunities.tsx

@@ -1,11 +1,33 @@
+import { useCallback } from 'react';
+
 import { IconTargetArrow } from '@/ui/icons/index';
 import { WithTopBarContainer } from '@/ui/layout/containers/WithTopBarContainer';
 
+import {
+  PipelineProgress,
+  PipelineStage,
+  useUpdateOnePipelineProgressMutation,
+} from '../../generated/graphql';
 import { Board } from '../../modules/opportunities/components/Board';
 import { useBoard } from '../../modules/opportunities/hooks/useBoard';
 
 export function Opportunities() {
-  const { initialBoard, items, loading, error } = useBoard();
+  const { initialBoard, items, loading, error, pipelineEntityIdsMapper } =
+    useBoard();
+  const [updatePipelineProgress] = useUpdateOnePipelineProgressMutation();
+
+  const onUpdate = useCallback(
+    async (
+      entityId: NonNullable<PipelineProgress['progressableId']>,
+      pipelineStageId: NonNullable<PipelineStage['id']>,
+    ) => {
+      const pipelineProgressId = pipelineEntityIdsMapper(entityId);
+      updatePipelineProgress({
+        variables: { id: pipelineProgressId, pipelineStageId },
+      });
+    },
+    [updatePipelineProgress, pipelineEntityIdsMapper],
+  );
 
   if (loading) return <div>Loading...</div>;
   if (error) return <div>Error...</div>;
@@ -13,7 +35,7 @@ export function Opportunities() {
     return <div>Initial board or items not found</div>;
   return (
     <WithTopBarContainer title="Opportunities" icon={<IconTargetArrow />}>
-      <Board initialBoard={initialBoard} items={items} />
+      <Board initialBoard={initialBoard} items={items} onUpdate={onUpdate} />
     </WithTopBarContainer>
   );
 }