kept only buisness logic in hook - acc to review

twentyhq · Sep 10, 2024 · aedb64d · aedb64d
1 parent c07f79b
commit aedb64d
Show file tree

Hide file tree

Showing 2 changed files with 113 additions and 103 deletions.
diff --git a/...ront/src/modules/object-record/record-index/components/RecordIndexPageKanbanAddButton.tsx b/...ront/src/modules/object-record/record-index/components/RecordIndexPageKanbanAddButton.tsx
@@ -1,21 +1,31 @@
-import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
-import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
-import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
-import styled from '@emotion/styled';
-import { useState } from 'react';
-
-import { SingleEntitySelect } from '@/object-record/relation-picker/components/SingleEntitySelect';
-
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+import { useRecordBoardStates } from '@/object-record/record-board/hooks/internal/useRecordBoardStates';
+import { RecordBoardColumnDefinition } from '@/object-record/record-board/types/RecordBoardColumnDefinition';
 import { RecordIndexPageKanbanAddMenuItem } from '@/object-record/record-index/components/RecordIndexPageKanbanAddMenuItem';
 import { useRecordIndexPageKanbanAddButton } from '@/object-record/record-index/hooks/useRecordIndexPageKanbanAddButton';
+import { SingleEntitySelect } from '@/object-record/relation-picker/components/SingleEntitySelect';
+import { useEntitySelectSearch } from '@/object-record/relation-picker/hooks/useEntitySelectSearch';
+import { EntityForSelect } from '@/object-record/relation-picker/types/EntityForSelect';
+import { RelationPickerHotkeyScope } from '@/object-record/relation-picker/types/RelationPickerHotkeyScope';
 import { IconButton } from '@/ui/input/button/components/IconButton';
-import { IconPlus } from 'twenty-ui';
+import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
+import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
+import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
+import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
+import styled from '@emotion/styled';
+import { useCallback, useState } from 'react';
+import { useRecoilValue } from 'recoil';
+import { IconPlus, isDefined } from 'twenty-ui';
 
 const StyledDropdownMenuItemsContainer = styled(DropdownMenuItemsContainer)`
   width: 100%;
 `;
 
+const StyledDropDownMenu = styled(DropdownMenu)`
+  width: 200px;
+`;
+
 type RecordIndexPageKanbanAddButtonProps = {
   recordIndexId: string;
   objectNamePlural: string;
@@ -25,23 +35,79 @@ export const RecordIndexPageKanbanAddButton = ({
   recordIndexId,
   objectNamePlural,
 }: RecordIndexPageKanbanAddButtonProps) => {
+  const dropdownId = `record-index-page-add-button-dropdown`;
   const [isSelectingCompany, setIsSelectingCompany] = useState(false);
+  const [selectedColumnDefinition, setSelectedColumnDefinition] =
+    useState<RecordBoardColumnDefinition>();
+
+  const { columnIdsState } = useRecordBoardStates(recordIndexId);
+  const columnIds = useRecoilValue(columnIdsState);
+
+  const {
+    setHotkeyScopeAndMemorizePreviousScope,
+    goBackToPreviousHotkeyScope,
+  } = usePreviousHotkeyScope();
+  const { resetSearchFilter } = useEntitySelectSearch({
+    relationPickerScopeId: 'relation-picker',
+  });
+
+  const { closeDropdown } = useDropdown(dropdownId);
 
   const {
-    dropdownId,
-    columnIds,
     selectFieldMetadataItem,
     isOpportunity,
-    handleOpportunityClick,
-    handleNonOpportunityClick,
-    handleEntitySelect,
-    handleCancel,
+    createOpportunity,
+    createRecordWithoutCompany,
   } = useRecordIndexPageKanbanAddButton({
-    recordIndexId,
     objectNamePlural,
-    setIsSelectingCompany,
   });
 
+  const handleItemClick = useCallback(
+    (columnDefinition: RecordBoardColumnDefinition) => {
+      if (isOpportunity) {
+        setIsSelectingCompany(true);
+        setSelectedColumnDefinition(columnDefinition);
+        setHotkeyScopeAndMemorizePreviousScope(
+          RelationPickerHotkeyScope.RelationPicker,
+        );
+      } else {
+        createRecordWithoutCompany(columnDefinition);
+        closeDropdown();
+      }
+    },
+    [
+      isOpportunity,
+      createRecordWithoutCompany,
+      setHotkeyScopeAndMemorizePreviousScope,
+      closeDropdown,
+    ],
+  );
+
+  const handleEntitySelect = useCallback(
+    (company?: EntityForSelect) => {
+      setIsSelectingCompany(false);
+      goBackToPreviousHotkeyScope();
+      resetSearchFilter();
+      if (isDefined(company) && isDefined(selectedColumnDefinition)) {
+        createOpportunity(company, selectedColumnDefinition);
+      }
+      closeDropdown();
+    },
+    [
+      createOpportunity,
+      goBackToPreviousHotkeyScope,
+      resetSearchFilter,
+      selectedColumnDefinition,
+      closeDropdown,
+    ],
+  );
+
+  const handleCancel = useCallback(() => {
+    resetSearchFilter();
+    goBackToPreviousHotkeyScope();
+    setIsSelectingCompany(false);
+  }, [goBackToPreviousHotkeyScope, resetSearchFilter]);
+
   if (!selectFieldMetadataItem) {
     return null;
   }
@@ -62,7 +128,7 @@ export const RecordIndexPageKanbanAddButton = ({
       }
       dropdownId={dropdownId}
       dropdownComponents={
-        <DropdownMenu style={{ width: '200px' }}>
+        <StyledDropDownMenu>
           {isOpportunity && isSelectingCompany ? (
             <SingleEntitySelect
               disableBackgroundBlur
@@ -79,16 +145,12 @@ export const RecordIndexPageKanbanAddButton = ({
                   key={columnId}
                   columnId={columnId}
                   recordIndexId={recordIndexId}
-                  onItemClick={
-                    isOpportunity
-                      ? handleOpportunityClick
-                      : handleNonOpportunityClick
-                  }
+                  onItemClick={handleItemClick}
                 />
               ))}
             </StyledDropdownMenuItemsContainer>
           )}
-        </DropdownMenu>
+        </StyledDropDownMenu>
       }
       dropdownHotkeyScope={{ scope: dropdownId }}
     />

diff --git a/...y-front/src/modules/object-record/record-index/hooks/useRecordIndexPageKanbanAddButton.ts b/...y-front/src/modules/object-record/record-index/hooks/useRecordIndexPageKanbanAddButton.ts
@@ -2,116 +2,64 @@ import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadata
 import { useObjectNameSingularFromPlural } from '@/object-metadata/hooks/useObjectNameSingularFromPlural';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useCreateOneRecord } from '@/object-record/hooks/useCreateOneRecord';
-import { useRecordBoardStates } from '@/object-record/record-board/hooks/internal/useRecordBoardStates';
 import { RecordBoardColumnDefinition } from '@/object-record/record-board/types/RecordBoardColumnDefinition';
 import { recordIndexKanbanFieldMetadataIdState } from '@/object-record/record-index/states/recordIndexKanbanFieldMetadataIdState';
-import { useEntitySelectSearch } from '@/object-record/relation-picker/hooks/useEntitySelectSearch';
 import { EntityForSelect } from '@/object-record/relation-picker/types/EntityForSelect';
-import { RelationPickerHotkeyScope } from '@/object-record/relation-picker/types/RelationPickerHotkeyScope';
-import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
-import { useCallback, useState } from 'react';
 import { useRecoilValue } from 'recoil';
+import { isDefined } from 'twenty-ui';
 
 type useRecordIndexPageKanbanAddButtonProps = {
-  recordIndexId: string;
   objectNamePlural: string;
-  setIsSelectingCompany: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
 export const useRecordIndexPageKanbanAddButton = ({
-  recordIndexId,
   objectNamePlural,
-  setIsSelectingCompany,
 }: useRecordIndexPageKanbanAddButtonProps) => {
-  const dropdownId = `record-index-page-add-button-dropdown`;
   const { objectNameSingular } = useObjectNameSingularFromPlural({
     objectNamePlural,
   });
-  const [selectedColumnDefinition, setSelectedColumnDefinition] =
-    useState<RecordBoardColumnDefinition>();
   const { objectMetadataItem } = useObjectMetadataItem({ objectNameSingular });
-  const { columnIdsState } = useRecordBoardStates(recordIndexId);
-  const columnIds = useRecoilValue(columnIdsState);
+
   const recordIndexKanbanFieldMetadataId = useRecoilValue(
     recordIndexKanbanFieldMetadataIdState,
   );
   const { createOneRecord } = useCreateOneRecord({ objectNameSingular });
-  const {
-    setHotkeyScopeAndMemorizePreviousScope,
-    goBackToPreviousHotkeyScope,
-  } = usePreviousHotkeyScope();
 
   const selectFieldMetadataItem = objectMetadataItem.fields.find(
     (field) => field.id === recordIndexKanbanFieldMetadataId,
   );
   const isOpportunity =
     objectMetadataItem.nameSingular === CoreObjectNameSingular.Opportunity;
 
-  const handleOpportunityClick = useCallback(
-    (columnDefinition: RecordBoardColumnDefinition) => {
-      setIsSelectingCompany(true);
-      setSelectedColumnDefinition(columnDefinition);
-      setHotkeyScopeAndMemorizePreviousScope(
-        RelationPickerHotkeyScope.RelationPicker,
-      );
-    },
-    [
-      setIsSelectingCompany,
-      setSelectedColumnDefinition,
-      setHotkeyScopeAndMemorizePreviousScope,
-    ],
-  );
-  const handleNonOpportunityClick = useCallback(
-    (columnDefinition: RecordBoardColumnDefinition) => {
-      if (selectFieldMetadataItem !== undefined)
-        createOneRecord({
-          [selectFieldMetadataItem.name]: columnDefinition?.value,
-          position: 'first',
-        });
-    },
-    [createOneRecord, selectFieldMetadataItem],
-  );
-  const { resetSearchFilter } = useEntitySelectSearch({
-    relationPickerScopeId: 'relation-picker',
-  });
+  const createOpportunity = (
+    company: EntityForSelect,
+    columnDefinition: RecordBoardColumnDefinition,
+  ) => {
+    if (isDefined(selectFieldMetadataItem)) {
+      createOneRecord({
+        name: company.name,
+        companyId: company.id,
+        position: 'first',
+        [selectFieldMetadataItem.name]: columnDefinition?.value,
+      });
+    }
+  };
 
-  const handleEntitySelect = useCallback(
-    (company?: EntityForSelect) => {
-      setIsSelectingCompany(false);
-      goBackToPreviousHotkeyScope();
-      resetSearchFilter();
-      if (company !== undefined && selectFieldMetadataItem !== undefined) {
-        createOneRecord({
-          name: company.name,
-          companyId: company.id,
-          position: 'first',
-          [selectFieldMetadataItem.name]: selectedColumnDefinition?.value,
-        });
-      }
-    },
-    [
-      createOneRecord,
-      goBackToPreviousHotkeyScope,
-      selectFieldMetadataItem,
-      selectedColumnDefinition,
-      setIsSelectingCompany,
-      resetSearchFilter,
-    ],
-  );
-  const handleCancel = useCallback(() => {
-    resetSearchFilter();
-    goBackToPreviousHotkeyScope();
-    setIsSelectingCompany(false);
-  }, [goBackToPreviousHotkeyScope, resetSearchFilter, setIsSelectingCompany]);
+  const createRecordWithoutCompany = (
+    columnDefinition: RecordBoardColumnDefinition,
+  ) => {
+    if (isDefined(selectFieldMetadataItem)) {
+      createOneRecord({
+        [selectFieldMetadataItem.name]: columnDefinition?.value,
+        position: 'first',
+      });
+    }
+  };
 
   return {
-    dropdownId,
-    columnIds,
     selectFieldMetadataItem,
     isOpportunity,
-    handleOpportunityClick,
-    handleNonOpportunityClick,
-    handleEntitySelect,
-    handleCancel,
+    createOpportunity,
+    createRecordWithoutCompany,
   };
 };