Refacto board (#661)

* Refacto pipeline progress board to be entity agnostic * Abstract hooks as well * Move files * Pass specific components as props * Move board hook to the generic component * Make dnd and update logic part of the board * Remove useless call and getch pipelineProgress from hook * Minot * improve typing * Revert "improve typing" This reverts commit 49bf7929b6231747cc460cbb98f68c3c10424659. * wip * Get board from initial component * Move files again * Lint * Fix story * Lint * Mock pipeline progress * Fix storybook * WIP refactor recoil * Checkpoint: compilation * Fix dnd * Fix unselect card * Checkpoint: compilation * Checkpoint: New card OK * Checkpoint: feature complete * Fix latency for delete * Linter * Fix rebase * Move files * lint * Update Stories tests * lint * Fix test * Refactor hook for company progress indexing * Remove useless type * Move boardState * remove gardcoded Id * Nit * Fix * Rename state
2023-07-14 17:51:16 -07:00
parent e93a96b3b1
commit 0a319bcf86
47 changed files with 975 additions and 730 deletions
--- a/front/src/modules/pipeline-progress/components/EntityBoard.tsx
+++ b/front/src/modules/pipeline-progress/components/EntityBoard.tsx
@ -0,0 +1,81 @@
+import { useCallback } from 'react';
+import { DragDropContext, OnDragEndResponder } 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 { useRecoilState } from 'recoil';
+
+import { boardState } from '@/pipeline-progress/states/boardState';
+import { RecoilScope } from '@/recoil-scope/components/RecoilScope';
+import {
+  PipelineProgress,
+  PipelineStage,
+  useUpdateOnePipelineProgressStageMutation,
+} from '~/generated/graphql';
+
+import {
+  getOptimisticlyUpdatedBoard,
+  StyledBoard,
+} from '../../ui/board/components/Board';
+import { BoardColumnContext } from '../states/BoardColumnContext';
+import { BoardOptions } from '../types/BoardOptions';
+
+import { EntityBoardColumn } from './EntityBoardColumn';
+
+export function EntityBoard({ boardOptions }: { boardOptions: BoardOptions }) {
+  const [board, setBoard] = useRecoilState(boardState);
+  const [updatePipelineProgressStage] =
+    useUpdateOnePipelineProgressStageMutation();
+
+  const updatePipelineProgressStageInDB = useCallback(
+    async (
+      pipelineProgressId: NonNullable<PipelineProgress['id']>,
+      pipelineStageId: NonNullable<PipelineStage['id']>,
+    ) => {
+      updatePipelineProgressStage({
+        variables: {
+          id: pipelineProgressId,
+          pipelineStageId,
+        },
+      });
+    },
+    [updatePipelineProgressStage],
+  );
+
+  const onDragEnd: OnDragEndResponder = useCallback(
+    async (result) => {
+      if (!board) return;
+      const newBoard = getOptimisticlyUpdatedBoard(board, result);
+      if (!newBoard) return;
+      setBoard(newBoard);
+      try {
+        const draggedEntityId = result.draggableId;
+        const destinationColumnId = result.destination?.droppableId;
+        draggedEntityId &&
+          destinationColumnId &&
+          updatePipelineProgressStageInDB &&
+          (await updatePipelineProgressStageInDB(
+            draggedEntityId,
+            destinationColumnId,
+          ));
+      } catch (e) {
+        console.error(e);
+      }
+    },
+    [board, updatePipelineProgressStageInDB, setBoard],
+  );
+
+  return (board?.length ?? 0) > 0 ? (
+    <StyledBoard>
+      <DragDropContext onDragEnd={onDragEnd}>
+        {board?.map((column) => (
+          <RecoilScope
+            SpecificContext={BoardColumnContext}
+            key={column.pipelineStageId}
+          >
+            <EntityBoardColumn boardOptions={boardOptions} column={column} />
+          </RecoilScope>
+        ))}
+      </DragDropContext>
+    </StyledBoard>
+  ) : (
+    <></>
+  );
+}