Fix drag-performance (#1184)

* Fix drag-performance

* Fixes

* Fixes

* Fixes

* Fixes

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

@@ -1,53 +1,40 @@
-import { useRecoilCallback } from 'recoil';
+import { getOperationName } from '@apollo/client/utilities';
+import { useRecoilValue } from 'recoil';
 
-import { boardCardIdsByColumnIdFamilyState } from '@/ui/board/states/boardCardIdsByColumnIdFamilyState';
-import { boardColumnsState } from '@/ui/board/states/boardColumnsState';
-import { selectedBoardCardIdsState } from '@/ui/board/states/selectedBoardCardIdsState';
+import { GET_PIPELINES } from '@/pipeline/queries';
 import { IconTrash } from '@/ui/icon/index';
 import { EntityTableActionBarButton } from '@/ui/table/action-bar/components/EntityTableActionBarButton';
+import { useDeleteManyPipelineProgressMutation } from '~/generated/graphql';
 
-export function BoardActionBarButtonDeleteBoardCard({
-  onDelete,
-}: {
-  onDelete: (deletedCardIds: string[]) => void;
-}) {
-  const deleteBoardCardIds = useRecoilCallback(
-    ({ set, snapshot }) =>
-      () => {
-        const boardCardIdsToDelete = snapshot
-          .getLoadable(selectedBoardCardIdsState)
-          .getValue();
+import { useRemoveCardIds } from '../hooks/useRemoveCardIds';
+import { selectedCardIdsSelector } from '../states/selectedCardIdsSelector';
 
-        const boardColumns = snapshot.getLoadable(boardColumnsState).getValue();
+export function BoardActionBarButtonDeleteBoardCard() {
+  const selectedCardIds = useRecoilValue(selectedCardIdsSelector);
+  const removeCardIds = useRemoveCardIds();
 
-        for (const boardColumn of boardColumns) {
-          const boardColumnCardIds = snapshot
-            .getLoadable(boardCardIdsByColumnIdFamilyState(boardColumn.id))
-            .getValue();
+  const [deletePipelineProgress] = useDeleteManyPipelineProgressMutation({
+    refetchQueries: [getOperationName(GET_PIPELINES) ?? ''],
+  });
 
-          const newBoardColumnCardIds = boardColumnCardIds.filter(
-            (cardId) => !boardCardIdsToDelete.includes(cardId),
-          );
-
-          if (newBoardColumnCardIds.length !== boardColumnCardIds.length) {
-            set(
-              boardCardIdsByColumnIdFamilyState(boardColumn.id),
-              newBoardColumnCardIds,
-            );
-          }
-        }
-
-        set(selectedBoardCardIdsState, []);
-
-        return boardCardIdsToDelete;
+  async function handleDelete() {
+    await deletePipelineProgress({
+      variables: {
+        ids: selectedCardIds,
       },
-    [],
-  );
-
-  async function handleDeleteClick() {
-    const deletedCardIds = deleteBoardCardIds();
-
-    onDelete(deletedCardIds);
+      optimisticResponse: {
+        __typename: 'Mutation',
+        deleteManyPipelineProgress: {
+          count: selectedCardIds.length,
+        },
+      },
+      update: (cache) => {
+        removeCardIds(selectedCardIds);
+        selectedCardIds.forEach((id) => {
+          cache.evict({ id: `PipelineProgress:${id}` });
+        });
+      },
+    });
   }
 
   return (
@@ -55,7 +42,7 @@ export function BoardActionBarButtonDeleteBoardCard({
       label="Delete"
       icon={<IconTrash size={16} />}
       type="warning"
-      onClick={handleDeleteClick}
+      onClick={() => handleDelete()}
     />
   );
 }

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

@@ -10,7 +10,6 @@ import { CompanyBoardContext } from '@/companies/states/CompanyBoardContext';
 import { GET_PIPELINE_PROGRESS } from '@/pipeline/queries';
 import { BoardHeader } from '@/ui/board/components/BoardHeader';
 import { StyledBoard } from '@/ui/board/components/StyledBoard';
-import { useUpdateBoardCardIds } from '@/ui/board/hooks/useUpdateBoardCardIds';
 import { BoardColumnIdContext } from '@/ui/board/states/BoardColumnIdContext';
 import { SelectedSortType } from '@/ui/filter-n-sort/types/interface';
 import { DragSelect } from '@/ui/utilities/drag-select/components/DragSelect';
@@ -22,9 +21,10 @@ import {
   useUpdateOnePipelineProgressStageMutation,
 } from '~/generated/graphql';
 
+import { useSetCardSelected } from '../hooks/useSetCardSelected';
+import { useUpdateBoardCardIds } from '../hooks/useUpdateBoardCardIds';
 import { BoardColumnContext } from '../states/BoardColumnContext';
 import { boardColumnsState } from '../states/boardColumnsState';
-import { selectedBoardCardIdsState } from '../states/selectedBoardCardIdsState';
 import { BoardOptions } from '../types/BoardOptions';
 
 import { EntityBoardColumn } from './EntityBoardColumn';
@@ -48,6 +48,7 @@ export function EntityBoard({
   onEditColumnTitle: (columnId: string, title: string, color: string) => void;
 }) {
   const [boardColumns] = useRecoilState(boardColumnsState);
+  const setCardSelected = useSetCardSelected();
 
   const theme = useTheme();
   const [updatePipelineProgressStage] =
@@ -104,19 +105,6 @@ export function EntityBoard({
   });
 
   const boardRef = useRef(null);
-  const [selectedBoardCards, setSelectedBoardCards] = useRecoilState(
-    selectedBoardCardIdsState,
-  );
-
-  function setRowSelectedState(boardCardId: string, selected: boolean) {
-    if (selected && !selectedBoardCards.includes(boardCardId)) {
-      setSelectedBoardCards([...selectedBoardCards, boardCardId ?? '']);
-    } else if (!selected && selectedBoardCards.includes(boardCardId)) {
-      setSelectedBoardCards(
-        selectedBoardCards.filter((id) => id !== boardCardId),
-      );
-    }
-  }
 
   return (boardColumns?.length ?? 0) > 0 ? (
     <StyledBoardWithHeader>
@@ -144,7 +132,7 @@ export function EntityBoard({
       </StyledBoard>
       <DragSelect
         dragSelectable={boardRef}
-        onDragSelectionChange={setRowSelectedState}
+        onDragSelectionChange={setCardSelected}
       />
     </StyledBoardWithHeader>
   ) : (

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

@@ -3,13 +3,13 @@ import { useRecoilValue } from 'recoil';
 
 import { ActionBar } from '@/ui/action-bar/components/ActionBar';
 
-import { selectedBoardCardIdsState } from '../states/selectedBoardCardIdsState';
+import { selectedCardIdsSelector } from '../states/selectedCardIdsSelector';
 
 type OwnProps = {
   children: React.ReactNode | React.ReactNode[];
 };
 
 export function EntityBoardActionBar({ children }: OwnProps) {
-  const selectedBoardCards = useRecoilValue(selectedBoardCardIdsState);
-  return <ActionBar selectedIds={selectedBoardCards}>{children}</ActionBar>;
+  const selectedCardIds = useRecoilValue(selectedCardIdsSelector);
+  return <ActionBar selectedIds={selectedCardIds}>{children}</ActionBar>;
 }

front/src/modules/ui/board/hooks/useCurrentCardSelected.ts

@@ -0,0 +1,28 @@
+import { useContext } from 'react';
+import { useRecoilCallback, useRecoilState } from 'recoil';
+
+import { BoardCardIdContext } from '../states/BoardCardIdContext';
+import { isCardSelectedFamilyState } from '../states/isCardSelectedFamilyState';
+
+export function useCurrentCardSelected() {
+  const currentCardId = useContext(BoardCardIdContext);
+
+  const [isCardSelected] = useRecoilState(
+    isCardSelectedFamilyState(currentCardId ?? ''),
+  );
+
+  const setCurrentCardSelected = useRecoilCallback(
+    ({ set }) =>
+      (selected: boolean) => {
+        if (!currentCardId) return;
+
+        set(isCardSelectedFamilyState(currentCardId), selected);
+      },
+    [],
+  );
+
+  return {
+    currentCardSelected: isCardSelected,
+    setCurrentCardSelected,
+  };
+}

front/src/modules/ui/board/hooks/useRemoveCardIds.ts

@@ -0,0 +1,27 @@
+// 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 { useRecoilCallback } from 'recoil';
+
+import { boardCardIdsByColumnIdFamilyState } from '../states/boardCardIdsByColumnIdFamilyState';
+import { boardColumnsState } from '../states/boardColumnsState';
+
+export function useRemoveCardIds() {
+  return useRecoilCallback(
+    ({ snapshot, set }) =>
+      (cardIdToRemove: string[]) => {
+        const boardColumns = snapshot
+          .getLoadable(boardColumnsState)
+          .valueOrThrow();
+
+        boardColumns.forEach((boardColumn) => {
+          const columnCardIds = snapshot
+            .getLoadable(boardCardIdsByColumnIdFamilyState(boardColumn.id))
+            .valueOrThrow();
+          set(
+            boardCardIdsByColumnIdFamilyState(boardColumn.id),
+            columnCardIds.filter((cardId) => !cardIdToRemove.includes(cardId)),
+          );
+        });
+      },
+    [],
+  );
+}

front/src/modules/ui/board/hooks/useResetCardSelection.ts

@@ -0,0 +1,27 @@
+import { useRecoilCallback } from 'recoil';
+
+import { boardCardIdsByColumnIdFamilyState } from '../states/boardCardIdsByColumnIdFamilyState';
+import { boardColumnsState } from '../states/boardColumnsState';
+import { isCardSelectedFamilyState } from '../states/isCardSelectedFamilyState';
+
+export function useResetCardSelection() {
+  return useRecoilCallback(
+    ({ snapshot, set }) =>
+      () => {
+        const boardColumns = snapshot
+          .getLoadable(boardColumnsState)
+          .valueOrThrow();
+
+        const cardIds = boardColumns.flatMap((boardColumn) =>
+          snapshot
+            .getLoadable(boardCardIdsByColumnIdFamilyState(boardColumn.id))
+            .valueOrThrow(),
+        );
+
+        for (const cardId of cardIds) {
+          set(isCardSelectedFamilyState(cardId), false);
+        }
+      },
+    [],
+  );
+}

front/src/modules/ui/board/hooks/useSetCardSelected.ts

@@ -0,0 +1,9 @@
+import { useRecoilCallback } from 'recoil';
+
+import { isCardSelectedFamilyState } from '../states/isCardSelectedFamilyState';
+
+export function useSetCardSelected() {
+  return useRecoilCallback(({ set }) => (cardId: string, selected: boolean) => {
+    set(isCardSelectedFamilyState(cardId), selected);
+  });
+}

front/src/modules/ui/board/states/isCardSelectedFamilyState.ts

@@ -0,0 +1,6 @@
+import { atomFamily } from 'recoil';
+
+export const isCardSelectedFamilyState = atomFamily<boolean, string>({
+  key: 'isCardSelectedFamilyState',
+  default: false,
+});

front/src/modules/ui/board/states/selectedBoardCardIdsState.ts

@@ -1,6 +0,0 @@
-import { atom } from 'recoil';
-
-export const selectedBoardCardIdsState = atom<string[]>({
-  key: 'selectedBoardCardIdsState',
-  default: [],
-});

front/src/modules/ui/board/states/selectedCardIdsSelector.ts

@@ -0,0 +1,22 @@
+import { selector } from 'recoil';
+
+import { boardCardIdsByColumnIdFamilyState } from './boardCardIdsByColumnIdFamilyState';
+import { boardColumnsState } from './boardColumnsState';
+import { isCardSelectedFamilyState } from './isCardSelectedFamilyState';
+
+export const selectedCardIdsSelector = selector<string[]>({
+  key: 'selectedCardIdsSelector',
+  get: ({ get }) => {
+    const boardColumns = get(boardColumnsState);
+
+    const cardIds = boardColumns.flatMap((boardColumn) =>
+      get(boardCardIdsByColumnIdFamilyState(boardColumn.id)),
+    );
+
+    const selectedCardIds = cardIds.filter(
+      (cardId) => get(isCardSelectedFamilyState(cardId)) === true,
+    );
+
+    return selectedCardIds;
+  },
+});