Feature/optmistically render table create & remove (#1156)

* Add optimistic updates on company table

* Add optimistic rendering for tables too

* Fix schema

front/src/modules/companies/queries/update.ts

@@ -24,16 +24,20 @@ export const UPDATE_ONE_COMPANY = gql`
   }
 `;
 
+export const INSERT_COMPANY_FRAGMENT = gql`
+  fragment InsertCompanyFragment on Company {
+    domainName
+    address
+    id
+    name
+    createdAt
+  }
+`;
+
 export const INSERT_ONE_COMPANY = gql`
   mutation InsertOneCompany($data: CompanyCreateInput!) {
     createOneCompany(data: $data) {
-      address
-      createdAt
-      domainName
-      linkedinUrl
-      employees
-      id
-      name
+      ...InsertCompanyFragment
     }
   }
 `;

front/src/modules/companies/table/components/TableActionBarButtonDeleteCompanies.tsx

@@ -1,12 +1,12 @@
 import { getOperationName } from '@apollo/client/utilities';
-import { useRecoilValue } from 'recoil';
+import { useRecoilState, useRecoilValue } from 'recoil';
 
-import { GET_COMPANIES } from '@/companies/queries';
 import { GET_PIPELINES } from '@/pipeline/queries';
 import { IconTrash } from '@/ui/icon/index';
 import { EntityTableActionBarButton } from '@/ui/table/action-bar/components/EntityTableActionBarButton';
 import { useResetTableRowSelection } from '@/ui/table/hooks/useResetTableRowSelection';
 import { selectedRowIdsSelector } from '@/ui/table/states/selectedRowIdsSelector';
+import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState';
 import { useDeleteManyCompaniesMutation } from '~/generated/graphql';
 
 export function TableActionBarButtonDeleteCompanies() {
@@ -15,12 +15,11 @@ export function TableActionBarButtonDeleteCompanies() {
   const resetRowSelection = useResetTableRowSelection();
 
   const [deleteCompanies] = useDeleteManyCompaniesMutation({
-    refetchQueries: [
-      getOperationName(GET_COMPANIES) ?? '',
-      getOperationName(GET_PIPELINES) ?? '',
-    ],
+    refetchQueries: [getOperationName(GET_PIPELINES) ?? ''],
   });
 
+  const [tableRowIds, setTableRowIds] = useRecoilState(tableRowIdsState);
+
   async function handleDeleteClick() {
     const rowIdsToDelete = selectedRowIds;
 
@@ -30,6 +29,17 @@ export function TableActionBarButtonDeleteCompanies() {
       variables: {
         ids: rowIdsToDelete,
       },
+      optimisticResponse: {
+        __typename: 'Mutation',
+        deleteManyCompany: {
+          count: rowIdsToDelete.length,
+        },
+      },
+      update: () => {
+        setTableRowIds(
+          tableRowIds.filter((id) => !rowIdsToDelete.includes(id)),
+        );
+      },
     });
   }
 

front/src/modules/people/queries/update.ts

@@ -26,25 +26,20 @@ export const UPDATE_ONE_PERSON = gql`
   }
 `;
 
+export const INSERT_PERSON_FRAGMENT = gql`
+  fragment InsertPersonFragment on Person {
+    id
+    firstName
+    lastName
+    displayName
+    createdAt
+  }
+`;
+
 export const INSERT_ONE_PERSON = gql`
   mutation InsertOnePerson($data: PersonCreateInput!) {
     createOnePerson(data: $data) {
-      id
-      city
-      company {
-        domainName
-        name
-        id
-      }
-      email
-      firstName
-      lastName
-      jobTitle
-      linkedinUrl
-      xUrl
-      displayName
-      phone
-      createdAt
+      ...InsertPersonFragment
     }
   }
 `;

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

@@ -1,15 +1,17 @@
 import { getOperationName } from '@apollo/client/utilities';
-import { useRecoilValue } from 'recoil';
+import { useRecoilState, useRecoilValue } from 'recoil';
 
 import { GET_PEOPLE } from '@/people/queries';
 import { IconTrash } from '@/ui/icon/index';
 import { EntityTableActionBarButton } from '@/ui/table/action-bar/components/EntityTableActionBarButton';
 import { useResetTableRowSelection } from '@/ui/table/hooks/useResetTableRowSelection';
 import { selectedRowIdsSelector } from '@/ui/table/states/selectedRowIdsSelector';
+import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState';
 import { useDeleteManyPersonMutation } from '~/generated/graphql';
 
 export function TableActionBarButtonDeletePeople() {
   const selectedRowIds = useRecoilValue(selectedRowIdsSelector);
+  const [tableRowIds, setTableRowIds] = useRecoilState(tableRowIdsState);
 
   const resetRowSelection = useResetTableRowSelection();
 
@@ -26,6 +28,17 @@ export function TableActionBarButtonDeletePeople() {
       variables: {
         ids: rowIdsToDelete,
       },
+      optimisticResponse: {
+        __typename: 'Mutation',
+        deleteManyPerson: {
+          count: rowIdsToDelete.length,
+        },
+      },
+      update: () => {
+        setTableRowIds(
+          tableRowIds.filter((id) => !rowIdsToDelete.includes(id)),
+        );
+      },
     });
   }
 

front/src/modules/ui/table/editable-cell/type/components/GenericEditableDoubleTextChipCellDisplayMode.tsx

@@ -40,7 +40,8 @@ export function GenericEditableDoubleTextChipCellDisplayMode({
     }),
   );
 
-  const displayName = `${firstValue} ${secondValue}`;
+  const displayName =
+    firstValue || secondValue ? `${firstValue} ${secondValue}` : ' ';
 
   switch (viewField.metadata.entityType) {
     case Entity.Company: {