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>

packages/twenty-front/src/modules/prefetch/states/prefetchFavoriteFoldersState.ts

@@ -0,0 +1,7 @@
+import { FavoriteFolder } from '@/favorites/types/FavoriteFolder';
+import { createState } from 'twenty-ui';
+
+export const prefetchFavoriteFoldersState = createState<FavoriteFolder[]>({
+  key: 'prefetchFavoriteFoldersState',
+  defaultValue: [],
+});

packages/twenty-front/src/modules/prefetch/states/prefetchFavoritesState.ts

@@ -0,0 +1,7 @@
+import { Favorite } from '@/favorites/types/Favorite';
+import { createState } from 'twenty-ui';
+
+export const prefetchFavoritesState = createState<Favorite[]>({
+  key: 'prefetchFavoritesState',
+  defaultValue: [],
+});

packages/twenty-front/src/modules/prefetch/states/prefetchViewsState.ts

@@ -0,0 +1,7 @@
+import { View } from '@/views/types/View';
+import { createState } from 'twenty-ui';
+
+export const prefetchViewsState = createState<View[]>({
+  key: 'prefetchViewsState',
+  defaultValue: [],
+});

packages/twenty-front/src/modules/prefetch/states/selector/prefetchIndexViewIdFromObjectMetadataItemFamilySelector.ts

@@ -0,0 +1,18 @@
+import { prefetchViewsState } from '@/prefetch/states/prefetchViewsState';
+import { ViewKey } from '@/views/types/ViewKey';
+import { selectorFamily } from 'recoil';
+
+export const prefetchIndexViewIdFromObjectMetadataItemFamilySelector =
+  selectorFamily<string | undefined, { objectMetadataItemId: string }>({
+    key: 'prefetchIndexViewIdFromObjectMetadataItemFamilySelector',
+    get:
+      ({ objectMetadataItemId }) =>
+      ({ get }) => {
+        const views = get(prefetchViewsState);
+        return views?.find(
+          (view) =>
+            view.objectMetadataId === objectMetadataItemId &&
+            view.key === ViewKey.Index,
+        )?.id;
+      },
+  });

packages/twenty-front/src/modules/prefetch/states/selector/prefetchViewFromViewIdFamilySelector.ts

@@ -0,0 +1,16 @@
+import { prefetchViewsState } from '@/prefetch/states/prefetchViewsState';
+import { View } from '@/views/types/View';
+import { selectorFamily } from 'recoil';
+
+export const prefetchViewFromViewIdFamilySelector = selectorFamily<
+  View | undefined,
+  { viewId: string }
+>({
+  key: 'prefetchViewFromViewIdFamilySelector',
+  get:
+    ({ viewId }) =>
+    ({ get }) => {
+      const views = get(prefetchViewsState);
+      return views?.find((view) => view.id === viewId);
+    },
+});

packages/twenty-front/src/modules/prefetch/states/selector/prefetchViewIdsFromObjectMetadataItemFamilySelector.ts

@@ -0,0 +1,15 @@
+import { prefetchViewsState } from '@/prefetch/states/prefetchViewsState';
+import { selectorFamily } from 'recoil';
+
+export const prefetchViewIdsFromObjectMetadataItemFamilySelector =
+  selectorFamily<string[], { objectMetadataItemId: string }>({
+    key: 'prefetchViewIdsFromObjectMetadataItemFamilySelector',
+    get:
+      ({ objectMetadataItemId }) =>
+      ({ get }) => {
+        const views = get(prefetchViewsState);
+        return views
+          .filter((view) => view.objectMetadataId === objectMetadataItemId)
+          .map((view) => view.id);
+      },
+  });

packages/twenty-front/src/modules/prefetch/states/selector/prefetchViewLengthFamilySelector.ts

@@ -0,0 +1,10 @@
+import { prefetchViewsState } from '@/prefetch/states/prefetchViewsState';
+import { selector } from 'recoil';
+
+export const prefetchViewLengthSelector = selector<number>({
+  key: 'prefetchViewLengthSelector',
+  get: ({ get }) => {
+    const views = get(prefetchViewsState);
+    return views?.length ?? 0;
+  },
+});

packages/twenty-front/src/modules/prefetch/states/selector/prefetchViewsFromObjectMetadataItemFamilySelector.ts

@@ -0,0 +1,18 @@
+import { prefetchViewsState } from '@/prefetch/states/prefetchViewsState';
+import { View } from '@/views/types/View';
+import { selectorFamily } from 'recoil';
+
+export const prefetchViewsFromObjectMetadataItemFamilySelector = selectorFamily<
+  View[],
+  { objectMetadataItemId: string }
+>({
+  key: 'prefetchViewsFromObjectMetadataItemFamilySelector',
+  get:
+    ({ objectMetadataItemId }) =>
+    ({ get }) => {
+      const views = get(prefetchViewsState);
+      return views.filter(
+        (view) => view.objectMetadataId === objectMetadataItemId,
+      );
+    },
+});