Files
twenty_crm/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerContentEffect.tsx
T
fb42046033 Refacto views (#10272)
In this huge (sorry!) PR:
- introducing objectMetadataItem in contextStore instead of
objectMetadataId which is more convenient
- splitting some big hooks into smaller parts to avoid re-renders
- removing Effects to avoid re-renders (especially onViewChange)
- making the view prefetch separate from favorites to avoid re-renders
- making the view prefetch load a state and add selectors on top of it
to avoir re-renders

As a result, the performance is WAY better (I suspect the favorite
implementation to trigger a lot of re-renders unfortunately).
However, we are still facing a random app freeze on view creation. I
could not investigate the root cause. As this seems to be already there
in the precedent release, we can move forward but this seems a urgent
follow up to me ==> EDIT: I've found the root cause after a few ours of
deep dive... an infinite loop in RecordTableNoRecordGroupBodyEffect...

prastoin edit: close https://github.com/twentyhq/twenty/issues/10253

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
Co-authored-by: prastoin <paul@twenty.com>
2025-02-18 13:51:07 +01:00

110 lines
4.3 KiB
TypeScript

import { useEffect } from 'react';
import { useContextStoreObjectMetadataItemOrThrow } from '@/context-store/hooks/useContextStoreObjectMetadataItemOrThrow';
import { prefetchViewsFromObjectMetadataItemFamilySelector } from '@/prefetch/states/selector/prefetchViewsFromObjectMetadataItemFamilySelector';
import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
import { ViewType } from '@/views/types/ViewType';
import { useGetAvailableFieldsForKanban } from '@/views/view-picker/hooks/useGetAvailableFieldsForKanban';
import { useViewPickerMode } from '@/views/view-picker/hooks/useViewPickerMode';
import { viewPickerInputNameComponentState } from '@/views/view-picker/states/viewPickerInputNameComponentState';
import { viewPickerIsDirtyComponentState } from '@/views/view-picker/states/viewPickerIsDirtyComponentState';
import { viewPickerIsPersistingComponentState } from '@/views/view-picker/states/viewPickerIsPersistingComponentState';
import { viewPickerKanbanFieldMetadataIdComponentState } from '@/views/view-picker/states/viewPickerKanbanFieldMetadataIdComponentState';
import { viewPickerReferenceViewIdComponentState } from '@/views/view-picker/states/viewPickerReferenceViewIdComponentState';
import { viewPickerSelectedIconComponentState } from '@/views/view-picker/states/viewPickerSelectedIconComponentState';
import { viewPickerTypeComponentState } from '@/views/view-picker/states/viewPickerTypeComponentState';
import { useRecoilValue } from 'recoil';
import { isDefined } from 'twenty-shared';
export const ViewPickerContentEffect = () => {
const setViewPickerSelectedIcon = useSetRecoilComponentStateV2(
viewPickerSelectedIconComponentState,
);
const setViewPickerInputName = useSetRecoilComponentStateV2(
viewPickerInputNameComponentState,
);
const { viewPickerMode } = useViewPickerMode();
const [viewPickerKanbanFieldMetadataId, setViewPickerKanbanFieldMetadataId] =
useRecoilComponentStateV2(viewPickerKanbanFieldMetadataIdComponentState);
const [viewPickerType, setViewPickerType] = useRecoilComponentStateV2(
viewPickerTypeComponentState,
);
const viewPickerReferenceViewId = useRecoilComponentValueV2(
viewPickerReferenceViewIdComponentState,
);
const viewPickerIsDirty = useRecoilComponentValueV2(
viewPickerIsDirtyComponentState,
);
const viewPickerIsPersisting = useRecoilComponentValueV2(
viewPickerIsPersistingComponentState,
);
const { objectMetadataItem } = useContextStoreObjectMetadataItemOrThrow();
const viewsOnCurrentObject = useRecoilValue(
prefetchViewsFromObjectMetadataItemFamilySelector({
objectMetadataItemId: objectMetadataItem.id,
}),
);
const referenceView = viewsOnCurrentObject.find(
(view) => view.id === viewPickerReferenceViewId,
);
const { availableFieldsForKanban } = useGetAvailableFieldsForKanban();
useEffect(() => {
if (
isDefined(referenceView) &&
!viewPickerIsPersisting &&
!viewPickerIsDirty
) {
const defaultIcon =
viewPickerType === ViewType.Kanban ? 'IconLayoutKanban' : 'IconTable';
if (viewPickerMode === 'create-empty') {
setViewPickerSelectedIcon(defaultIcon);
} else {
setViewPickerSelectedIcon(referenceView.icon);
}
setViewPickerInputName(referenceView.name);
setViewPickerType(referenceView.type);
}
}, [
referenceView,
setViewPickerInputName,
setViewPickerSelectedIcon,
setViewPickerType,
viewPickerIsPersisting,
viewPickerIsDirty,
viewPickerMode,
viewPickerType,
]);
useEffect(() => {
if (
isDefined(referenceView) &&
availableFieldsForKanban.length > 0 &&
viewPickerKanbanFieldMetadataId === ''
) {
setViewPickerKanbanFieldMetadataId(
referenceView.kanbanFieldMetadataId !== ''
? referenceView.kanbanFieldMetadataId
: availableFieldsForKanban[0].id,
);
}
}, [
referenceView,
availableFieldsForKanban,
viewPickerKanbanFieldMetadataId,
setViewPickerKanbanFieldMetadataId,
]);
return <></>;
};