Optimize table loading (#866)

* 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

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],
);
}