diff --git a/packages/twenty-front/src/modules/app/hooks/useExecuteTasksOnAnyLocationChange.ts b/packages/twenty-front/src/modules/app/hooks/useExecuteTasksOnAnyLocationChange.ts index a028fbf8d4..65e92a91db 100644 --- a/packages/twenty-front/src/modules/app/hooks/useExecuteTasksOnAnyLocationChange.ts +++ b/packages/twenty-front/src/modules/app/hooks/useExecuteTasksOnAnyLocationChange.ts @@ -2,14 +2,76 @@ import { useRecoilCallback } from 'recoil'; import { MAIN_CONTEXT_STORE_INSTANCE_ID } from '@/context-store/constants/MainContextStoreInstanceId'; import { contextStoreIsPageInEditModeComponentState } from '@/context-store/states/contextStoreIsPageInEditModeComponentState'; +import { currentPageLayoutIdState } from '@/page-layout/states/currentPageLayoutIdState'; +import { isPageLayoutInEditModeComponentState } from '@/page-layout/states/isPageLayoutInEditModeComponentState'; +import { pageLayoutCurrentLayoutsComponentState } from '@/page-layout/states/pageLayoutCurrentLayoutsComponentState'; +import { pageLayoutDraftComponentState } from '@/page-layout/states/pageLayoutDraftComponentState'; +import { pageLayoutIsInitializedComponentState } from '@/page-layout/states/pageLayoutIsInitializedComponentState'; +import { pageLayoutPersistedComponentState } from '@/page-layout/states/pageLayoutPersistedComponentState'; +import { convertPageLayoutToTabLayouts } from '@/page-layout/utils/convertPageLayoutToTabLayouts'; import { useCloseAnyOpenDropdown } from '@/ui/layout/dropdown/hooks/useCloseAnyOpenDropdown'; +import { isDefined } from 'twenty-shared/utils'; export const useExecuteTasksOnAnyLocationChange = () => { const { closeAnyOpenDropdown } = useCloseAnyOpenDropdown(); - const resetIsPageInEditMode = useRecoilCallback( - ({ set }) => + const resetPageLayoutEditMode = useRecoilCallback( + ({ set, snapshot }) => () => { + const pageLayoutId = snapshot + .getLoadable(currentPageLayoutIdState) + .getValue(); + + if (isDefined(pageLayoutId)) { + const pageLayoutPersisted = snapshot + .getLoadable( + pageLayoutPersistedComponentState.atomFamily({ + instanceId: pageLayoutId, + }), + ) + .getValue(); + + if (isDefined(pageLayoutPersisted)) { + set( + pageLayoutDraftComponentState.atomFamily({ + instanceId: pageLayoutId, + }), + { + id: pageLayoutPersisted.id, + name: pageLayoutPersisted.name, + type: pageLayoutPersisted.type, + objectMetadataId: pageLayoutPersisted.objectMetadataId, + tabs: pageLayoutPersisted.tabs, + }, + ); + + const tabLayouts = + convertPageLayoutToTabLayouts(pageLayoutPersisted); + set( + pageLayoutCurrentLayoutsComponentState.atomFamily({ + instanceId: pageLayoutId, + }), + tabLayouts, + ); + } + + set( + isPageLayoutInEditModeComponentState.atomFamily({ + instanceId: pageLayoutId, + }), + false, + ); + + set( + pageLayoutIsInitializedComponentState.atomFamily({ + instanceId: pageLayoutId, + }), + false, + ); + + set(currentPageLayoutIdState, null); + } + set( contextStoreIsPageInEditModeComponentState.atomFamily({ instanceId: MAIN_CONTEXT_STORE_INSTANCE_ID, @@ -27,7 +89,7 @@ export const useExecuteTasksOnAnyLocationChange = () => { */ const executeTasksOnAnyLocationChange = () => { closeAnyOpenDropdown(); - resetIsPageInEditMode(); + resetPageLayoutEditMode(); }; return { executeTasksOnAnyLocationChange }; diff --git a/packages/twenty-front/src/modules/page-layout/components/PageLayoutRenderer.tsx b/packages/twenty-front/src/modules/page-layout/components/PageLayoutRenderer.tsx index f8a0ca1d52..dd4daccffc 100644 --- a/packages/twenty-front/src/modules/page-layout/components/PageLayoutRenderer.tsx +++ b/packages/twenty-front/src/modules/page-layout/components/PageLayoutRenderer.tsx @@ -1,5 +1,4 @@ import { PageLayoutInitializationQueryEffect } from '@/page-layout/components/PageLayoutInitializationQueryEffect'; - import { PageLayoutRendererContent } from '@/page-layout/components/PageLayoutRendererContent'; import { useSetIsPageLayoutInEditMode } from '@/page-layout/hooks/useSetIsPageLayoutInEditMode'; import { PageLayoutComponentInstanceContext } from '@/page-layout/states/contexts/PageLayoutComponentInstanceContext'; diff --git a/packages/twenty-front/src/modules/page-layout/hooks/useSetIsPageLayoutInEditMode.ts b/packages/twenty-front/src/modules/page-layout/hooks/useSetIsPageLayoutInEditMode.ts index d1ad584436..ffd56c6d05 100644 --- a/packages/twenty-front/src/modules/page-layout/hooks/useSetIsPageLayoutInEditMode.ts +++ b/packages/twenty-front/src/modules/page-layout/hooks/useSetIsPageLayoutInEditMode.ts @@ -3,6 +3,7 @@ import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpe import { MAIN_CONTEXT_STORE_INSTANCE_ID } from '@/context-store/constants/MainContextStoreInstanceId'; import { contextStoreIsPageInEditModeComponentState } from '@/context-store/states/contextStoreIsPageInEditModeComponentState'; import { PageLayoutComponentInstanceContext } from '@/page-layout/states/contexts/PageLayoutComponentInstanceContext'; +import { currentPageLayoutIdState } from '@/page-layout/states/currentPageLayoutIdState'; import { isPageLayoutInEditModeComponentState } from '@/page-layout/states/isPageLayoutInEditModeComponentState'; import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow'; import { useRecoilComponentCallbackState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackState'; @@ -32,6 +33,8 @@ export const useSetIsPageLayoutInEditMode = (pageLayoutIdFromProps: string) => { set(contextStoreIsFullTabWidgetInEditModeState, value); + set(currentPageLayoutIdState, value ? pageLayoutId : null); + const isCommandMenuOpened = snapshot .getLoadable(isCommandMenuOpenedState) .getValue(); @@ -45,7 +48,11 @@ export const useSetIsPageLayoutInEditMode = (pageLayoutIdFromProps: string) => { ); } }, - [isPageLayoutInEditModeState, contextStoreIsFullTabWidgetInEditModeState], + [ + isPageLayoutInEditModeState, + contextStoreIsFullTabWidgetInEditModeState, + pageLayoutId, + ], ); return { setIsPageLayoutInEditMode }; diff --git a/packages/twenty-front/src/modules/page-layout/states/currentPageLayoutIdState.ts b/packages/twenty-front/src/modules/page-layout/states/currentPageLayoutIdState.ts new file mode 100644 index 0000000000..81285a15b3 --- /dev/null +++ b/packages/twenty-front/src/modules/page-layout/states/currentPageLayoutIdState.ts @@ -0,0 +1,6 @@ +import { createState } from 'twenty-ui/utilities'; + +export const currentPageLayoutIdState = createState({ + key: 'currentPageLayoutIdState', + defaultValue: null, +});