diff --git a/packages/twenty-front/src/modules/app/components/AppRouterProviders.tsx b/packages/twenty-front/src/modules/app/components/AppRouterProviders.tsx index 2b2cc8f16..37abf41e6 100644 --- a/packages/twenty-front/src/modules/app/components/AppRouterProviders.tsx +++ b/packages/twenty-front/src/modules/app/components/AppRouterProviders.tsx @@ -6,7 +6,7 @@ import { ChromeExtensionSidecarEffect } from '@/chrome-extension-sidecar/compone import { ChromeExtensionSidecarProvider } from '@/chrome-extension-sidecar/components/ChromeExtensionSidecarProvider'; import { ClientConfigProvider } from '@/client-config/components/ClientConfigProvider'; import { ClientConfigProviderEffect } from '@/client-config/components/ClientConfigProviderEffect'; -import { ContextStoreViewIdEffect } from '@/context-store/components/ContextStoreViewIdEffect'; +import { MainContextStoreProvider } from '@/context-store/components/MainContextStoreProvider'; import { PromiseRejectionEffect } from '@/error-handler/components/PromiseRejectionEffect'; import { ApolloMetadataClientProvider } from '@/object-metadata/components/ApolloMetadataClientProvider'; import { ObjectMetadataItemsGater } from '@/object-metadata/components/ObjectMetadataItemsGater'; @@ -22,15 +22,13 @@ import { PageTitle } from '@/ui/utilities/page-title/components/PageTitle'; import { UserProvider } from '@/users/components/UserProvider'; import { UserProviderEffect } from '@/users/components/UserProviderEffect'; import { WorkspaceProviderEffect } from '@/workspace/components/WorkspaceProviderEffect'; -import { isNonEmptyString } from '@sniptt/guards'; import { StrictMode } from 'react'; -import { Outlet, useLocation, useParams } from 'react-router-dom'; +import { Outlet, useLocation } from 'react-router-dom'; import { getPageTitleFromPath } from '~/utils/title-utils'; export const AppRouterProviders = () => { const { pathname } = useLocation(); const pageTitle = getPageTitleFromPath(pathname); - const objectNamePlural = useParams().objectNamePlural; return ( @@ -64,11 +62,7 @@ export const AppRouterProviders = () => { - {isNonEmptyString(objectNamePlural) && ( - - )} + diff --git a/packages/twenty-front/src/modules/context-store/components/ContextStoreViewIdEffect.tsx b/packages/twenty-front/src/modules/context-store/components/ContextStoreViewIdEffect.tsx deleted file mode 100644 index f165d9357..000000000 --- a/packages/twenty-front/src/modules/context-store/components/ContextStoreViewIdEffect.tsx +++ /dev/null @@ -1,104 +0,0 @@ -import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState'; -import { useLastVisitedObjectMetadataItem } from '@/navigation/hooks/useLastVisitedObjectMetadataItem'; -import { useLastVisitedView } from '@/navigation/hooks/useLastVisitedView'; -import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems'; -import { usePrefetchedData } from '@/prefetch/hooks/usePrefetchedData'; -import { PrefetchKey } from '@/prefetch/types/PrefetchKey'; -import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2'; -import { useViewFromQueryParams } from '@/views/hooks/internal/useViewFromQueryParams'; -import { View } from '@/views/types/View'; -import { isUndefined } from '@sniptt/guards'; -import { useEffect } from 'react'; -import { isDefined } from 'twenty-shared'; -import { isDeeplyEqual } from '~/utils/isDeeplyEqual'; - -export const ContextStoreViewIdEffect = ({ - objectNamePlural, -}: { - objectNamePlural: string; -}) => { - const { viewIdQueryParam } = useViewFromQueryParams(); - - const { records: viewsOnCurrentObject } = usePrefetchedData( - PrefetchKey.AllViews, - ); - - const { findObjectMetadataItemByNamePlural } = - useFilteredObjectMetadataItems(); - const objectMetadataItemId = - findObjectMetadataItemByNamePlural(objectNamePlural); - const { getLastVisitedViewIdFromObjectNamePlural, setLastVisitedView } = - useLastVisitedView(); - const { lastVisitedObjectMetadataItemId, setLastVisitedObjectMetadataItem } = - useLastVisitedObjectMetadataItem(); - - const lastVisitedViewId = - getLastVisitedViewIdFromObjectNamePlural(objectNamePlural); - const isLastVisitedObjectMetadataItemDifferent = !isDeeplyEqual( - objectMetadataItemId?.id, - lastVisitedObjectMetadataItemId, - ); - const setContextStoreCurrentViewId = useSetRecoilComponentStateV2( - contextStoreCurrentViewIdComponentState, - objectNamePlural, - ); - - useEffect(() => { - const indexView = viewsOnCurrentObject.find((view) => view.key === 'INDEX'); - - if (isUndefined(viewIdQueryParam) && isDefined(lastVisitedViewId)) { - if (isLastVisitedObjectMetadataItemDifferent) { - setLastVisitedObjectMetadataItem(objectNamePlural); - setLastVisitedView({ - objectNamePlural, - viewId: lastVisitedViewId, - }); - } - setContextStoreCurrentViewId(lastVisitedViewId); - return; - } - - if (isDefined(viewIdQueryParam)) { - if (isLastVisitedObjectMetadataItemDifferent) { - setLastVisitedObjectMetadataItem(objectNamePlural); - } - if (!isDeeplyEqual(viewIdQueryParam, lastVisitedViewId)) { - setLastVisitedView({ - objectNamePlural, - viewId: viewIdQueryParam, - }); - } - setContextStoreCurrentViewId(viewIdQueryParam); - return; - } - - if (isDefined(indexView)) { - if (isLastVisitedObjectMetadataItemDifferent) { - setLastVisitedObjectMetadataItem(objectNamePlural); - } - if (!isDeeplyEqual(indexView.id, lastVisitedViewId)) { - setLastVisitedView({ - objectNamePlural, - viewId: indexView.id, - }); - } - setContextStoreCurrentViewId(indexView.id); - return; - } - - return () => { - setContextStoreCurrentViewId(null); - }; - }, [ - isLastVisitedObjectMetadataItemDifferent, - lastVisitedViewId, - objectNamePlural, - setContextStoreCurrentViewId, - setLastVisitedObjectMetadataItem, - setLastVisitedView, - viewIdQueryParam, - viewsOnCurrentObject, - ]); - - return <>; -}; diff --git a/packages/twenty-front/src/modules/context-store/components/MainContextStoreComponentInstanceIdSetterEffect.tsx b/packages/twenty-front/src/modules/context-store/components/MainContextStoreComponentInstanceIdSetterEffect.tsx deleted file mode 100644 index f1cfc3e32..000000000 --- a/packages/twenty-front/src/modules/context-store/components/MainContextStoreComponentInstanceIdSetterEffect.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import { CONTEXT_STORE_INSTANCE_ID_DEFAULT_VALUE } from '@/context-store/constants/ContextStoreInstanceIdDefaultValue'; -import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext'; -import { mainContextStoreComponentInstanceIdState } from '@/context-store/states/mainContextStoreComponentInstanceId'; -import { useContext, useEffect } from 'react'; -import { useSetRecoilState } from 'recoil'; - -export const MainContextStoreComponentInstanceIdSetterEffect = () => { - const setMainContextStoreComponentInstanceId = useSetRecoilState( - mainContextStoreComponentInstanceIdState, - ); - - const context = useContext(ContextStoreComponentInstanceContext); - - useEffect(() => { - setMainContextStoreComponentInstanceId( - context?.instanceId ?? CONTEXT_STORE_INSTANCE_ID_DEFAULT_VALUE, - ); - - return () => { - setMainContextStoreComponentInstanceId( - CONTEXT_STORE_INSTANCE_ID_DEFAULT_VALUE, - ); - }; - }, [context, setMainContextStoreComponentInstanceId]); - - return null; -}; diff --git a/packages/twenty-front/src/modules/context-store/components/MainContextStoreProvider.tsx b/packages/twenty-front/src/modules/context-store/components/MainContextStoreProvider.tsx new file mode 100644 index 000000000..9f78116aa --- /dev/null +++ b/packages/twenty-front/src/modules/context-store/components/MainContextStoreProvider.tsx @@ -0,0 +1,90 @@ +import { MainContextStoreProviderEffect } from '@/context-store/components/MainContextStoreProviderEffect'; +import { useLastVisitedView } from '@/navigation/hooks/useLastVisitedView'; +import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState'; +import { usePrefetchedData } from '@/prefetch/hooks/usePrefetchedData'; +import { PrefetchKey } from '@/prefetch/types/PrefetchKey'; +import { AppPath } from '@/types/AppPath'; +import { View } from '@/views/types/View'; +import { useParams, useSearchParams } from 'react-router-dom'; +import { useRecoilValue } from 'recoil'; +import { isDefined } from 'twenty-shared'; +import { undefined } from 'zod'; +import { useIsMatchingLocation } from '~/hooks/useIsMatchingLocation'; + +const getViewId = ( + viewIdFromQueryParams: string | null, + indexView?: View, + lastVisitedViewId?: string, +) => { + if (isDefined(viewIdFromQueryParams)) { + return viewIdFromQueryParams; + } + + if (isDefined(lastVisitedViewId)) { + return lastVisitedViewId; + } + + if (isDefined(indexView)) { + return indexView.id; + } + + throw new Error('No view id found'); +}; + +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 objectNamePlural = useParams().objectNamePlural ?? ''; + + const [searchParams] = useSearchParams(); + const viewIdQueryParam = searchParams.get('viewId'); + + const { records: views } = usePrefetchedData(PrefetchKey.AllViews); + + const objectMetadataItems = useRecoilValue(objectMetadataItemsState); + + const objectMetadataItem = objectMetadataItems.find( + (objectMetadataItem) => objectMetadataItem.namePlural === objectNamePlural, + ); + + const { getLastVisitedViewIdFromObjectNamePlural } = useLastVisitedView(); + + const lastVisitedViewId = getLastVisitedViewIdFromObjectNamePlural( + objectMetadataItem?.namePlural ?? '', + ); + + const viewsOnCurrentObject = views.filter( + (view) => view.objectMetadataId === objectMetadataItem?.id, + ); + const indexView = viewsOnCurrentObject.find((view) => view.key === 'INDEX'); + + const viewId = getViewId(viewIdQueryParam, indexView, lastVisitedViewId); + + const mainContextStoreComponentInstanceId = `${pageName}-${objectMetadataItem?.namePlural}-${viewId}`; + + if ( + !isDefined(pageName) || + !isDefined(objectMetadataItem) || + !isDefined(viewId) + ) { + return null; + } + + return ( + + ); +}; diff --git a/packages/twenty-front/src/modules/context-store/components/MainContextStoreProviderEffect.tsx b/packages/twenty-front/src/modules/context-store/components/MainContextStoreProviderEffect.tsx new file mode 100644 index 000000000..a979f5637 --- /dev/null +++ b/packages/twenty-front/src/modules/context-store/components/MainContextStoreProviderEffect.tsx @@ -0,0 +1,96 @@ +import { contextStoreCurrentObjectMetadataIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataIdComponentState'; +import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState'; +import { mainContextStoreComponentInstanceIdState } from '@/context-store/states/mainContextStoreComponentInstanceId'; +import { useLastVisitedObjectMetadataItem } from '@/navigation/hooks/useLastVisitedObjectMetadataItem'; +import { useLastVisitedView } from '@/navigation/hooks/useLastVisitedView'; +import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem'; +import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2'; +import { useEffect } from 'react'; +import { useRecoilState } from 'recoil'; + +export const MainContextStoreProviderEffect = ({ + mainContextStoreComponentInstanceIdToSet, + viewId, + objectMetadataItem, +}: { + mainContextStoreComponentInstanceIdToSet: string; + viewId: string; + objectMetadataItem: ObjectMetadataItem; +}) => { + const [ + mainContextStoreComponentInstanceId, + setMainContextStoreComponentInstanceId, + ] = useRecoilState(mainContextStoreComponentInstanceIdState); + + const { getLastVisitedViewIdFromObjectNamePlural, setLastVisitedView } = + useLastVisitedView(); + + const { lastVisitedObjectMetadataItemId, setLastVisitedObjectMetadataItem } = + useLastVisitedObjectMetadataItem(); + + const lastVisitedViewId = getLastVisitedViewIdFromObjectNamePlural( + objectMetadataItem.namePlural, + ); + + const [contextStoreCurrentViewId, setContextStoreCurrentViewId] = + useRecoilComponentStateV2( + contextStoreCurrentViewIdComponentState, + mainContextStoreComponentInstanceId, + ); + + const [ + contextStoreCurrentObjectMetadataId, + setContextStoreCurrentObjectMetadataId, + ] = useRecoilComponentStateV2( + contextStoreCurrentObjectMetadataIdComponentState, + mainContextStoreComponentInstanceId, + ); + + useEffect(() => { + if (contextStoreCurrentObjectMetadataId !== objectMetadataItem.id) { + setContextStoreCurrentObjectMetadataId(objectMetadataItem.id); + } + + if ( + mainContextStoreComponentInstanceIdToSet !== + mainContextStoreComponentInstanceId + ) { + setMainContextStoreComponentInstanceId( + mainContextStoreComponentInstanceIdToSet, + ); + } + + if (viewId !== lastVisitedViewId) { + setLastVisitedView({ + objectNamePlural: objectMetadataItem.namePlural, + viewId: viewId, + }); + } + + if (objectMetadataItem.id !== lastVisitedObjectMetadataItemId) { + setLastVisitedObjectMetadataItem(objectMetadataItem.namePlural); + } + + if (contextStoreCurrentViewId !== viewId) { + console.log('contextStoreCurrentViewId', contextStoreCurrentViewId); + setContextStoreCurrentViewId(viewId); + } + }, [ + contextStoreCurrentObjectMetadataId, + contextStoreCurrentViewId, + lastVisitedObjectMetadataItemId, + lastVisitedViewId, + mainContextStoreComponentInstanceId, + mainContextStoreComponentInstanceIdToSet, + objectMetadataItem, + objectMetadataItem.namePlural, + setContextStoreCurrentObjectMetadataId, + setContextStoreCurrentViewId, + setLastVisitedObjectMetadataItem, + setLastVisitedView, + setMainContextStoreComponentInstanceId, + viewId, + ]); + + return null; +}; diff --git a/packages/twenty-front/src/modules/navigation/hooks/useLastVisitedView.ts b/packages/twenty-front/src/modules/navigation/hooks/useLastVisitedView.ts index d0abf01e1..ea6d84a31 100644 --- a/packages/twenty-front/src/modules/navigation/hooks/useLastVisitedView.ts +++ b/packages/twenty-front/src/modules/navigation/hooks/useLastVisitedView.ts @@ -1,5 +1,4 @@ import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState'; -import { lastVisitedObjectMetadataItemIdStateSelector } from '@/navigation/states/selectors/lastVisitedObjectMetadataItemIdStateSelector'; import { lastVisitedViewPerObjectMetadataItemStateSelector } from '@/navigation/states/selectors/lastVisitedViewPerObjectMetadataItemStateSelector'; import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems'; import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState'; @@ -10,20 +9,11 @@ export const useLastVisitedView = () => { const currentWorkspace = useRecoilValue(currentWorkspaceState); const scopeId = currentWorkspace?.id ?? ''; - const lastVisitedObjectMetadataItemIdState = extractComponentState( - lastVisitedObjectMetadataItemIdStateSelector, - scopeId, - ); - const lastVisitedViewPerObjectMetadataItemState = extractComponentState( lastVisitedViewPerObjectMetadataItemStateSelector, scopeId, ); - const lastVisitedObjectMetadataItemId = useRecoilValue( - lastVisitedObjectMetadataItemIdState, - ); - const [ lastVisitedViewPerObjectMetadataItem, setLastVisitedViewPerObjectMetadataItem, @@ -35,6 +25,7 @@ export const useLastVisitedView = () => { const setFallbackForLastVisitedView = (objectMetadataItemId: string) => { /* ...{} allows us to pass value as undefined to remove that particular key even though param type is of type Record */ + setLastVisitedViewPerObjectMetadataItem({ ...{}, [objectMetadataItemId]: undefined, @@ -48,22 +39,12 @@ export const useLastVisitedView = () => { objectNamePlural: string; viewId: string; }) => { - const fallbackObjectMetadataItem = + const objectMetadataItem = findActiveObjectMetadataItemByNamePlural(objectNamePlural); - if (isDefined(fallbackObjectMetadataItem)) { - /* when both are equal meaning there was change in view else - there was a object page change from nav - */ - const fallbackViewId = - lastVisitedObjectMetadataItemId === fallbackObjectMetadataItem.id - ? viewId - : (lastVisitedViewPerObjectMetadataItem?.[ - fallbackObjectMetadataItem.id - ] ?? viewId); - + if (isDefined(objectMetadataItem)) { setLastVisitedViewPerObjectMetadataItem({ - [fallbackObjectMetadataItem.id]: fallbackViewId, + [objectMetadataItem.id]: viewId, }); } }; diff --git a/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx b/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx index 5e611f304..2b837c33f 100644 --- a/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx +++ b/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx @@ -1,7 +1,6 @@ import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular'; import { ShowPageContainer } from '@/ui/layout/page/components/ShowPageContainer'; -import { MainContextStoreComponentInstanceIdSetterEffect } from '@/context-store/components/MainContextStoreComponentInstanceIdSetterEffect'; import { InformationBannerDeletedRecord } from '@/information-banner/components/deleted-record/InformationBannerDeletedRecord'; import { ContextStoreCurrentViewTypeEffect } from '@/context-store/components/ContextStoreCurrentViewTypeEffect'; @@ -56,7 +55,6 @@ export const RecordShowContainer = ({ - {!isInRightDrawer && } {recordFromStore && recordFromStore.deletedAt && ( { - const { getFiltersFromQueryParams, viewIdQueryParam } = - useViewFromQueryParams(); - - // TODO: fix this implicit hack - const { instanceId: objectNamePlural } = useGetCurrentView(); - const [currentViewId, setCurrentViewId] = useRecoilComponentStateV2( currentViewIdComponentState, ); - const { viewsOnCurrentObject } = useGetCurrentView(); - const { findObjectMetadataItemByNamePlural } = - useFilteredObjectMetadataItems(); - const objectMetadataItemId = - findObjectMetadataItemByNamePlural(objectNamePlural); - const { getLastVisitedViewIdFromObjectNamePlural, setLastVisitedView } = - useLastVisitedView(); - const { lastVisitedObjectMetadataItemId, setLastVisitedObjectMetadataItem } = - useLastVisitedObjectMetadataItem(); - - const lastVisitedViewId = - getLastVisitedViewIdFromObjectNamePlural(objectNamePlural); - const isLastVisitedObjectMetadataItemDifferent = !isDeeplyEqual( - objectMetadataItemId?.id, - lastVisitedObjectMetadataItemId, + const mainContextStoreComponentInstanceId = useRecoilValue( + mainContextStoreComponentInstanceIdState, ); - const setContextStoreCurrentViewId = useSetRecoilComponentStateV2( + + const contextStoreCurrentViewId = useRecoilComponentValueV2( contextStoreCurrentViewIdComponentState, + mainContextStoreComponentInstanceId, ); - // // TODO: scope view bar per view id if possible - // const { resetCurrentView } = useResetCurrentView(); - - // useEffect(() => { - // if (isDefined(currentViewId)) { - // resetCurrentView(); - // } - // }, [resetCurrentView, currentViewId]); - useEffect(() => { - const indexView = viewsOnCurrentObject.find((view) => view.key === 'INDEX'); - - if (isUndefined(viewIdQueryParam) && isDefined(lastVisitedViewId)) { - if (isLastVisitedObjectMetadataItemDifferent) { - setLastVisitedObjectMetadataItem(objectNamePlural); - setLastVisitedView({ - objectNamePlural, - viewId: lastVisitedViewId, - }); + if (isDefined(contextStoreCurrentViewId)) { + if (currentViewId !== contextStoreCurrentViewId) { + setCurrentViewId(contextStoreCurrentViewId); } - setCurrentViewId(lastVisitedViewId); - setContextStoreCurrentViewId(lastVisitedViewId); - return; } - - if (isDefined(viewIdQueryParam)) { - if (isLastVisitedObjectMetadataItemDifferent) { - setLastVisitedObjectMetadataItem(objectNamePlural); - } - if (!isDeeplyEqual(viewIdQueryParam, lastVisitedViewId)) { - setLastVisitedView({ - objectNamePlural, - viewId: viewIdQueryParam, - }); - } - setCurrentViewId(viewIdQueryParam); - setContextStoreCurrentViewId(viewIdQueryParam); - return; - } - - if (isDefined(indexView)) { - if (isLastVisitedObjectMetadataItemDifferent) { - setLastVisitedObjectMetadataItem(objectNamePlural); - } - if (!isDeeplyEqual(indexView.id, lastVisitedViewId)) { - setLastVisitedView({ - objectNamePlural, - viewId: indexView.id, - }); - } - setCurrentViewId(indexView.id); - setContextStoreCurrentViewId(indexView.id); - return; - } - - return () => { - setContextStoreCurrentViewId(null); - }; - }, [ - currentViewId, - getFiltersFromQueryParams, - isLastVisitedObjectMetadataItemDifferent, - lastVisitedViewId, - objectMetadataItemId?.id, - objectNamePlural, - setContextStoreCurrentViewId, - setCurrentViewId, - setLastVisitedObjectMetadataItem, - setLastVisitedView, - viewIdQueryParam, - viewsOnCurrentObject, - ]); + }, [contextStoreCurrentViewId, currentViewId, setCurrentViewId]); return <>; }; diff --git a/packages/twenty-front/src/pages/object-record/RecordIndexPage.tsx b/packages/twenty-front/src/pages/object-record/RecordIndexPage.tsx index 57aeb8b56..36b7925ea 100644 --- a/packages/twenty-front/src/pages/object-record/RecordIndexPage.tsx +++ b/packages/twenty-front/src/pages/object-record/RecordIndexPage.tsx @@ -3,9 +3,9 @@ import { useParams } from 'react-router-dom'; import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext'; import { getActionMenuIdFromRecordIndexId } from '@/action-menu/utils/getActionMenuIdFromRecordIndexId'; -import { MainContextStoreComponentInstanceIdSetterEffect } from '@/context-store/components/MainContextStoreComponentInstanceIdSetterEffect'; import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState'; import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext'; +import { mainContextStoreComponentInstanceIdState } from '@/context-store/states/mainContextStoreComponentInstanceId'; import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem'; import { useObjectNameSingularFromPlural } from '@/object-metadata/hooks/useObjectNameSingularFromPlural'; import { lastShowPageRecordIdState } from '@/object-record/record-field/states/lastShowPageRecordId'; @@ -21,8 +21,9 @@ import { PageContainer } from '@/ui/layout/page/components/PageContainer'; import { PageTitle } from '@/ui/utilities/page-title/components/PageTitle'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; import { ViewComponentInstanceContext } from '@/views/states/contexts/ViewComponentInstanceContext'; -import { useRecoilCallback } from 'recoil'; -import { capitalize, isDefined } from 'twenty-shared'; +import { isUndefined } from '@sniptt/guards'; +import { useRecoilCallback, useRecoilValue } from 'recoil'; +import { capitalize } from 'twenty-shared'; const StyledIndexContainer = styled.div` display: flex; @@ -33,9 +34,13 @@ const StyledIndexContainer = styled.div` export const RecordIndexPage = () => { const objectNamePlural = useParams().objectNamePlural ?? ''; + const mainContextStoreComponentInstanceId = useRecoilValue( + mainContextStoreComponentInstanceIdState, + ); + const contextStoreCurrentViewId = useRecoilComponentValueV2( contextStoreCurrentViewIdComponentState, - objectNamePlural, + mainContextStoreComponentInstanceId, ); const recordIndexId = `${objectNamePlural}-${contextStoreCurrentViewId}`; @@ -62,32 +67,33 @@ export const RecordIndexPage = () => { [], ); - if (!isDefined(contextStoreCurrentViewId)) { - return; + if (isUndefined(contextStoreCurrentViewId)) { + return null; } return ( - - - + - { - - - - - - + + + + ); };