admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Refacto views (#10272)

Browse Source 
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>
This commit is contained in:
Charles Bochet
2025-02-18 13:51:07 +01:00
committed by GitHub
parent 103dff4bd0
commit fb42046033
125 changed files with 1607 additions and 1582 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
packages/twenty-front/src/modules/context-store/components/MainContextStoreProvider.tsx
View File

@ -1,20 +1,16 @@
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 { prefetchIndexViewIdFromObjectMetadataItemFamilySelector } from '@/prefetch/states/selector/prefetchIndexViewIdFromObjectMetadataItemFamilySelector';
import { AppPath } from '@/types/AppPath';
import { View } from '@/views/types/View';
import { isNonEmptyString } from '@sniptt/guards';
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,
indexViewId?: string,
lastVisitedViewId?: string,
) => {
if (isDefined(viewIdFromQueryParams)) {
@ -25,8 +21,8 @@ const getViewId = (
return lastVisitedViewId;
}
if (isDefined(indexView)) {
return indexView.id;
if (isDefined(indexViewId)) {
return indexViewId;
}
return undefined;
@ -44,17 +40,17 @@ export const MainContextStoreProvider = () => {
: undefined;
const objectNamePlural = useParams().objectNamePlural ?? '';
const objectNameSingular = useParams().objectNameSingular ?? '';
const [searchParams] = useSearchParams();
const viewIdQueryParam = searchParams.get('viewId');
// Todo: this is triggering a lot of re-renders as we update the viewFields, we should introduce a state here
const { records: views } = usePrefetchedData<View>(PrefetchKey.AllViews);
const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
const objectMetadataItem = objectMetadataItems.find(
(objectMetadataItem) => objectMetadataItem.namePlural === objectNamePlural,
(objectMetadataItem) =>
objectMetadataItem.namePlural === objectNamePlural ||
objectMetadataItem.nameSingular === objectNameSingular,
);
const { getLastVisitedViewIdFromObjectNamePlural } = useLastVisitedView();
@ -63,30 +59,24 @@ export const MainContextStoreProvider = () => {
objectMetadataItem?.namePlural ?? '',
);
const viewsOnCurrentObject = views.filter(
(view) => view.objectMetadataId === objectMetadataItem?.id,
const indexViewId = useRecoilValue(
prefetchIndexViewIdFromObjectMetadataItemFamilySelector({
objectMetadataItemId: objectMetadataItem?.id,
}),
);
const indexView = viewsOnCurrentObject.find((view) => view.key === 'INDEX');
const viewId = getViewId(viewIdQueryParam, indexView, lastVisitedViewId);
const viewId = getViewId(viewIdQueryParam, indexViewId, lastVisitedViewId);
const mainContextStoreComponentInstanceId = `${pageName}-${objectMetadataItem?.namePlural}-${viewId}`;
if (
!isDefined(pageName) ||
!isDefined(objectMetadataItem) ||
!isNonEmptyString(viewId)
) {
if (!isDefined(pageName) || !isDefined(objectMetadataItem)) {
return null;
}
return (
<MainContextStoreProviderEffect
mainContextStoreComponentInstanceIdToSet={
mainContextStoreComponentInstanceId
}
mainContextStoreComponentInstanceIdToSet={'main-context-store'}
viewId={viewId}
objectMetadataItem={objectMetadataItem}
pageName={pageName}
/>
);
};