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

* Add optimistic updates on company table

* Add optimistic rendering for tables too

* Fix schema

front/src/generated/graphql.tsx

@@ -2679,12 +2679,14 @@ export type UpdateOneCompanyMutationVariables = Exact<{
 
 export type UpdateOneCompanyMutation = { __typename?: 'Mutation', updateOneCompany?: { __typename?: 'Company', address: string, createdAt: string, domainName: string, employees?: number | null, linkedinUrl?: string | null, id: string, name: string, accountOwner?: { __typename?: 'User', id: string, email: string, displayName: string, firstName?: string | null, lastName?: string | null } | null } | null };
 
+export type InsertCompanyFragmentFragment = { __typename?: 'Company', domainName: string, address: string, id: string, name: string, createdAt: string };
+
 export type InsertOneCompanyMutationVariables = Exact<{
   data: CompanyCreateInput;
 }>;
 
 
-export type InsertOneCompanyMutation = { __typename?: 'Mutation', createOneCompany: { __typename?: 'Company', address: string, createdAt: string, domainName: string, linkedinUrl?: string | null, employees?: number | null, id: string, name: string } };
+export type InsertOneCompanyMutation = { __typename?: 'Mutation', createOneCompany: { __typename?: 'Company', domainName: string, address: string, id: string, name: string, createdAt: string } };
 
 export type DeleteManyCompaniesMutationVariables = Exact<{
   ids?: InputMaybe<Array<Scalars['String']> | Scalars['String']>;
@@ -2766,12 +2768,14 @@ export type UpdateOnePersonMutationVariables = Exact<{
 
 export type UpdateOnePersonMutation = { __typename?: 'Mutation', updateOnePerson?: { __typename?: 'Person', id: string, city?: string | null, email?: string | null, jobTitle?: string | null, linkedinUrl?: string | null, xUrl?: string | null, firstName?: string | null, lastName?: string | null, displayName: string, phone?: string | null, createdAt: string, company?: { __typename?: 'Company', domainName: string, name: string, id: string } | null } | null };
 
+export type InsertPersonFragmentFragment = { __typename?: 'Person', id: string, firstName?: string | null, lastName?: string | null, displayName: string, createdAt: string };
+
 export type InsertOnePersonMutationVariables = Exact<{
   data: PersonCreateInput;
 }>;
 
 
-export type InsertOnePersonMutation = { __typename?: 'Mutation', createOnePerson: { __typename?: 'Person', id: string, city?: string | null, email?: string | null, firstName?: string | null, lastName?: string | null, jobTitle?: string | null, linkedinUrl?: string | null, xUrl?: string | null, displayName: string, phone?: string | null, createdAt: string, company?: { __typename?: 'Company', domainName: string, name: string, id: string } | null } };
+export type InsertOnePersonMutation = { __typename?: 'Mutation', createOnePerson: { __typename?: 'Person', id: string, firstName?: string | null, lastName?: string | null, displayName: string, createdAt: string } };
 
 export type DeleteManyPersonMutationVariables = Exact<{
   ids?: InputMaybe<Array<Scalars['String']> | Scalars['String']>;
@@ -3025,6 +3029,24 @@ export const ActivityUpdatePartsFragmentDoc = gql`
   }
 }
     `;
+export const InsertCompanyFragmentFragmentDoc = gql`
+    fragment InsertCompanyFragment on Company {
+  domainName
+  address
+  id
+  name
+  createdAt
+}
+    `;
+export const InsertPersonFragmentFragmentDoc = gql`
+    fragment InsertPersonFragment on Person {
+  id
+  firstName
+  lastName
+  displayName
+  createdAt
+}
+    `;
 export const CreateCommentDocument = gql`
     mutation CreateComment($commentId: String!, $commentText: String!, $authorId: String!, $activityId: String!, $createdAt: DateTime!) {
   createOneComment(
@@ -4062,16 +4084,10 @@ export type UpdateOneCompanyMutationOptions = Apollo.BaseMutationOptions<UpdateO
 export const InsertOneCompanyDocument = gql`
     mutation InsertOneCompany($data: CompanyCreateInput!) {
   createOneCompany(data: $data) {
-    address
+    ...InsertCompanyFragment
-    createdAt
-    domainName
-    linkedinUrl
-    employees
-    id
-    name
   }
 }
-    `;
+    ${InsertCompanyFragmentFragmentDoc}`;
 export type InsertOneCompanyMutationFn = Apollo.MutationFunction<InsertOneCompanyMutation, InsertOneCompanyMutationVariables>;
 
 /**
@@ -4548,25 +4564,10 @@ export type UpdateOnePersonMutationOptions = Apollo.BaseMutationOptions<UpdateOn
 export const InsertOnePersonDocument = gql`
     mutation InsertOnePerson($data: PersonCreateInput!) {
   createOnePerson(data: $data) {
-    id
+    ...InsertPersonFragment
-    city
-    company {
-      domainName
-      name
-      id
-    }
-    email
-    firstName
-    lastName
-    jobTitle
-    linkedinUrl
-    xUrl
-    displayName
-    phone
-    createdAt
   }
 }
-    `;
+    ${InsertPersonFragmentFragmentDoc}`;
 export type InsertOnePersonMutationFn = Apollo.MutationFunction<InsertOnePersonMutation, InsertOnePersonMutationVariables>;
 
 /**

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
+      ...InsertCompanyFragment
-      createdAt
-      domainName
-      linkedinUrl
-      employees
-      id
-      name
     }
   }
 `;

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: [
+    refetchQueries: [getOperationName(GET_PIPELINES) ?? ''],
-      getOperationName(GET_COMPANIES) ?? '',
-      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
+      ...InsertPersonFragment
-      city
-      company {
-        domainName
-        name
-        id
-      }
-      email
-      firstName
-      lastName
-      jobTitle
-      linkedinUrl
-      xUrl
-      displayName
-      phone
-      createdAt
     }
   }
 `;

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: {

front/src/pages/companies/Companies.tsx

@@ -1,20 +1,21 @@
 import { getOperationName } from '@apollo/client/utilities';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { useRecoilState } from 'recoil';
+import { v4 } from 'uuid';
 
-import { GET_COMPANIES } from '@/companies/queries';
 import { CompanyTable } from '@/companies/table/components/CompanyTable';
 import { TableActionBarButtonCreateActivityCompany } from '@/companies/table/components/TableActionBarButtonCreateActivityCompany';
 import { TableActionBarButtonDeleteCompanies } from '@/companies/table/components/TableActionBarButtonDeleteCompanies';
+import { SEARCH_COMPANY_QUERY } from '@/search/queries/search';
 import { IconBuildingSkyscraper } from '@/ui/icon';
 import { WithTopBarContainer } from '@/ui/layout/components/WithTopBarContainer';
 import { EntityTableActionBar } from '@/ui/table/action-bar/components/EntityTableActionBar';
 import { TableContext } from '@/ui/table/states/TableContext';
+import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState';
 import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 import { useInsertOneCompanyMutation } from '~/generated/graphql';
 
-import { SEARCH_COMPANY_QUERY } from '../../modules/search/queries/search';
-
 const StyledTableContainer = styled.div`
   display: flex;
   width: 100%;
@@ -22,20 +23,35 @@ const StyledTableContainer = styled.div`
 
 export function Companies() {
   const [insertCompany] = useInsertOneCompanyMutation();
+  const [tableRowIds, setTableRowIds] = useRecoilState(tableRowIdsState);
 
   async function handleAddButtonClick() {
+    const newCompanyId: string = v4();
     await insertCompany({
       variables: {
         data: {
+          id: newCompanyId,
           name: '',
           domainName: '',
           address: '',
         },
       },
-      refetchQueries: [
+      optimisticResponse: {
-        getOperationName(GET_COMPANIES) ?? '',
+        __typename: 'Mutation',
-        getOperationName(SEARCH_COMPANY_QUERY) ?? '',
+        createOneCompany: {
-      ],
+          __typename: 'Company',
+          id: newCompanyId,
+          name: '',
+          domainName: '',
+          address: '',
+          createdAt: '',
+        },
+      },
+      update: (cache, { data }) => {
+        data?.createOneCompany.id &&
+          setTableRowIds([data?.createOneCompany.id, ...tableRowIds]);
+      },
+      refetchQueries: [getOperationName(SEARCH_COMPANY_QUERY) ?? ''],
     });
   }
 

front/src/pages/people/People.tsx

@@ -1,8 +1,8 @@
-import { getOperationName } from '@apollo/client/utilities';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { useRecoilState } from 'recoil';
+import { v4 } from 'uuid';
 
-import { GET_PEOPLE } from '@/people/queries';
 import { PeopleTable } from '@/people/table/components/PeopleTable';
 import { TableActionBarButtonCreateActivityPeople } from '@/people/table/components/TableActionBarButtonCreateActivityPeople';
 import { TableActionBarButtonDeletePeople } from '@/people/table/components/TableActionBarButtonDeletePeople';
@@ -10,6 +10,7 @@ import { IconUser } from '@/ui/icon';
 import { WithTopBarContainer } from '@/ui/layout/components/WithTopBarContainer';
 import { EntityTableActionBar } from '@/ui/table/action-bar/components/EntityTableActionBar';
 import { TableContext } from '@/ui/table/states/TableContext';
+import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState';
 import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 import { useInsertOnePersonMutation } from '~/generated/graphql';
 
@@ -20,16 +21,33 @@ const StyledTableContainer = styled.div`
 
 export function People() {
   const [insertOnePerson] = useInsertOnePersonMutation();
+  const [tableRowIds, setTableRowIds] = useRecoilState(tableRowIdsState);
 
   async function handleAddButtonClick() {
+    const newPersonId: string = v4();
     await insertOnePerson({
       variables: {
         data: {
+          id: newPersonId,
           firstName: '',
           lastName: '',
         },
       },
-      refetchQueries: [getOperationName(GET_PEOPLE) ?? ''],
+      optimisticResponse: {
+        __typename: 'Mutation',
+        createOnePerson: {
+          __typename: 'Person',
+          id: newPersonId,
+          firstName: '',
+          lastName: '',
+          displayName: '',
+          createdAt: '',
+        },
+      },
+      update: (cache, { data }) => {
+        data?.createOnePerson?.id &&
+          setTableRowIds([data?.createOnePerson.id, ...tableRowIds]);
+      },
     });
   }