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

58
front/src/modules/ui/table/components/EntityTableRow.tsx
View File

@ -1,16 +1,6 @@
import { useEffect } from 'react';
import styled from '@emotion/styled';
import { useRecoilValue } from 'recoil';
import { TableColumn } from '@/people/table/components/peopleColumns';
import { RecoilScope } from '@/ui/recoil-scope/components/RecoilScope';
import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState';
import { CellContext } from '../states/CellContext';
import { currentRowEntityIdScopedState } from '../states/currentRowEntityIdScopedState';
import { currentRowNumberScopedState } from '../states/currentRowNumberScopedState';
import { isRowSelectedFamilyState } from '../states/isRowSelectedFamilyState';
import { RowContext } from '../states/RowContext';
import { CheckboxCell } from './CheckboxCell';
import { EntityTableCell } from './EntityTableCell';
@ -23,56 +13,24 @@ const StyledRow = styled.tr<{ selected: boolean }>`
export function EntityTableRow({
columns,
rowId,
index,
}: {
columns: TableColumn[];
rowId: string;
index: number;
}) {
const [currentRowEntityId, setCurrentRowEntityId] = useRecoilScopedState(
currentRowEntityIdScopedState,
RowContext,
);
const isCurrentRowSelected = useRecoilValue(isRowSelectedFamilyState(rowId));
const [, setCurrentRowNumber] = useRecoilScopedState(
currentRowNumberScopedState,
RowContext,
);
useEffect(() => {
if (currentRowEntityId !== rowId) {
setCurrentRowEntityId(rowId);
}
}, [rowId, setCurrentRowEntityId, currentRowEntityId]);
useEffect(() => {
setCurrentRowNumber(index);
}, [index, setCurrentRowNumber]);
return (
<StyledRow
key={rowId}
data-testid={`row-id-${rowId}`}
selected={isCurrentRowSelected}
>
<StyledRow data-testid={`row-id-${rowId}`} selected={false}>
<td>
<CheckboxCell />
</td>
{columns.map((column, columnIndex) => {
return (
<RecoilScope SpecificContext={CellContext} key={column.id.toString()}>
<RecoilScope>
<EntityTableCell
rowId={rowId}
size={column.size}
cellIndex={columnIndex}
>
{column.cellComponent}
</EntityTableCell>
</RecoilScope>
</RecoilScope>
<EntityTableCell
key={column.id}
size={column.size}
cellIndex={columnIndex}
>
{column.cellComponent}
</EntityTableCell>
);
})}
<td></td>