From 24c31f9b39529483517e6fc0b0890c541ef8859b Mon Sep 17 00:00:00 2001 From: Us3r-gitHub <58467104+Us3r-gitHub@users.noreply.github.com> Date: Mon, 24 Jun 2024 21:05:40 +0700 Subject: [PATCH] Fix(view): Show Kanban View Creation (#5985) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit # This PR - Revise my previous work (PR #5969) Because it would break the current logic and cause unexpected behavior. (Issue #5979) - Solve (Issue #5915) with another way @lucasbordeau What do you think about my current approach? @JarWarren Please check it out—I'd love to get your feedback too! --------- Co-authored-by: Achsan Co-authored-by: Lucas Bordeau --- .../ViewPickerCreateOrEditContentEffect.tsx | 24 ++++++++++++------- .../components/ViewPickerDropdown.tsx | 8 +------ .../hooks/useGetAvailableFieldsForKanban.ts | 6 ----- 3 files changed, 16 insertions(+), 22 deletions(-) diff --git a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerCreateOrEditContentEffect.tsx b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerCreateOrEditContentEffect.tsx index 6124063e0..45ba1209c 100644 --- a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerCreateOrEditContentEffect.tsx +++ b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerCreateOrEditContentEffect.tsx @@ -1,5 +1,5 @@ import { useEffect } from 'react'; -import { useRecoilValue, useSetRecoilState } from 'recoil'; +import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'; import { useGetCurrentView } from '@/views/hooks/useGetCurrentView'; import { useGetAvailableFieldsForKanban } from '@/views/view-picker/hooks/useGetAvailableFieldsForKanban'; @@ -22,9 +22,8 @@ export const ViewPickerCreateOrEditContentEffect = () => { ); const setViewPickerInputName = useSetRecoilState(viewPickerInputNameState); - const setViewPickerKanbanFieldMetadataId = useSetRecoilState( - viewPickerKanbanFieldMetadataIdState, - ); + const [viewPickerKanbanFieldMetadataId, setViewPickerKanbanFieldMetadataId] = + useRecoilState(viewPickerKanbanFieldMetadataIdState); const setViewPickerType = useSetRecoilState(viewPickerTypeState); const viewPickerReferenceViewId = useRecoilValue( @@ -50,13 +49,11 @@ export const ViewPickerCreateOrEditContentEffect = () => { ) { setViewPickerSelectedIcon(referenceView.icon); setViewPickerInputName(referenceView.name); - setViewPickerKanbanFieldMetadataId(referenceView.kanbanFieldMetadataId); setViewPickerType(referenceView.type); } }, [ referenceView, setViewPickerInputName, - setViewPickerKanbanFieldMetadataId, setViewPickerSelectedIcon, setViewPickerType, viewPickerIsPersisting, @@ -64,13 +61,22 @@ export const ViewPickerCreateOrEditContentEffect = () => { ]); useEffect(() => { - if (availableFieldsForKanban.length > 0 && !viewPickerIsDirty) { - setViewPickerKanbanFieldMetadataId(availableFieldsForKanban[0].id); + if ( + isDefined(referenceView) && + availableFieldsForKanban.length > 0 && + viewPickerKanbanFieldMetadataId === '' + ) { + setViewPickerKanbanFieldMetadataId( + referenceView.kanbanFieldMetadataId !== '' + ? referenceView.kanbanFieldMetadataId + : availableFieldsForKanban[0].id, + ); } }, [ + referenceView, availableFieldsForKanban, + viewPickerKanbanFieldMetadataId, setViewPickerKanbanFieldMetadataId, - viewPickerIsDirty, ]); return <>; diff --git a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerDropdown.tsx b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerDropdown.tsx index 2ead64a8a..a3461683a 100644 --- a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerDropdown.tsx +++ b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerDropdown.tsx @@ -1,6 +1,6 @@ import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; -import { useRecoilValue, useSetRecoilState } from 'recoil'; +import { useRecoilValue } from 'recoil'; import { IconChevronDown, IconList, @@ -19,7 +19,6 @@ import { ViewPickerListContent } from '@/views/view-picker/components/ViewPicker import { VIEW_PICKER_DROPDOWN_ID } from '@/views/view-picker/constants/ViewPickerDropdownId'; import { useViewPickerMode } from '@/views/view-picker/hooks/useViewPickerMode'; import { useViewPickerPersistView } from '@/views/view-picker/hooks/useViewPickerPersistView'; -import { useViewPickerStates } from '@/views/view-picker/hooks/useViewPickerStates'; import { isDefined } from '~/utils/isDefined'; import { useViewStates } from '../../hooks/internal/useViewStates'; @@ -53,8 +52,6 @@ export const ViewPickerDropdown = () => { const { entityCountInCurrentViewState } = useViewStates(); - const { viewPickerIsDirtyState } = useViewPickerStates(); - const { currentViewWithCombinedFiltersAndSorts } = useGetCurrentView(); const { handleUpdate } = useViewPickerPersistView(); @@ -63,8 +60,6 @@ export const ViewPickerDropdown = () => { entityCountInCurrentViewState, ); - const setViewPickerIsDirty = useSetRecoilState(viewPickerIsDirtyState); - const { isDropdownOpen: isViewsListDropdownOpen } = useDropdown( VIEW_PICKER_DROPDOWN_ID, ); @@ -75,7 +70,6 @@ export const ViewPickerDropdown = () => { const CurrentViewIcon = getIcon(currentViewWithCombinedFiltersAndSorts?.icon); const handleClickOutside = async () => { - setViewPickerIsDirty(false); if (isViewsListDropdownOpen && viewPickerMode === 'edit') { await handleUpdate(); } diff --git a/packages/twenty-front/src/modules/views/view-picker/hooks/useGetAvailableFieldsForKanban.ts b/packages/twenty-front/src/modules/views/view-picker/hooks/useGetAvailableFieldsForKanban.ts index a0ea116b6..d5044bd19 100644 --- a/packages/twenty-front/src/modules/views/view-picker/hooks/useGetAvailableFieldsForKanban.ts +++ b/packages/twenty-front/src/modules/views/view-picker/hooks/useGetAvailableFieldsForKanban.ts @@ -5,16 +5,13 @@ import { useRecoilValue, useSetRecoilState } from 'recoil'; import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState'; import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState'; import { useViewStates } from '@/views/hooks/internal/useViewStates'; -import { useViewPickerStates } from '@/views/view-picker/hooks/useViewPickerStates'; import { FieldMetadataType } from '~/generated-metadata/graphql'; export const useGetAvailableFieldsForKanban = () => { const { viewObjectMetadataIdState } = useViewStates(); - const { viewPickerIsDirtyState } = useViewPickerStates(); const viewObjectMetadataId = useRecoilValue(viewObjectMetadataIdState); const objectMetadataItems = useRecoilValue(objectMetadataItemsState); - const setViewPickerIsDirty = useSetRecoilState(viewPickerIsDirtyState); const setNavigationMemorizedUrl = useSetRecoilState( navigationMemorizedUrlState, ); @@ -32,15 +29,12 @@ export const useGetAvailableFieldsForKanban = () => { const navigate = useNavigate(); const navigateToSelectSettings = useCallback(() => { - setViewPickerIsDirty(false); - setNavigationMemorizedUrl(location.pathname + location.search); navigate(`/settings/objects/${objectMetadataItem?.namePlural}`); }, [ navigate, objectMetadataItem?.namePlural, - setViewPickerIsDirty, setNavigationMemorizedUrl, location, ]);