Refactor/remove react table (#642)

* Refactored tables without tan stack
* Fixed checkbox behavior with multiple handlers on click
* Fixed hotkeys scope
* Fix debounce in editable cells
* Lowered coverage

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/modules/people/components/EditablePeopleFullName.tsx

@@ -1,4 +1,3 @@
-import { useState } from 'react';
 import styled from '@emotion/styled';
 
 import { CellCommentChip } from '@/comments/components/table/CellCommentChip';
@@ -9,7 +8,12 @@ import { CommentableType, Person } from '~/generated/graphql';
 import { PersonChip } from './PersonChip';
 
 type OwnProps = {
-  person: Pick<Person, 'id' | 'firstName' | 'lastName' | '_commentThreadCount'>;
+  person:
+    | Partial<
+        Pick<Person, 'id' | 'firstName' | 'lastName' | '_commentThreadCount'>
+      >
+    | null
+    | undefined;
   onChange: (firstName: string, lastName: string) => void;
 };
 
@@ -25,17 +29,12 @@ const RightContainer = styled.div`
 `;
 
 export function EditablePeopleFullName({ person, onChange }: OwnProps) {
-  const [firstNameValue, setFirstNameValue] = useState(person.firstName ?? '');
-  const [lastNameValue, setLastNameValue] = useState(person.lastName ?? '');
   const openCommentRightDrawer = useOpenTimelineRightDrawer();
 
   function handleDoubleTextChange(
     firstValue: string,
     secondValue: string,
   ): void {
-    setFirstNameValue(firstValue);
-    setLastNameValue(secondValue);
-
     onChange(firstValue, secondValue);
   }
 
@@ -43,30 +42,34 @@ export function EditablePeopleFullName({ person, onChange }: OwnProps) {
     event.preventDefault();
     event.stopPropagation();
 
+    if (!person) {
+      return;
+    }
+
     openCommentRightDrawer([
       {
         type: CommentableType.Person,
-        id: person.id,
+        id: person.id ?? '',
       },
     ]);
   }
 
   return (
     <EditableCellDoubleText
-      firstValue={firstNameValue}
-      secondValue={lastNameValue}
+      firstValue={person?.firstName ?? ''}
+      secondValue={person?.lastName ?? ''}
       firstValuePlaceholder="First name"
       secondValuePlaceholder="Last name"
       onChange={handleDoubleTextChange}
       nonEditModeContent={
         <NoEditModeContainer>
           <PersonChip
-            name={person.firstName + ' ' + person.lastName}
-            id={person.id}
+            name={person?.firstName + ' ' + person?.lastName}
+            id={person?.id ?? ''}
           />
           <RightContainer>
             <CellCommentChip
-              count={person._commentThreadCount ?? 0}
+              count={person?._commentThreadCount ?? 0}
               onClick={handleCommentClick}
             />
           </RightContainer>

front/src/modules/people/components/PeopleCompanyCell.tsx

@@ -9,6 +9,10 @@ import { Company, Person } from '~/generated/graphql';
 import { PeopleCompanyCreateCell } from './PeopleCompanyCreateCell';
 import { PeopleCompanyPicker } from './PeopleCompanyPicker';
 
+export type PeopleWithCompany = Pick<Person, 'id'> & {
+  company?: Pick<Company, 'id' | 'name' | 'domainName'> | null;
+};
+
 export type OwnProps = {
   people: Pick<Person, 'id'> & {
     company?: Pick<Company, 'id' | 'name' | 'domainName'> | null;

front/src/modules/people/components/PeopleEntityTableData.tsx

@@ -0,0 +1,50 @@
+import { useRecoilState } from 'recoil';
+
+import { isFetchingEntityTableDataState } from '@/ui/tables/states/isFetchingEntityTableDataState';
+import { tableRowIdsState } from '@/ui/tables/states/tableRowIdsState';
+import {
+  PersonOrderByWithRelationInput,
+  useGetPeopleQuery,
+} from '~/generated/graphql';
+
+import { useSetPeopleEntityTable } from '../hooks/useSetPeopleEntityTable';
+import { defaultOrderBy } from '../services';
+
+export function PeopleEntityTableData({
+  orderBy = defaultOrderBy,
+  whereFilters,
+}: {
+  orderBy?: PersonOrderByWithRelationInput[];
+  whereFilters?: any;
+}) {
+  const [, setTableRowIds] = useRecoilState(tableRowIdsState);
+
+  const [, setIsFetchingEntityTableData] = useRecoilState(
+    isFetchingEntityTableDataState,
+  );
+
+  const setPeopleEntityTable = useSetPeopleEntityTable();
+
+  useGetPeopleQuery({
+    variables: { orderBy, where: whereFilters },
+    onCompleted: (data) => {
+      const people = data.people ?? [];
+
+      const peopleIds = people.map((person) => person.id);
+
+      setTableRowIds((currentRowIds) => {
+        if (JSON.stringify(currentRowIds) !== JSON.stringify(peopleIds)) {
+          return peopleIds;
+        }
+
+        return currentRowIds;
+      });
+
+      setPeopleEntityTable(people);
+
+      setIsFetchingEntityTableData(false);
+    },
+  });
+
+  return <></>;
+}

front/src/modules/people/components/PersonChip.tsx

@@ -50,6 +50,7 @@ const StyledName = styled.span`
 
 export function PersonChip({ id, name, picture }: PersonChipPropsType) {
   const ContainerComponent = id ? StyledContainerLink : StyledContainerNoLink;
+
   return (
     <ContainerComponent data-testid="person-chip" to={`/person/${id}`}>
       <Avatar