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/companies/components/NewCompanyProgressButton.tsx
+++ b/front/src/modules/companies/components/NewCompanyProgressButton.tsx
@ -0,0 +1,135 @@
+import { useCallback, useRef, useState } from 'react';
+import { getOperationName } from '@apollo/client/utilities';
+import { useRecoilState } from 'recoil';
+import { v4 as uuidv4 } from 'uuid';
+
+import { usePreviousHotkeyScope } from '@/lib/hotkeys/hooks/usePreviousHotkeyScope';
+import { GET_PIPELINES } from '@/pipeline-progress/queries';
+import { BoardColumnContext } from '@/pipeline-progress/states/BoardColumnContext';
+import { boardState } from '@/pipeline-progress/states/boardState';
+import { pipelineStageIdScopedState } from '@/pipeline-progress/states/pipelineStageIdScopedState';
+import { RecoilScope } from '@/recoil-scope/components/RecoilScope';
+import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState';
+import { SingleEntitySelect } from '@/relation-picker/components/SingleEntitySelect';
+import { useFilteredSearchEntityQuery } from '@/relation-picker/hooks/useFilteredSearchEntityQuery';
+import { relationPickerSearchFilterScopedState } from '@/relation-picker/states/relationPickerSearchFilterScopedState';
+import { RelationPickerHotkeyScope } from '@/relation-picker/types/RelationPickerHotkeyScope';
+import { BoardPipelineStageColumn } from '@/ui/board/components/Board';
+import { NewButton } from '@/ui/board/components/NewButton';
+import { getLogoUrlFromDomainName } from '@/utils/utils';
+import {
+  CommentableType,
+  PipelineProgressableType,
+  useCreateOnePipelineProgressMutation,
+  useSearchCompanyQuery,
+} from '~/generated/graphql';
+import { currentPipelineState } from '~/pages/opportunities/currentPipelineState';
+
+export function NewCompanyProgressButton() {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [isCreatingCard, setIsCreatingCard] = useState(false);
+  const [board, setBoard] = useRecoilState(boardState);
+  const [pipeline] = useRecoilState(currentPipelineState);
+  const [pipelineStageId] = useRecoilScopedState(
+    pipelineStageIdScopedState,
+    BoardColumnContext,
+  );
+
+  const {
+    goBackToPreviousHotkeyScope,
+    setHotkeyScopeAndMemorizePreviousScope,
+  } = usePreviousHotkeyScope();
+
+  const [createOnePipelineProgress] = useCreateOnePipelineProgressMutation({
+    refetchQueries: [getOperationName(GET_PIPELINES) ?? ''],
+  });
+
+  const handleEntitySelect = useCallback(
+    async (company: any) => {
+      if (!company) return;
+
+      setIsCreatingCard(false);
+      goBackToPreviousHotkeyScope();
+
+      const newUuid = uuidv4();
+      const newBoard = JSON.parse(JSON.stringify(board));
+      const destinationColumnIndex = newBoard.findIndex(
+        (column: BoardPipelineStageColumn) =>
+          column.pipelineStageId === pipelineStageId,
+      );
+      newBoard[destinationColumnIndex].pipelineProgressIds.push(newUuid);
+      setBoard(newBoard);
+      await createOnePipelineProgress({
+        variables: {
+          uuid: newUuid,
+          pipelineStageId: pipelineStageId || '',
+          pipelineId: pipeline?.id || '',
+          entityId: company.id || '',
+          entityType: PipelineProgressableType.Company,
+        },
+      });
+    },
+    [
+      goBackToPreviousHotkeyScope,
+      board,
+      setBoard,
+      createOnePipelineProgress,
+      pipelineStageId,
+      pipeline?.id,
+    ],
+  );
+
+  const handleNewClick = useCallback(() => {
+    setIsCreatingCard(true);
+    setHotkeyScopeAndMemorizePreviousScope(
+      RelationPickerHotkeyScope.RelationPicker,
+    );
+  }, [setIsCreatingCard, setHotkeyScopeAndMemorizePreviousScope]);
+
+  function handleCancel() {
+    goBackToPreviousHotkeyScope();
+    setIsCreatingCard(false);
+  }
+
+  const [searchFilter] = useRecoilScopedState(
+    relationPickerSearchFilterScopedState,
+  );
+  const companies = useFilteredSearchEntityQuery({
+    queryHook: useSearchCompanyQuery,
+    selectedIds: [],
+    searchFilter: searchFilter,
+    mappingFunction: (company) => ({
+      entityType: CommentableType.Company,
+      id: company.id,
+      name: company.name,
+      domainName: company.domainName,
+      avatarType: 'squared',
+      avatarUrl: getLogoUrlFromDomainName(company.domainName),
+    }),
+    orderByField: 'name',
+    searchOnFields: ['name'],
+  });
+
+  return (
+    <>
+      {isCreatingCard && (
+        <RecoilScope>
+          <div ref={containerRef}>
+            <div ref={containerRef}>
+              <SingleEntitySelect
+                onEntitySelected={(value) => handleEntitySelect(value)}
+                onCancel={handleCancel}
+                entities={{
+                  entitiesToSelect: companies.entitiesToSelect,
+                  selectedEntity: companies.selectedEntities[0],
+                  loading: companies.loading,
+                }}
+              />
+            </div>
+          </div>
+        </RecoilScope>
+      )}
+      <NewButton onClick={handleNewClick} />
+    </>
+  );
+}