From 6fda55609f889b767b12555fcf0592920e5bb30e Mon Sep 17 00:00:00 2001
From: Charles Bochet <charlesBochet@users.noreply.github.com>
Date: Fri, 3 May 2024 19:10:55 +0200
Subject: [PATCH] Fix Filtered index view infinite re-render (#5286)

The whole viewBar component was re-rendered on view changes which was
introducing performance issue. The need was to compute page title, this
should be done in a lower level component
---
 .../src/modules/views/components/ViewBar.tsx  | 13 ++--------
 .../views/components/ViewBarPageTitle.tsx     | 26 +++++++++++++++++++
 2 files changed, 28 insertions(+), 11 deletions(-)
 create mode 100644 packages/twenty-front/src/modules/views/components/ViewBarPageTitle.tsx

diff --git a/packages/twenty-front/src/modules/views/components/ViewBar.tsx b/packages/twenty-front/src/modules/views/components/ViewBar.tsx
index 1fa164e72..cc920591a 100644
--- a/packages/twenty-front/src/modules/views/components/ViewBar.tsx
+++ b/packages/twenty-front/src/modules/views/components/ViewBar.tsx
@@ -5,17 +5,15 @@ import { ObjectFilterDropdownButton } from '@/object-record/object-filter-dropdo
 import { FiltersHotkeyScope } from '@/object-record/object-filter-dropdown/types/FiltersHotkeyScope';
 import { ObjectSortDropdownButton } from '@/object-record/object-sort-dropdown/components/ObjectSortDropdownButton';
 import { TopBar } from '@/ui/layout/top-bar/TopBar';
-import { PageTitle } from '@/ui/utilities/page-title/PageTitle';
 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 { ViewBarSortEffect } from '@/views/components/ViewBarSortEffect';
-import { useGetCurrentView } from '@/views/hooks/useGetCurrentView';
 import { ViewScope } from '@/views/scopes/ViewScope';
 import { GraphQLView } from '@/views/types/GraphQLView';
 import { ViewPickerDropdown } from '@/views/view-picker/components/ViewPickerDropdown';
-import { capitalize } from '~/utils/string/capitalize';
 
 import { ViewsHotkeyScope } from '../types/ViewsHotkeyScope';
 
@@ -37,9 +35,6 @@ export const ViewBar = ({
 }: ViewBarProps) => {
   const { objectNamePlural } = useParams();
 
-  const { currentViewWithCombinedFiltersAndSorts: currentView } =
-    useGetCurrentView(viewBarId);
-
   const filterDropdownId = 'view-filter';
   const sortDropdownId = 'view-sort';
 
@@ -47,10 +42,6 @@ export const ViewBar = ({
     return;
   }
 
-  const pageTitle = currentView?.name
-    ? `${currentView?.name} - ${capitalize(objectNamePlural)}`
-    : capitalize(objectNamePlural);
-
   return (
     <ViewScope
       viewScopeId={viewBarId}
@@ -62,7 +53,7 @@ export const ViewBar = ({
       <QueryParamsFiltersEffect />
       <QueryParamsViewIdEffect />
 
-      <PageTitle title={pageTitle} />
+      <ViewBarPageTitle viewBarId={viewBarId} />
       <TopBar
         className={className}
         leftComponent={
diff --git a/packages/twenty-front/src/modules/views/components/ViewBarPageTitle.tsx b/packages/twenty-front/src/modules/views/components/ViewBarPageTitle.tsx
new file mode 100644
index 000000000..c7ab13c54
--- /dev/null
+++ b/packages/twenty-front/src/modules/views/components/ViewBarPageTitle.tsx
@@ -0,0 +1,26 @@
+import { useParams } from 'react-router-dom';
+
+import { PageTitle } from '@/ui/utilities/page-title/PageTitle';
+import { useGetCurrentView } from '@/views/hooks/useGetCurrentView';
+import { capitalize } from '~/utils/string/capitalize';
+
+export type ViewBarPageTitleProps = {
+  viewBarId: string;
+};
+
+export const ViewBarPageTitle = ({ viewBarId }: ViewBarPageTitleProps) => {
+  const { objectNamePlural } = useParams();
+
+  const { currentViewWithCombinedFiltersAndSorts: currentView } =
+    useGetCurrentView(viewBarId);
+
+  if (!objectNamePlural) {
+    return;
+  }
+
+  const pageTitle = currentView?.name
+    ? `${currentView?.name} - ${capitalize(objectNamePlural)}`
+    : capitalize(objectNamePlural);
+
+  return <PageTitle title={pageTitle} />;
+};