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/views/components/ViewBar.tsx

@@ -7,13 +7,10 @@ import { ObjectSortDropdownButton } from '@/object-record/object-sort-dropdown/c
 import { useIsPrefetchLoading } from '@/prefetch/hooks/useIsPrefetchLoading';
 import { TopBar } from '@/ui/layout/top-bar/components/TopBar';
 import { QueryParamsFiltersEffect } from '@/views/components/QueryParamsFiltersEffect';
-import { QueryParamsViewIdEffect } from '@/views/components/QueryParamsViewIdEffect';
-import { ViewBarEffect } from '@/views/components/ViewBarEffect';
 import { ViewBarFilterEffect } from '@/views/components/ViewBarFilterEffect';
 import { ViewBarPageTitle } from '@/views/components/ViewBarPageTitle';
 import { ViewBarSkeletonLoader } from '@/views/components/ViewBarSkeletonLoader';
 import { ViewBarSortEffect } from '@/views/components/ViewBarSortEffect';
-import { GraphQLView } from '@/views/types/GraphQLView';
 import { ViewPickerDropdown } from '@/views/view-picker/components/ViewPickerDropdown';
 
 import { ViewsHotkeyScope } from '../types/ViewsHotkeyScope';
@@ -22,7 +19,6 @@ import { FiltersHotkeyScope } from '@/object-record/object-filter-dropdown/types
 import { VIEW_SORT_DROPDOWN_ID } from '@/object-record/object-sort-dropdown/constants/ViewSortDropdownId';
 import { ObjectSortDropdownComponentInstanceContext } from '@/object-record/object-sort-dropdown/states/context/ObjectSortDropdownComponentInstanceContext';
 import { ViewBarRecordFilterEffect } from '@/views/components/ViewBarRecordFilterEffect';
-import { ViewEventContext } from '@/views/events/contexts/ViewEventContext';
 import { UpdateViewButtonGroup } from './UpdateViewButtonGroup';
 import { ViewBarDetails } from './ViewBarDetails';
 
@@ -30,14 +26,12 @@ export type ViewBarProps = {
   viewBarId: string;
   className?: string;
   optionsDropdownButton: ReactNode;
-  onCurrentViewChange: (view: GraphQLView | undefined) => void | Promise<void>;
 };
 
 export const ViewBar = ({
   viewBarId,
   className,
   optionsDropdownButton,
-  onCurrentViewChange,
 }: ViewBarProps) => {
   const { objectNamePlural } = useParams();
 
@@ -53,53 +47,49 @@ export const ViewBar = ({
     <ObjectSortDropdownComponentInstanceContext.Provider
       value={{ instanceId: VIEW_SORT_DROPDOWN_ID }}
     >
-      <ViewEventContext.Provider value={{ onCurrentViewChange }}>
-        <ViewBarRecordFilterEffect />
-        <ViewBarEffect viewBarId={viewBarId} />
-        <ViewBarFilterEffect filterDropdownId={filterDropdownId} />
-        <ViewBarSortEffect />
-        <QueryParamsFiltersEffect />
-        <QueryParamsViewIdEffect />
+      <ViewBarRecordFilterEffect />
+      <ViewBarFilterEffect filterDropdownId={filterDropdownId} />
+      <ViewBarSortEffect />
+      <QueryParamsFiltersEffect />
 
-        <ViewBarPageTitle viewBarId={viewBarId} />
-        <TopBar
-          className={className}
-          leftComponent={
-            loading ? <ViewBarSkeletonLoader /> : <ViewPickerDropdown />
-          }
-          rightComponent={
-            <>
-              <ObjectFilterDropdownButton
-                filterDropdownId={filterDropdownId}
-                hotkeyScope={{
-                  scope: FiltersHotkeyScope.ObjectFilterDropdownButton,
-                }}
-              />
-              <ObjectSortDropdownButton
-                hotkeyScope={{
-                  scope: FiltersHotkeyScope.ObjectSortDropdownButton,
-                }}
-              />
-              {optionsDropdownButton}
-            </>
-          }
-          bottomComponent={
-            <ViewBarDetails
+      <ViewBarPageTitle viewBarId={viewBarId} />
+      <TopBar
+        className={className}
+        leftComponent={
+          loading ? <ViewBarSkeletonLoader /> : <ViewPickerDropdown />
+        }
+        rightComponent={
+          <>
+            <ObjectFilterDropdownButton
               filterDropdownId={filterDropdownId}
-              hasFilterButton
-              viewBarId={viewBarId}
-              objectNamePlural={objectNamePlural}
-              rightComponent={
-                <UpdateViewButtonGroup
-                  hotkeyScope={{
-                    scope: ViewsHotkeyScope.UpdateViewButtonDropdown,
-                  }}
-                />
-              }
+              hotkeyScope={{
+                scope: FiltersHotkeyScope.ObjectFilterDropdownButton,
+              }}
             />
-          }
-        />
-      </ViewEventContext.Provider>
+            <ObjectSortDropdownButton
+              hotkeyScope={{
+                scope: FiltersHotkeyScope.ObjectSortDropdownButton,
+              }}
+            />
+            {optionsDropdownButton}
+          </>
+        }
+        bottomComponent={
+          <ViewBarDetails
+            filterDropdownId={filterDropdownId}
+            hasFilterButton
+            viewBarId={viewBarId}
+            objectNamePlural={objectNamePlural}
+            rightComponent={
+              <UpdateViewButtonGroup
+                hotkeyScope={{
+                  scope: ViewsHotkeyScope.UpdateViewButtonDropdown,
+                }}
+              />
+            }
+          />
+        }
+      />
     </ObjectSortDropdownComponentInstanceContext.Provider>
   );
 };