diff --git a/packages/twenty-front/src/modules/object-record/components/RecordShowPage.tsx b/packages/twenty-front/src/modules/object-record/components/RecordShowPage.tsx index b04e78cbb..95765cf59 100644 --- a/packages/twenty-front/src/modules/object-record/components/RecordShowPage.tsx +++ b/packages/twenty-front/src/modules/object-record/components/RecordShowPage.tsx @@ -55,7 +55,7 @@ export const RecordShowPage = () => { entityFieldsFamilyState(objectRecordId ?? ''), ); - const { record } = useFindOneRecord({ + const { record, loading } = useFindOneRecord({ objectRecordId, objectNameSingular, onCompleted: (data) => { @@ -129,12 +129,10 @@ export const RecordShowPage = () => { } }; - if (!record) return <>; - const pageName = objectNameSingular === 'person' - ? record.name.firstName + ' ' + record.name.lastName - : record.name; + ? record?.name.firstName + ' ' + record?.name.lastName + : record?.name; const recordIdentifiers = identifiersMapper?.( record, @@ -161,9 +159,12 @@ export const RecordShowPage = () => { if (!updateOneRecord) { return; } + if (!record) { + return; + } await updateOneRecord({ - idToUpdate: record?.id, + idToUpdate: record.id, input: { avatarUrl, }, @@ -178,7 +179,7 @@ export const RecordShowPage = () => { hasBackButton Icon={IconBuildingSkyscraper} > - {objectMetadataType !== 'Custom' && ( + {record && objectMetadataType !== 'Custom' && ( <> { - <>} - avatarType={recordIdentifiers?.avatarType ?? 'rounded'} - onUploadPicture={ - objectNameSingular === 'person' ? onUploadPicture : undefined - } - /> - - {objectMetadataItem && - [...objectMetadataItem.fields] - .sort((a, b) => - a.name === 'name' ? -1 : a.name.localeCompare(b.name), - ) - .filter(isFieldMetadataItemAvailable) - .map((metadataField, index) => { - return ( - - - - ); - })} - - {objectNameSingular === 'company' ? ( + {!loading && record ? ( <> - + <>} + avatarType={recordIdentifiers?.avatarType ?? 'rounded'} + onUploadPicture={ + objectNameSingular === 'person' + ? onUploadPicture + : undefined + } + /> + + {objectMetadataItem && + [...objectMetadataItem.fields] + .sort((a, b) => + a.name === 'name' ? -1 : a.name.localeCompare(b.name), + ) + .filter(isFieldMetadataItemAvailable) + .map((metadataField, index) => { + return ( + + + + ); + })} + + {objectNameSingular === 'company' ? ( + <> + + + ) : ( + <> + )} ) : ( <> @@ -250,7 +259,7 @@ export const RecordShowPage = () => { { diff --git a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageLeftContainer.tsx b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageLeftContainer.tsx index 8fe92a5bd..e3ef38f72 100644 --- a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageLeftContainer.tsx +++ b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageLeftContainer.tsx @@ -38,7 +38,7 @@ const StyledIntermediateContainer = styled.div` `; export type ShowPageLeftContainerProps = { - children: ReactElement[]; + children: ReactElement; }; export const ShowPageLeftContainer = ({ diff --git a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx index e449ce60c..5e5336837 100644 --- a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx +++ b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx @@ -40,7 +40,7 @@ const StyledTabListContainer = styled.div` `; type ShowPageRightContainerProps = { - entity: ActivityTargetableEntity; + entity?: ActivityTargetableEntity; timeline?: boolean; tasks?: boolean; notes?: boolean; @@ -55,7 +55,12 @@ export const ShowPageRightContainer = ({ emails, }: ShowPageRightContainerProps) => { const isMessagingEnabled = useIsFeatureEnabled('IS_MESSAGING_ENABLED'); + const [activeTabId] = useRecoilScopedState( + activeTabIdScopedState, + ShowPageRecoilScopeContext, + ); + if (!entity) return <>; const TASK_TABS = [ { id: 'timeline', @@ -94,11 +99,6 @@ export const ShowPageRightContainer = ({ }, ]; - const [activeTabId] = useRecoilScopedState( - activeTabIdScopedState, - ShowPageRecoilScopeContext, - ); - return (