From aedb64db3d70a0ab73ee7ffd10f90b9f5f9fc755 Mon Sep 17 00:00:00 2001 From: Nitin Koche Date: Tue, 10 Sep 2024 10:36:37 +0530 Subject: [PATCH] kept only buisness logic in hook - acc to review --- .../RecordIndexPageKanbanAddButton.tsx | 110 ++++++++++++++---- .../useRecordIndexPageKanbanAddButton.ts | 106 +++++------------ 2 files changed, 113 insertions(+), 103 deletions(-) diff --git a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexPageKanbanAddButton.tsx b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexPageKanbanAddButton.tsx index cfa3f371168d..6299546e03b6 100644 --- a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexPageKanbanAddButton.tsx +++ b/packages/twenty-front/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(); + + 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={ - + {isOpportunity && isSelectingCompany ? ( ))} )} - + } dropdownHotkeyScope={{ scope: dropdownId }} /> diff --git a/packages/twenty-front/src/modules/object-record/record-index/hooks/useRecordIndexPageKanbanAddButton.ts b/packages/twenty-front/src/modules/object-record/record-index/hooks/useRecordIndexPageKanbanAddButton.ts index 49a06dca4d3b..1d64225bf485 100644 --- a/packages/twenty-front/src/modules/object-record/record-index/hooks/useRecordIndexPageKanbanAddButton.ts +++ b/packages/twenty-front/src/modules/object-record/record-index/hooks/useRecordIndexPageKanbanAddButton.ts @@ -2,44 +2,28 @@ 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>; }; export const useRecordIndexPageKanbanAddButton = ({ - recordIndexId, objectNamePlural, - setIsSelectingCompany, }: useRecordIndexPageKanbanAddButtonProps) => { - const dropdownId = `record-index-page-add-button-dropdown`; const { objectNameSingular } = useObjectNameSingularFromPlural({ objectNamePlural, }); - const [selectedColumnDefinition, setSelectedColumnDefinition] = - useState(); 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, @@ -47,71 +31,35 @@ export const useRecordIndexPageKanbanAddButton = ({ 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, }; };