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

Fix Filtered index view infinite re-render (#5286)

Browse Source 
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
This commit is contained in:
Charles Bochet
2024-05-03 19:10:55 +02:00
committed by GitHub
parent a750901582
commit 6fda55609f
2 changed files with 28 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
packages/twenty-front/src/modules/views/components/ViewBar.tsx
View File

@ -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={

26
packages/twenty-front/src/modules/views/components/ViewBarPageTitle.tsx Normal file
View File

@ -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} />;
};