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>
110 lines
4.3 KiB
TypeScript
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 <></>;
|
|
};
|