From c294d967a35601b5cccec3fb54f830bcbe72d081 Mon Sep 17 00:00:00 2001 From: nitin <142569587+ehconitin@users.noreply.github.com> Date: Fri, 28 Mar 2025 13:56:59 +0530 Subject: [PATCH] reset main context store viewId and current view type on settings page (#11206) closes https://github.com/twentyhq/core-team-issues/issues/588 --------- Co-authored-by: Charles Bochet --- .../command-menu/components/CommandMenu.tsx | 11 ++- .../components/MainContextStoreProvider.tsx | 19 ++-- .../MainContextStoreProviderEffect.tsx | 91 +++++++++++++++---- 3 files changed, 89 insertions(+), 32 deletions(-) diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx index 8b6100e7b..3577d4db1 100644 --- a/packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx +++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx @@ -5,8 +5,8 @@ import { RESET_CONTEXT_TO_SELECTION } from '@/command-menu/constants/ResetContex import { useMatchingCommandMenuCommands } from '@/command-menu/hooks/useMatchingCommandMenuCommands'; import { commandMenuSearchState } from '@/command-menu/states/commandMenuSearchState'; import { Command } from '@/command-menu/types/Command'; -import { useContextStoreObjectMetadataItemOrThrow } from '@/context-store/hooks/useContextStoreObjectMetadataItemOrThrow'; import { contextStoreCurrentObjectMetadataItemIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataItemIdComponentState'; +import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems'; import { SelectableItem } from '@/ui/layout/selectable-list/components/SelectableItem'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; import { useLingui } from '@lingui/react/macro'; @@ -22,6 +22,7 @@ export const CommandMenu = () => { const { t } = useLingui(); const commandMenuSearch = useRecoilValue(commandMenuSearchState); + const { objectMetadataItems } = useObjectMetadataItems(); const { noResults, @@ -42,8 +43,12 @@ export const CommandMenu = () => { 'command-menu-previous', ); - const { objectMetadataItem: currentObjectMetadataItem } = - useContextStoreObjectMetadataItemOrThrow(); + const objectMetadataItemId = useRecoilComponentValueV2( + contextStoreCurrentObjectMetadataItemIdComponentState, + ); + const currentObjectMetadataItem = objectMetadataItems.find( + (item) => item.id === objectMetadataItemId, + ); const commandGroups: CommandGroupConfig[] = [ { diff --git a/packages/twenty-front/src/modules/context-store/components/MainContextStoreProvider.tsx b/packages/twenty-front/src/modules/context-store/components/MainContextStoreProvider.tsx index 2dd7c0c07..0027072b0 100644 --- a/packages/twenty-front/src/modules/context-store/components/MainContextStoreProvider.tsx +++ b/packages/twenty-front/src/modules/context-store/components/MainContextStoreProvider.tsx @@ -1,12 +1,13 @@ import { MainContextStoreProviderEffect } from '@/context-store/components/MainContextStoreProviderEffect'; +import { useIsSettingsPage } from '@/navigation/hooks/useIsSettingsPage'; import { useLastVisitedView } from '@/navigation/hooks/useLastVisitedView'; import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState'; import { prefetchIndexViewIdFromObjectMetadataItemFamilySelector } from '@/prefetch/states/selector/prefetchIndexViewIdFromObjectMetadataItemFamilySelector'; import { AppPath } from '@/types/AppPath'; import { useParams, useSearchParams } from 'react-router-dom'; import { useRecoilValue } from 'recoil'; -import { useIsMatchingLocation } from '~/hooks/useIsMatchingLocation'; import { isDefined } from 'twenty-shared/utils'; +import { useIsMatchingLocation } from '~/hooks/useIsMatchingLocation'; const getViewId = ( viewIdFromQueryParams: string | null, @@ -32,12 +33,7 @@ export const MainContextStoreProvider = () => { const { isMatchingLocation } = useIsMatchingLocation(); const isRecordIndexPage = isMatchingLocation(AppPath.RecordIndexPage); const isRecordShowPage = isMatchingLocation(AppPath.RecordShowPage); - - const pageName = isRecordIndexPage - ? 'record-index' - : isRecordShowPage - ? 'record-show' - : undefined; + const isSettingsPage = useIsSettingsPage(); const objectNamePlural = useParams().objectNamePlural ?? ''; const objectNameSingular = useParams().objectNameSingular ?? ''; @@ -67,7 +63,10 @@ export const MainContextStoreProvider = () => { const viewId = getViewId(viewIdQueryParam, indexViewId, lastVisitedViewId); - if (!isDefined(pageName) || !isDefined(objectMetadataItem)) { + const shouldComputeContextStore = + isRecordIndexPage || isRecordShowPage || isSettingsPage; + + if (!shouldComputeContextStore) { return null; } @@ -75,7 +74,9 @@ export const MainContextStoreProvider = () => { ); }; diff --git a/packages/twenty-front/src/modules/context-store/components/MainContextStoreProviderEffect.tsx b/packages/twenty-front/src/modules/context-store/components/MainContextStoreProviderEffect.tsx index 34966932d..e73ccadb5 100644 --- a/packages/twenty-front/src/modules/context-store/components/MainContextStoreProviderEffect.tsx +++ b/packages/twenty-front/src/modules/context-store/components/MainContextStoreProviderEffect.tsx @@ -8,19 +8,26 @@ import { useSetLastVisitedViewForObjectMetadataNamePlural } from '@/navigation/h import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem'; import { prefetchViewFromViewIdFamilySelector } from '@/prefetch/states/selector/prefetchViewFromViewIdFamilySelector'; import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2'; +import { View } from '@/views/types/View'; import { ViewType } from '@/views/types/ViewType'; import { useEffect } from 'react'; import { useRecoilValue } from 'recoil'; +type MainContextStoreProviderEffectProps = { + viewId?: string; + objectMetadataItem?: ObjectMetadataItem; + isRecordIndexPage: boolean; + isRecordShowPage: boolean; + isSettingsPage: boolean; +}; + export const MainContextStoreProviderEffect = ({ viewId, objectMetadataItem, - pageName, -}: { - viewId?: string; - objectMetadataItem: ObjectMetadataItem; - pageName: string; -}) => { + isRecordIndexPage, + isRecordShowPage, + isSettingsPage, +}: MainContextStoreProviderEffectProps) => { const { setLastVisitedViewForObjectMetadataNamePlural } = useSetLastVisitedViewForObjectMetadataNamePlural(); @@ -54,6 +61,11 @@ export const MainContextStoreProviderEffect = ({ ); useEffect(() => { + if (!objectMetadataItem) { + setContextStoreCurrentObjectMetadataItemId(undefined); + return; + } + if (contextStoreCurrentObjectMetadataItemId !== objectMetadataItem.id) { setContextStoreCurrentObjectMetadataItemId(objectMetadataItem.id); } @@ -66,39 +78,78 @@ export const MainContextStoreProviderEffect = ({ setLastVisitedObjectMetadataId({ objectMetadataItemId: objectMetadataItem.id, }); - - if (contextStoreCurrentViewId !== viewId) { - setContextStoreCurrentViewId(viewId); - } }, [ contextStoreCurrentObjectMetadataItemId, - contextStoreCurrentViewId, objectMetadataItem, - objectMetadataItem.namePlural, setContextStoreCurrentObjectMetadataItemId, - setContextStoreCurrentViewId, setLastVisitedObjectMetadataId, setLastVisitedViewForObjectMetadataNamePlural, viewId, ]); useEffect(() => { - const viewType = - pageName === 'record-show' - ? ContextStoreViewType.ShowPage - : view && view.type === ViewType.Kanban - ? ContextStoreViewType.Kanban - : ContextStoreViewType.Table; + if (isSettingsPage) { + setContextStoreCurrentViewId(undefined); + return; + } + + if (contextStoreCurrentViewId !== viewId) { + setContextStoreCurrentViewId(viewId); + } + }, [ + contextStoreCurrentViewId, + isSettingsPage, + setContextStoreCurrentViewId, + viewId, + ]); + + useEffect(() => { + const viewType = getViewType({ + isSettingsPage, + isRecordShowPage, + isRecordIndexPage, + view, + }); if (contextStoreCurrentViewType !== viewType) { setContextStoreCurrentViewType(viewType); } }, [ contextStoreCurrentViewType, - pageName, setContextStoreCurrentViewType, view, + isSettingsPage, + isRecordShowPage, + isRecordIndexPage, ]); return null; }; + +const getViewType = ({ + isSettingsPage, + isRecordShowPage, + isRecordIndexPage, + view, +}: { + isSettingsPage: boolean; + isRecordShowPage: boolean; + isRecordIndexPage: boolean; + view?: View; +}) => { + if (isSettingsPage) { + return null; + } + + if (isRecordIndexPage) { + return view?.type === ViewType.Kanban + ? ContextStoreViewType.Kanban + : ContextStoreViewType.Table; + } + + if (isRecordShowPage) { + return ContextStoreViewType.ShowPage; + } + + return null; +};