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>

front/src/modules/people/table/components/EditablePeopleCityCell.tsx

@@ -1,4 +1,3 @@
-import { useEffect, useState } from 'react';
 import { useRecoilValue } from 'recoil';
 
 import { peopleCityFamilyState } from '@/people/states/peopleCityFamilyState';
@@ -13,29 +12,21 @@ export function EditablePeopleCityCell() {
 
   const city = useRecoilValue(peopleCityFamilyState(currentRowEntityId ?? ''));
 
-  const [internalValue, setInternalValue] = useState(city ?? '');
-
-  useEffect(() => {
-    setInternalValue(city ?? '');
-  }, [city]);
-
   return (
     <EditableCellText
-      value={internalValue}
-      onChange={setInternalValue}
-      onSubmit={() =>
+      value={city ?? ''}
+      onSubmit={(newText) =>
         updatePerson({
           variables: {
             where: {
               id: currentRowEntityId,
             },
             data: {
-              city: internalValue,
+              city: newText,
             },
           },
         })
       }
-      onCancel={() => setInternalValue(city ?? '')}
     />
   );
 }

front/src/modules/people/table/components/EditablePeopleFullNameCell.tsx

@@ -1,4 +1,3 @@
-import { useEffect, useState } from 'react';
 import { getOperationName } from '@apollo/client/utilities';
 import { useRecoilValue } from 'recoil';
 
@@ -18,45 +17,29 @@ export function EditablePeopleFullNameCell() {
     peopleNameCellFamilyState(currentRowEntityId ?? ''),
   );
 
-  const [internalFirstName, setInternalFirstName] = useState(firstName ?? '');
-  const [internalLastName, setInternalLastName] = useState(lastName ?? '');
-
-  useEffect(() => {
-    setInternalFirstName(firstName ?? '');
-    setInternalLastName(lastName ?? '');
-  }, [firstName, lastName]);
-
   return (
     <EditablePeopleFullName
       person={{
         id: currentRowEntityId ?? undefined,
         _commentThreadCount: commentCount ?? undefined,
-        firstName: internalFirstName,
-        lastName: internalLastName,
+        firstName,
+        lastName,
         displayName: displayName ?? undefined,
       }}
-      onChange={(firstName, lastName) => {
-        setInternalFirstName(firstName);
-        setInternalLastName(lastName);
-      }}
-      onSubmit={() =>
+      onSubmit={(newFirstValue, newSecondValue) =>
         updatePerson({
           variables: {
             where: {
               id: currentRowEntityId,
             },
             data: {
-              firstName: internalFirstName,
-              lastName: internalLastName,
+              firstName: newFirstValue,
+              lastName: newSecondValue,
             },
           },
           refetchQueries: [getOperationName(GET_PERSON) ?? ''],
         })
       }
-      onCancel={() => {
-        setInternalFirstName(firstName ?? '');
-        setInternalLastName(lastName ?? '');
-      }}
     />
   );
 }

front/src/modules/people/table/components/EditablePeopleJobTitleCell.tsx

@@ -1,4 +1,3 @@
-import { useEffect, useState } from 'react';
 import { useRecoilValue } from 'recoil';
 
 import { peopleJobTitleFamilyState } from '@/people/states/peopleJobTitleFamilyState';
@@ -15,29 +14,21 @@ export function EditablePeopleJobTitleCell() {
     peopleJobTitleFamilyState(currentRowEntityId ?? ''),
   );
 
-  const [internalValue, setInternalValue] = useState(jobTitle ?? '');
-
-  useEffect(() => {
-    setInternalValue(jobTitle ?? '');
-  }, [jobTitle]);
-
   return (
     <EditableCellText
-      value={internalValue}
-      onChange={setInternalValue}
-      onSubmit={() =>
+      value={jobTitle ?? ''}
+      onSubmit={(newText) =>
         updatePerson({
           variables: {
             where: {
               id: currentRowEntityId,
             },
             data: {
-              jobTitle: internalValue,
+              jobTitle: newText,
             },
           },
         })
       }
-      onCancel={() => setInternalValue(jobTitle ?? '')}
     />
   );
 }

front/src/modules/people/table/components/EditablePeopleLinkedinUrlCell.tsx

@@ -1,4 +1,3 @@
-import { useEffect, useState } from 'react';
 import { useRecoilValue } from 'recoil';
 
 import { peopleLinkedinUrlFamilyState } from '@/people/states/peopleLinkedinUrlFamilyState';
@@ -16,29 +15,21 @@ export function EditablePeopleLinkedinUrlCell() {
     peopleLinkedinUrlFamilyState(currentRowEntityId ?? ''),
   );
 
-  const [internalValue, setInternalValue] = useState(linkedinUrl ?? '');
-
-  useEffect(() => {
-    setInternalValue(linkedinUrl ?? '');
-  }, [linkedinUrl]);
-
   return (
     <EditableCellURL
-      url={internalValue}
-      onChange={setInternalValue}
-      onSubmit={() =>
+      url={linkedinUrl ?? ''}
+      onSubmit={(newURL) =>
         updatePerson({
           variables: {
             where: {
               id: currentRowEntityId,
             },
             data: {
-              linkedinUrl: internalValue,
+              linkedinUrl: newURL,
             },
           },
         })
       }
-      onCancel={() => setInternalValue(linkedinUrl ?? '')}
     />
   );
 }

front/src/modules/people/table/components/EditablePeoplePhoneCell.tsx

@@ -1,4 +1,3 @@
-import { useEffect, useState } from 'react';
 import { useRecoilValue } from 'recoil';
 
 import { peoplePhoneFamilyState } from '@/people/states/peoplePhoneFamilyState';
@@ -15,29 +14,21 @@ export function EditablePeoplePhoneCell() {
     peoplePhoneFamilyState(currentRowEntityId ?? ''),
   );
 
-  const [internalValue, setInternalValue] = useState(phone ?? '');
-
-  useEffect(() => {
-    setInternalValue(phone ?? '');
-  }, [phone]);
-
   return (
     <EditableCellPhone
-      value={internalValue}
-      onChange={setInternalValue}
-      onSubmit={() =>
+      value={phone?.toString() ?? ''}
+      onSubmit={(newPhone) =>
         updatePerson({
           variables: {
             where: {
               id: currentRowEntityId,
             },
             data: {
-              phone: internalValue,
+              phone: newPhone,
             },
           },
         })
       }
-      onCancel={() => setInternalValue(phone ?? '')}
     />
   );
 }

front/src/modules/people/table/components/PeopleTable.tsx

@@ -10,10 +10,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 { PersonOrderByWithRelationInput } from '~/generated/graphql';
-import { peopleFilters } from '~/pages/people/people-filters';
 import { availableSorts } from '~/pages/people/people-sorts';
 
 export function PeopleTable() {
@@ -33,10 +31,6 @@ export function PeopleTable() {
   return (
     <>
       <PeopleEntityTableData orderBy={orderBy} whereFilters={whereFilters} />
-      <HooksEntityTable
-        numberOfColumns={peopleColumns.length}
-        availableFilters={peopleFilters}
-      />
       <EntityTable
         columns={peopleColumns}
         viewName="All People"