Refactor GraphqlPerson to GraphqlQueryPerson

A GraphqlQueryPerson has an id which is used in mutations.

front/src/interfaces/person.interface.test.ts

@@ -12,6 +12,7 @@ describe('mapPerson', () => {
       created_at: '',
       company: {
         __typename: '',
+        id: 1,
         company_name: '',
         company_domain: '',
       },

front/src/interfaces/person.interface.ts

@@ -14,10 +14,11 @@ export type Person = {
   countryCode: string;
 };
 
-export type GraphqlPerson = {
+export type GraphqlQueryPerson = {
   city: string;
   company: {
     __typename: string;
+    id: number;
     company_name: string;
     company_domain: string;
   };
@@ -48,7 +49,7 @@ export const mapPerson = (person: GraphqlQueryPerson): Person => ({
   pipe: { name: 'coucou', id: 1, icon: '💰' },
   ...person,
   company: {
-    id: 1,
+    id: person.company.id,
     name: person.company.company_name,
     domain: person.company.company_domain,
   },

front/src/pages/people/default-data.ts

@@ -1,6 +1,6 @@
-import { GraphqlPerson } from '../../interfaces/person.interface';
+import { GraphqlQueryPerson } from '../../interfaces/person.interface';
 
-export const defaultData: Array<GraphqlPerson> = [
+export const defaultData: Array<GraphqlQueryPerson> = [
   {
     id: 1,
     __typename: 'Person',
@@ -8,6 +8,7 @@ export const defaultData: Array<GraphqlPerson> = [
     lastname: 'Prot',
     email: 'alexandre@qonto.com',
     company: {
+      id: 1,
       company_name: 'Qonto',
       company_domain: 'qonto.com',
       __typename: 'Company',
@@ -24,6 +25,7 @@ export const defaultData: Array<GraphqlPerson> = [
     lastname: 'Prot',
     email: 'alexandre@qonto.com',
     company: {
+      id: 1,
       company_name: 'LinkedIn',
       company_domain: 'linkedin.com',
       __typename: 'Company',
@@ -40,6 +42,7 @@ export const defaultData: Array<GraphqlPerson> = [
     lastname: 'Prot',
     email: 'alexandre@qonto.com',
     company: {
+      id: 1,
       company_name: 'Sequoia',
       company_domain: 'sequoiacap.com',
       __typename: 'Company',
@@ -57,6 +60,7 @@ export const defaultData: Array<GraphqlPerson> = [
     lastname: 'Prot',
     email: 'alexandre@qonto.com',
     company: {
+      id: 1,
       company_name: 'Facebook',
       company_domain: 'facebook.com',
       __typename: 'Company',

front/src/pages/people/people-table.tsx

@@ -15,9 +15,11 @@ import Checkbox from '../../components/form/Checkbox';
 import HorizontalyAlignedContainer from '../../layout/containers/HorizontalyAlignedContainer';
 import CompanyChip from '../../components/chips/CompanyChip';
 import PersonChip from '../../components/chips/PersonChip';
-import { GraphqlPerson, Person } from '../../interfaces/person.interface';
+import { GraphqlQueryPerson, Person } from '../../interfaces/person.interface';
 import PipeChip from '../../components/chips/PipeChip';
 import { SortType } from '../../components/table/table-header/SortAndFilterBar';
+import EditableCell from '../../components/table/EditableCell';
+import { updatePerson } from '../../services/people';
 
 export const sortsAvailable = [
   {
@@ -34,9 +36,7 @@ export const sortsAvailable = [
     icon: faCalendar,
   },
   { id: 'city', label: 'City', order: 'asc', icon: faMapPin },
-] satisfies Array<SortType<keyof GraphqlPerson>>;
+] satisfies Array<SortType<keyof GraphqlQueryPerson>>;
-import EditableCell from '../../components/table/EditableCell';
-import { updatePerson } from '../../services/people';
 
 const columnHelper = createColumnHelper<Person>();
 export const peopleColumns = [

front/src/services/people/select.ts

@@ -1,5 +1,5 @@
 import { QueryResult, gql, useQuery } from '@apollo/client';
-import { GraphqlPerson } from '../../interfaces/person.interface';
+import { GraphqlQueryPerson } from '../../interfaces/person.interface';
 
 export type OrderBy = Record<string, 'asc' | 'desc'>;
 
@@ -14,6 +14,7 @@ export const GET_PEOPLE = gql`
       lastname
       created_at
       company {
+        id
         company_name
         company_domain
       }
@@ -23,8 +24,8 @@ export const GET_PEOPLE = gql`
 
 export function usePeopleQuery(
   orderBy: OrderBy[],
-): QueryResult<{ people: GraphqlPerson[] }> {
+): QueryResult<{ people: GraphqlQueryPerson[] }> {
-  return useQuery<{ people: GraphqlPerson[] }>(GET_PEOPLE, {
+  return useQuery<{ people: GraphqlQueryPerson[] }>(GET_PEOPLE, {
     variables: { orderBy },
   });
 }