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

Optimize table loading (#866)

Browse Source 
* wip

* wip

* Ok

* Deleted unused code

* Fixed lint

* Minor fixes

* Minor fixes

* Minor Fixes

* Minor merge fixes

* Ok

* Fix storybook tests

* Removed console.log

* Fix login

* asd

* Fixed storybook

* Added await

* Fixed await

* Added sleep for failing test

* Fix sleep

* Fix test

* Fix tests

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Lucas Bordeau
2023-07-25 20:00:15 +02:00
committed by GitHub
parent c2d6abde65
commit a2ccb643ff
85 changed files with 846 additions and 904 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
front/src/modules/companies/components/CompanyAccountOwnerPicker.tsx
View File

@ -48,15 +48,19 @@ export function CompanyAccountOwnerPicker({
searchOnFields: ['firstName', 'lastName'],
});
async function handleEntitySelected(selectedUser: UserForSelect) {
await updateCompany({
variables: {
where: { id: company.id },
data: {
accountOwner: { connect: { id: selectedUser.id } },
async function handleEntitySelected(
selectedUser: UserForSelect | null | undefined,
) {
if (selectedUser) {
await updateCompany({
variables: {
where: { id: company.id },
data: {
accountOwner: { connect: { id: selectedUser.id } },
},
},
},
});
});
}
onSubmit?.();
}

15
front/src/modules/companies/components/CompanyEditableNameCell.tsx
View File

@ -1,4 +1,3 @@
import { useEffect, useState } from 'react';
import { getOperationName } from '@apollo/client/utilities';
import { EditableCellChip } from '@/ui/table/editable-cell/types/EditableChip';
@ -22,17 +21,10 @@ type OwnProps = {
export function CompanyEditableNameChipCell({ company }: OwnProps) {
const [updateCompany] = useUpdateOneCompanyMutation();
const [internalValue, setInternalValue] = useState(company.name ?? '');
useEffect(() => {
setInternalValue(company.name ?? '');
}, [company.name]);
return (
<EditableCellChip
value={internalValue}
value={company.name}
placeholder="Name"
changeHandler={setInternalValue}
ChipComponent={
<CompanyChip
id={company.id}
@ -40,18 +32,17 @@ export function CompanyEditableNameChipCell({ company }: OwnProps) {
pictureUrl={getLogoUrlFromDomainName(company.domainName)}
/>
}
onSubmit={() =>
onSubmit={(newName) =>
updateCompany({
variables: {
where: { id: company.id },
data: {
name: internalValue,
name: newName,
},
},
refetchQueries: [getOperationName(GET_COMPANY) ?? ''],
})
}
onCancel={() => setInternalValue(company.name ?? '')}
/>
);
}

22
front/src/modules/companies/table/components/CompanyEntityTableData.tsx
View File

@ -1,8 +1,4 @@
import { useRecoilState } from 'recoil';
import { defaultOrderBy } from '@/companies/queries';
import { isFetchingEntityTableDataState } from '@/ui/table/states/isFetchingEntityTableDataState';
import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState';
import {
PersonOrderByWithRelationInput,
useGetCompaniesQuery,
@ -17,12 +13,6 @@ export function CompanyEntityTableData({
orderBy?: PersonOrderByWithRelationInput[];
whereFilters?: any;
}) {
const [, setTableRowIds] = useRecoilState(tableRowIdsState);
const [, setIsFetchingEntityTableData] = useRecoilState(
isFetchingEntityTableDataState,
);
const setCompanyEntityTable = useSetCompanyEntityTable();
useGetCompaniesQuery({
@ -30,19 +20,7 @@ export function CompanyEntityTableData({
onCompleted: (data) => {
const companies = data.companies ?? [];
const companyIds = companies.map((company) => company.id);
setTableRowIds((currentRowIds) => {
if (JSON.stringify(currentRowIds) !== JSON.stringify(companyIds)) {
return companyIds;
}
return currentRowIds;
});
setCompanyEntityTable(companies);
setIsFetchingEntityTableData(false);
},
});

24
front/src/modules/companies/table/components/CompanyEntityTableDataMocked.tsx
View File

@ -1,37 +1,15 @@
import { useEffect } from 'react';
import { useRecoilState } from 'recoil';
import { isFetchingEntityTableDataState } from '@/ui/table/states/isFetchingEntityTableDataState';
import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState';
import { useSetCompanyEntityTable } from '../hooks/useSetCompanyEntityTable';
import { mockedCompaniesData } from './companies-mock-data';
export function CompanyEntityTableDataMocked() {
const [, setTableRowIds] = useRecoilState(tableRowIdsState);
const [, setIsFetchingEntityTableData] = useRecoilState(
isFetchingEntityTableDataState,
);
const setCompanyEntityTable = useSetCompanyEntityTable();
useEffect(() => {
const companyIds = mockedCompaniesData.map((company) => company.id);
setTableRowIds((currentRowIds) => {
if (JSON.stringify(currentRowIds) !== JSON.stringify(companyIds)) {
return companyIds;
}
return currentRowIds;
});
setCompanyEntityTable(mockedCompaniesData);
setIsFetchingEntityTableData(false);
}, [setCompanyEntityTable, setIsFetchingEntityTableData, setTableRowIds]);
}, [setCompanyEntityTable]);
return <></>;
}

6
front/src/modules/companies/table/components/CompanyTable.tsx
View File

@ -9,10 +9,8 @@ import { turnFilterIntoWhereClause } from '@/ui/filter-n-sort/utils/turnFilterIn
import { IconList } from '@/ui/icon';
import { useRecoilScopedValue } from '@/ui/recoil-scope/hooks/useRecoilScopedValue';
import { EntityTable } from '@/ui/table/components/EntityTable';
import { HooksEntityTable } from '@/ui/table/components/HooksEntityTable';
import { TableContext } from '@/ui/table/states/TableContext';
import { CompanyOrderByWithRelationInput } from '~/generated/graphql';
import { companiesFilters } from '~/pages/companies/companies-filters';
import { availableSorts } from '~/pages/companies/companies-sorts';
export function CompanyTable() {
@ -32,10 +30,6 @@ export function CompanyTable() {
return (
<>
<CompanyEntityTableData orderBy={orderBy} whereFilters={whereFilters} />
<HooksEntityTable
numberOfColumns={companyColumns.length}
availableFilters={companiesFilters}
/>
<EntityTable
columns={companyColumns}
viewName="All Companies"

6
front/src/modules/companies/table/components/CompanyTableMockMode.tsx
View File

@ -2,18 +2,12 @@ import { companyColumns } from '@/companies/table/components/companyColumns';
import { CompanyEntityTableDataMocked } from '@/companies/table/components/CompanyEntityTableDataMocked';
import { IconList } from '@/ui/icon';
import { EntityTable } from '@/ui/table/components/EntityTable';
import { HooksEntityTable } from '@/ui/table/components/HooksEntityTable';
import { companiesFilters } from '~/pages/companies/companies-filters';
import { availableSorts } from '~/pages/companies/companies-sorts';
export function CompanyTableMockMode() {
return (
<>
<CompanyEntityTableDataMocked />
<HooksEntityTable
numberOfColumns={companyColumns.length}
availableFilters={companiesFilters}
/>
<EntityTable
columns={companyColumns}
viewName="All Companies"

15
front/src/modules/companies/table/components/EditableCompanyDomainNameCell.tsx
View File

@ -1,4 +1,3 @@
import { useEffect, useState } from 'react';
import { useRecoilValue } from 'recoil';
import { companyDomainNameFamilyState } from '@/companies/states/companyDomainNameFamilyState';
@ -12,31 +11,25 @@ export function EditableCompanyDomainNameCell() {
const [updateCompany] = useUpdateOneCompanyMutation();
const name = useRecoilValue(
const domainName = useRecoilValue(
companyDomainNameFamilyState(currentRowEntityId ?? ''),
);
const [internalValue, setInternalValue] = useState(name ?? '');
useEffect(() => {
setInternalValue(name ?? '');
}, [name]);
return (
<EditableCellURL
url={internalValue}
onChange={setInternalValue}
onSubmit={() =>
url={domainName ?? ''}
onSubmit={(newURL) =>
updateCompany({
variables: {
where: {
id: currentRowEntityId,
},
data: {
domainName: internalValue,
domainName: newURL,
},
},
})
}
onCancel={() => setInternalValue(name ?? '')}
/>
);
}

43
front/src/modules/companies/table/hooks/useSetCompanyEntityTable.ts
View File

@ -1,3 +1,4 @@
import { useLocation } from 'react-router-dom';
import { useRecoilCallback } from 'recoil';
import { companyAccountOwnerFamilyState } from '@/companies/states/companyAccountOwnerFamilyState';
@ -10,7 +11,24 @@ import { companyLinkedinUrlFamilyState } from '@/companies/states/companyLinkedi
import { companyNameFamilyState } from '@/companies/states/companyNameFamilyState';
import { GetCompaniesQuery } from '~/generated/graphql';
import { companiesFilters } from '../../../../pages/companies/companies-filters';
import { availableFiltersScopedState } from '../../../ui/filter-n-sort/states/availableFiltersScopedState';
import { useContextScopeId } from '../../../ui/recoil-scope/hooks/useContextScopeId';
import { currentPageLocationState } from '../../../ui/states/currentPageLocationState';
import { useResetTableRowSelection } from '../../../ui/table/hooks/useResetTableRowSelection';
import { entityTableDimensionsState } from '../../../ui/table/states/entityTableDimensionsState';
import { isFetchingEntityTableDataState } from '../../../ui/table/states/isFetchingEntityTableDataState';
import { TableContext } from '../../../ui/table/states/TableContext';
import { tableRowIdsState } from '../../../ui/table/states/tableRowIdsState';
import { companyColumns } from '../components/companyColumns';
export function useSetCompanyEntityTable() {
const resetTableRowSelection = useResetTableRowSelection();
const tableContextScopeId = useContextScopeId(TableContext);
const currentLocation = useLocation().pathname;
return useRecoilCallback(
({ set, snapshot }) =>
(newCompanyArray: GetCompaniesQuery['companies']) => {
@ -94,7 +112,30 @@ export function useSetCompanyEntityTable() {
set(companyCreatedAtFamilyState(company.id), company.createdAt);
}
}
const companyIds = newCompanyArray.map((company) => company.id);
set(tableRowIdsState, (currentRowIds) => {
if (JSON.stringify(currentRowIds) !== JSON.stringify(companyIds)) {
return companyIds;
}
return currentRowIds;
});
resetTableRowSelection();
set(entityTableDimensionsState, {
numberOfColumns: companyColumns.length,
numberOfRows: companyIds.length,
});
set(availableFiltersScopedState(tableContextScopeId), companiesFilters);
set(currentPageLocationState, currentLocation);
set(isFetchingEntityTableDataState, false);
},
[],
[resetTableRowSelection, tableContextScopeId, currentLocation],
);
}