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

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 ?? '')}
/>
);
}