Fix drag-performance (#1184)

* Fix drag-performance

* Fixes

* Fixes

* Fixes

* Fixes

front/src/modules/command-menu/components/CommandMenu.tsx

@@ -92,43 +92,6 @@ export function CommandMenu() {
       cmd.type === CommandType.Create,
   );
 
-  /*
-  TODO: Allow performing actions on page through CommandBar 
-
-  import { useMatch, useResolvedPath } from 'react-router-dom';
-  import { IconBuildingSkyscraper, IconUser } from '@/ui/icon';
-
-  const createSection = (
-    <StyledGroup heading="Create">
-      <CommandMenuItem
-        label="Create People"
-        onClick={createPeople}
-        icon={<IconUser />}
-        shortcuts={
-          !!useMatch({
-            path: useResolvedPath('/people').pathname,
-            end: true,
-          })
-            ? ['C']
-            : []
-        }
-      />
-      <CommandMenuItem
-        label="Create Company"
-        onClick={createCompany}
-        icon={<IconBuildingSkyscraper />}
-        shortcuts={
-          !!useMatch({
-            path: useResolvedPath('/companies').pathname,
-            end: true,
-          })
-            ? ['C']
-            : []
-        }
-      />
-    </StyledGroup>
-  );*/
-
   return (
     <StyledDialog
       open={isCommandMenuOpened}
@@ -181,6 +144,7 @@ export function CommandMenu() {
               to={matchingNavigateCommand.to}
               label={matchingNavigateCommand.label}
               shortcuts={matchingNavigateCommand.shortcuts}
+              key={matchingNavigateCommand.label}
             />
           </StyledGroup>
         )}
@@ -245,7 +209,7 @@ export function CommandMenu() {
               )
               .map((cmd) => (
                 <CommandMenuItem
-                  key={cmd.shortcuts?.join('')}
+                  key={cmd.shortcuts?.join('') ?? ''}
                   to={cmd.to}
                   label={cmd.label}
                   shortcuts={cmd.shortcuts}

front/src/modules/command-menu/components/CommandMenuItem.tsx

@@ -17,6 +17,7 @@ import {
 export type OwnProps = {
   label: string;
   to?: string;
+  key: string;
   onClick?: () => void;
   icon?: ReactNode;
   shortcuts?: Array<string>;

front/src/modules/companies/components/CompanyBoardCard.tsx

@@ -2,8 +2,8 @@ import { ReactNode, useContext } from 'react';
 import styled from '@emotion/styled';
 import { useRecoilState, useRecoilValue } from 'recoil';
 
+import { useCurrentCardSelected } from '@/ui/board/hooks/useCurrentCardSelected';
 import { BoardCardIdContext } from '@/ui/board/states/BoardCardIdContext';
-import { selectedBoardCardIdsState } from '@/ui/board/states/selectedBoardCardIdsState';
 import { viewFieldsDefinitionsState } from '@/ui/board/states/viewFieldsDefinitionsState';
 import { EntityChipVariant } from '@/ui/chip/components/EntityChip';
 import { GenericEditableField } from '@/ui/editable-field/components/GenericEditableField';
@@ -102,6 +102,8 @@ const StyledFieldContainer = styled.div`
 `;
 
 export function CompanyBoardCard() {
+  const { currentCardSelected, setCurrentCardSelected } =
+    useCurrentCardSelected();
   const boardCardId = useContext(BoardCardIdContext);
 
   const [companyProgress] = useRecoilState(
@@ -109,23 +111,8 @@ export function CompanyBoardCard() {
   );
   const { pipelineProgress, company } = companyProgress ?? {};
 
-  const [selectedBoardCards, setSelectedBoardCards] = useRecoilState(
-    selectedBoardCardIdsState,
-  );
   const viewFieldsDefinitions = useRecoilValue(viewFieldsDefinitionsState);
 
-  const selected = selectedBoardCards.includes(boardCardId ?? '');
-
-  function setSelected(isSelected: boolean) {
-    if (isSelected) {
-      setSelectedBoardCards([...selectedBoardCards, boardCardId ?? '']);
-    } else {
-      setSelectedBoardCards(
-        selectedBoardCards.filter((id) => id !== boardCardId),
-      );
-    }
-  }
-
   // boardCardId check can be moved to a wrapper to avoid unnecessary logic above
   if (!company || !pipelineProgress || !boardCardId) {
     return null;
@@ -150,8 +137,8 @@ export function CompanyBoardCard() {
   return (
     <StyledBoardCardWrapper>
       <StyledBoardCard
-        selected={selected}
-        onClick={() => setSelected(!selected)}
+        selected={currentCardSelected}
+        onClick={() => setCurrentCardSelected(!currentCardSelected)}
       >
         <StyledBoardCardHeader>
           <CompanyChip
@@ -162,8 +149,8 @@ export function CompanyBoardCard() {
           />
           <StyledCheckboxContainer className="checkbox-container">
             <Checkbox
-              checked={selected}
-              onChange={() => setSelected(!selected)}
+              checked={currentCardSelected}
+              onChange={() => setCurrentCardSelected(!currentCardSelected)}
               variant={CheckboxVariant.Secondary}
             />
           </StyledCheckboxContainer>

front/src/modules/companies/components/HooksCompanyBoard.tsx

@@ -4,8 +4,10 @@ import { useRecoilState, useSetRecoilState } from 'recoil';
 import { pipelineViewFields } from '@/pipeline/constants/pipelineViewFields';
 import { isBoardLoadedState } from '@/ui/board/states/isBoardLoadedState';
 import { viewFieldsDefinitionsState } from '@/ui/board/states/viewFieldsDefinitionsState';
+import { availableFiltersScopedState } from '@/ui/filter-n-sort/states/availableFiltersScopedState';
 import { filtersScopedState } from '@/ui/filter-n-sort/states/filtersScopedState';
 import { turnFilterIntoWhereClause } from '@/ui/filter-n-sort/utils/turnFilterIntoWhereClause';
+import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
 import {
   PipelineProgressableType,
@@ -17,6 +19,7 @@ import {
   useGetPipelineProgressQuery,
   useGetPipelinesQuery,
 } from '~/generated/graphql';
+import { opportunitiesBoardOptions } from '~/pages/opportunities/opportunitiesBoardOptions';
 
 import { useUpdateCompanyBoardCardIds } from '../hooks/useUpdateBoardCardIds';
 import { useUpdateCompanyBoard } from '../hooks/useUpdateCompanyBoardColumns';
@@ -30,8 +33,13 @@ export function HooksCompanyBoard({
   const setFieldsDefinitionsState = useSetRecoilState(
     viewFieldsDefinitionsState,
   );
+  const [, setAvailableFilters] = useRecoilScopedState(
+    availableFiltersScopedState,
+    CompanyBoardContext,
+  );
 
   useEffect(() => {
+    setAvailableFilters(opportunitiesBoardOptions.filters);
     setFieldsDefinitionsState(pipelineViewFields);
   });
 

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;
+  },
+});

front/src/modules/ui/filter-n-sort/components/DropdownMenuContainer.tsx

@@ -28,7 +28,7 @@ export function DropdownMenuContainer({
   });
 
   return (
-    <StyledDropdownMenuContainer>
+    <StyledDropdownMenuContainer data-select-disable>
       <DropdownMenu ref={dropdownRef}>{children}</DropdownMenu>
     </StyledDropdownMenuContainer>
   );

front/src/modules/ui/link/components/SocialLink.tsx

@@ -30,16 +30,25 @@ export function SocialLink({ children, href, onClick, type }: OwnProps) {
   let displayValue = children;
 
   if (type === 'linkedin') {
-    const splitUrl = href.split('/');
-    const splitName = splitUrl[4].split('-');
-    displayValue = splitName[2]
-      ? `${splitName[0]}-${splitName[1]}`
-      : splitName[0];
+    const matches = href.match(
+      /(?:https?:\/\/)?(?:www.)?linkedin.com\/(?:in|company)\/([-a-zA-Z0-9@:%_+.~#?&//=]*)/,
+    );
+    if (matches && matches[1]) {
+      displayValue = matches[1];
+    } else {
+      displayValue = 'LinkedIn';
+    }
   }
 
   if (type === 'twitter') {
-    const splitUrl = href.split('/');
-    displayValue = `@${splitUrl[3]}`;
+    const matches = href.match(
+      /(?:https?:\/\/)?(?:www.)?twitter.com\/([-a-zA-Z0-9@:%_+.~#?&//=]*)/,
+    );
+    if (matches && matches[1]) {
+      displayValue = `@${matches[1]}`;
+    } else {
+      displayValue = '@twitter';
+    }
   }
 
   return (

front/src/modules/ui/table/editable-cell/hooks/useEditableCell.ts

@@ -1,5 +1,6 @@
 import { useContext } from 'react';
 
+import { useDragSelect } from '@/ui/utilities/drag-select/hooks/useDragSelect';
 import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 
@@ -17,17 +18,20 @@ export function useEditableCell() {
   const { setCurrentCellInEditMode } = useCurrentCellEditMode();
 
   const setHotkeyScope = useSetHotkeyScope();
+  const { setDragSelectionStartEnabled } = useDragSelect();
 
   const closeCurrentCellInEditMode = useCloseCurrentCellInEditMode();
 
   const customCellHotkeyScope = useContext(CellHotkeyScopeContext);
 
   function closeEditableCell() {
+    setDragSelectionStartEnabled(true);
     closeCurrentCellInEditMode();
     setHotkeyScope(TableHotkeyScope.TableSoftFocus);
   }
 
   function openEditableCell() {
+    setDragSelectionStartEnabled(false);
     setCurrentCellInEditMode();
 
     if (customCellHotkeyScope) {

front/src/modules/ui/utilities/drag-select/components/DragSelect.tsx

@@ -4,6 +4,8 @@ import {
   useSelectionContainer,
 } from '@air/react-drag-to-select';
 
+import { useDragSelect } from '../hooks/useDragSelect';
+
 type OwnProps = {
   dragSelectable: RefObject<HTMLElement>;
   onDragSelectionChange: (id: string, selected: boolean) => void;
@@ -15,8 +17,12 @@ export function DragSelect({
   onDragSelectionChange,
   onDragSelectionStart,
 }: OwnProps) {
+  const { isDragSelectionStartEnabled } = useDragSelect();
   const { DragSelection } = useSelectionContainer({
     shouldStartSelecting: (target) => {
+      if (!isDragSelectionStartEnabled()) {
+        return false;
+      }
       if (target instanceof HTMLElement) {
         let el = target;
         while (el.parentElement && !el.dataset.selectDisable) {

front/src/modules/ui/utilities/drag-select/hooks/useDragSelect.ts

@@ -0,0 +1,28 @@
+import { useRecoilCallback, useRecoilState } from 'recoil';
+
+import { isDragSelectionStartEnabledState } from '../states/internal/isDragSelectionStartEnabledState';
+
+export function useDragSelect() {
+  const [, setIsDragSelectionStartEnabledInternal] = useRecoilState(
+    isDragSelectionStartEnabledState,
+  );
+
+  function setDragSelectionStartEnabled(isEnabled: boolean) {
+    setIsDragSelectionStartEnabledInternal(isEnabled);
+  }
+
+  const isDragSelectionStartEnabled = useRecoilCallback(
+    ({ snapshot }) =>
+      () => {
+        return snapshot
+          .getLoadable(isDragSelectionStartEnabledState)
+          .getValue();
+      },
+    [],
+  );
+
+  return {
+    isDragSelectionStartEnabled,
+    setDragSelectionStartEnabled,
+  };
+}

front/src/modules/ui/utilities/drag-select/states/internal/isDragSelectionStartEnabledState.ts

@@ -0,0 +1,6 @@
+import { atom } from 'recoil';
+
+export const isDragSelectionStartEnabledState = atom({
+  key: 'drag-select/isDragSelectionStartEnabledState',
+  default: true,
+});