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/components/EditablePeopleFullName.tsx

@@ -19,8 +19,8 @@ type OwnProps = {
       >
     | null
     | undefined;
-  onChange: (firstName: string, lastName: string) => void;
-  onSubmit?: () => void;
+  onChange?: (firstName: string, lastName: string) => void;
+  onSubmit?: (firstName: string, lastName: string) => void;
   onCancel?: () => void;
 };
 
@@ -37,20 +37,12 @@ export function EditablePeopleFullName({
   onSubmit,
   onCancel,
 }: OwnProps) {
-  function handleDoubleTextChange(
-    firstValue: string,
-    secondValue: string,
-  ): void {
-    onChange(firstValue, secondValue);
-  }
-
   return (
     <EditableCellDoubleText
       firstValue={person?.firstName ?? ''}
       secondValue={person?.lastName ?? ''}
       firstValuePlaceholder="First name"
       secondValuePlaceholder="Last name"
-      onChange={handleDoubleTextChange}
       onSubmit={onSubmit}
       onCancel={onCancel}
       nonEditModeContent={

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

@@ -16,6 +16,8 @@ import {
   useUpdateOnePersonMutation,
 } from '~/generated/graphql';
 
+import { EntityForSelect } from '../../ui/relation-picker/types/EntityForSelect';
+
 export type OwnProps = {
   people: Pick<Person, 'id'> & { company?: Pick<Company, 'id'> | null };
 };
@@ -37,17 +39,21 @@ export function PeopleCompanyPicker({ people }: OwnProps) {
     selectedIds: people.company?.id ? [people.company.id] : [],
   });
 
-  async function handleEntitySelected(entity: any) {
-    await updatePerson({
-      variables: {
-        where: {
-          id: people.id,
+  async function handleEntitySelected(
+    entity: EntityForSelect | null | undefined,
+  ) {
+    if (entity) {
+      await updatePerson({
+        variables: {
+          where: {
+            id: people.id,
+          },
+          data: {
+            company: { connect: { id: entity.id } },
+          },
         },
-        data: {
-          company: { connect: { id: entity.id } },
-        },
-      },
-    });
+      });
+    }
 
     closeEditableCell();
   }
@@ -67,6 +73,7 @@ export function PeopleCompanyPicker({ people }: OwnProps) {
   return (
     <SingleEntitySelect
       onCreate={handleCreate}
+      onCancel={() => closeEditableCell()}
       onEntitySelected={handleEntitySelected}
       entities={{
         entitiesToSelect: companies.entitiesToSelect,