fb42046033
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>
83 lines
2.6 KiB
TypeScript
83 lines
2.6 KiB
TypeScript
import { MainContextStoreProviderEffect } from '@/context-store/components/MainContextStoreProviderEffect';
|
|
import { useLastVisitedView } from '@/navigation/hooks/useLastVisitedView';
|
|
import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
|
|
import { prefetchIndexViewIdFromObjectMetadataItemFamilySelector } from '@/prefetch/states/selector/prefetchIndexViewIdFromObjectMetadataItemFamilySelector';
|
|
import { AppPath } from '@/types/AppPath';
|
|
import { useParams, useSearchParams } from 'react-router-dom';
|
|
import { useRecoilValue } from 'recoil';
|
|
import { isDefined } from 'twenty-shared';
|
|
import { useIsMatchingLocation } from '~/hooks/useIsMatchingLocation';
|
|
|
|
const getViewId = (
|
|
viewIdFromQueryParams: string | null,
|
|
indexViewId?: string,
|
|
lastVisitedViewId?: string,
|
|
) => {
|
|
if (isDefined(viewIdFromQueryParams)) {
|
|
return viewIdFromQueryParams;
|
|
}
|
|
|
|
if (isDefined(lastVisitedViewId)) {
|
|
return lastVisitedViewId;
|
|
}
|
|
|
|
if (isDefined(indexViewId)) {
|
|
return indexViewId;
|
|
}
|
|
|
|
return undefined;
|
|
};
|
|
|
|
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 objectNameSingular = useParams().objectNameSingular ?? '';
|
|
|
|
const [searchParams] = useSearchParams();
|
|
const viewIdQueryParam = searchParams.get('viewId');
|
|
|
|
const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
|
|
|
|
const objectMetadataItem = objectMetadataItems.find(
|
|
(objectMetadataItem) =>
|
|
objectMetadataItem.namePlural === objectNamePlural ||
|
|
objectMetadataItem.nameSingular === objectNameSingular,
|
|
);
|
|
|
|
const { getLastVisitedViewIdFromObjectNamePlural } = useLastVisitedView();
|
|
|
|
const lastVisitedViewId = getLastVisitedViewIdFromObjectNamePlural(
|
|
objectMetadataItem?.namePlural ?? '',
|
|
);
|
|
|
|
const indexViewId = useRecoilValue(
|
|
prefetchIndexViewIdFromObjectMetadataItemFamilySelector({
|
|
objectMetadataItemId: objectMetadataItem?.id,
|
|
}),
|
|
);
|
|
|
|
const viewId = getViewId(viewIdQueryParam, indexViewId, lastVisitedViewId);
|
|
|
|
if (!isDefined(pageName) || !isDefined(objectMetadataItem)) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<MainContextStoreProviderEffect
|
|
mainContextStoreComponentInstanceIdToSet={'main-context-store'}
|
|
viewId={viewId}
|
|
objectMetadataItem={objectMetadataItem}
|
|
pageName={pageName}
|
|
/>
|
|
);
|
|
};
|