Make all fields optional on entities (#121)

* Make all fields optional on entities

* Rewrite tests

* Add test on TableHeader Cancel button

front/src/App.tsx

@@ -7,7 +7,7 @@ import AppLayout from './layout/AppLayout';
 import { Routes, Route, Navigate } from 'react-router-dom';
 import RequireAuth from './components/auth/RequireAuth';
 import Opportunities from './pages/opportunities/Opportunities';
-import { User, mapUser } from './interfaces/user.interface';
+import { User, mapToUser } from './interfaces/user.interface';
 import { useGetCurrentUserQuery } from './services/users';
 import { getUserIdFromToken } from './services/AuthService';
 
@@ -19,7 +19,7 @@ function App() {
 
   useEffect(() => {
     if (data?.users[0]) {
-      setUser(mapUser(data?.users[0]));
+      setUser(mapToUser(data?.users[0]));
     }
   }, [data]);
 

front/src/components/chips/PipeChip.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import styled from '@emotion/styled';
-import { Opportunity } from '../../interfaces/company.interface';
+import { Pipe } from '../../interfaces/pipe.interface';
 
 type OwnProps = {
-  opportunity: Opportunity;
+  opportunity: Pipe;
 };
 
 const StyledContainer = styled.span`

front/src/components/table/editable-cell/__stories__/EditableRelation.stories.tsx

@@ -3,7 +3,10 @@ import { ThemeProvider } from '@emotion/react';
 import { lightTheme } from '../../../../layout/styles/themes';
 import { StoryFn } from '@storybook/react';
 import CompanyChip, { CompanyChipPropsType } from '../../../chips/CompanyChip';
-import { Company, mapCompany } from '../../../../interfaces/company.interface';
+import {
+  Company,
+  mapToCompany,
+} from '../../../../interfaces/company.interface';
 import { MockedProvider } from '@apollo/client/testing';
 import { SEARCH_COMPANY_QUERY } from '../../../../services/search/search';
 import styled from '@emotion/styled';
@@ -76,8 +79,10 @@ EditableRelationStory.args = {
   ChipComponent: CompanyChip,
   chipComponentPropsMapper: (company: Company): CompanyChipPropsType => {
     return {
-      name: company.name,
-      picture: `https://www.google.com/s2/favicons?domain=${company.domain_name}&sz=256`,
+      name: company.name || '',
+      picture: company.domainName
+        ? `https://www.google.com/s2/favicons?domain=${company.domainName}&sz=256`
+        : undefined,
     };
   },
   changeHandler: (relation: Company) => {
@@ -90,7 +95,7 @@ EditableRelationStory.args = {
     }),
     resultMapper: (company) => ({
       render: (company) => company.name,
-      value: mapCompany(company),
+      value: mapToCompany(company),
     }),
   } satisfies SearchConfigType<Company>,
 };

front/src/components/table/editable-cell/__tests__/EditableRelation.test.tsx

@@ -49,16 +49,15 @@ it('Checks the EditableRelation editing event bubbles up', async () => {
   });
 
   await waitFor(() => {
-    expect(func).toBeCalledWith(
-      expect.objectContaining({
-        accountOwner: null,
-        address: undefined,
-        domain_name: 'abnb.com',
-        employees: undefined,
-        id: 'abnb',
-        name: 'Airbnb',
-        opportunities: [],
-      }),
-    );
+    expect(func).toBeCalledWith({
+      accountOwner: undefined,
+      address: undefined,
+      domainName: 'abnb.com',
+      employees: undefined,
+      creationDate: undefined,
+      id: 'abnb',
+      name: 'Airbnb',
+      pipes: [],
+    });
   });
 });

front/src/components/table/table-header/__tests__/TableHeader.test.tsx

@@ -3,7 +3,7 @@ import { fireEvent, render } from '@testing-library/react';
 import { RegularTableHeader } from '../__stories__/TableHeader.stories';
 
 it('Checks the TableHeader renders', async () => {
-  const { getByText } = render(<RegularTableHeader />);
+  const { getByText, queryByText } = render(<RegularTableHeader />);
 
   const sortDropdownButton = getByText('Sort');
   fireEvent.click(sortDropdownButton);
@@ -12,4 +12,9 @@ it('Checks the TableHeader renders', async () => {
   fireEvent.click(sortByCreatedAt);
 
   expect(getByText('Created at')).toBeDefined();
+
+  const cancelButton = getByText('Cancel');
+  fireEvent.click(cancelButton);
+
+  expect(queryByText('Created at')).toBeNull();
 });

front/src/interfaces/__tests__/company.interface.test.ts

@@ -0,0 +1,84 @@
+import {
+  mapToGqlCompany,
+  mapToCompany,
+  Company,
+  GraphqlMutationCompany,
+  GraphqlQueryCompany,
+} from '../company.interface';
+
+describe('Company mappers', () => {
+  it('should map GraphQl Company to Company', () => {
+    const now = new Date();
+    now.setMilliseconds(0);
+    const graphQLCompany = {
+      id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6b',
+      name: 'ACME',
+      domain_name: 'exmaple.com',
+      created_at: now.toUTCString(),
+      employees: '10',
+      address: '1 Infinite Loop, 95014 Cupertino, California, USA',
+      account_owner: {
+        id: '7af20dea-0412-4c4c-8b13-d6f0e6e09e87',
+        email: 'john@example.com',
+        display_name: 'John Doe',
+        __typename: 'User',
+      },
+      pipes: [
+        {
+          id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6c',
+          name: 'Pipe 1',
+          icon: '!',
+          __typename: 'Pipe',
+        },
+      ],
+      __typename: 'companies',
+    } satisfies GraphqlQueryCompany;
+
+    const company = mapToCompany(graphQLCompany);
+    expect(company).toStrictEqual({
+      id: graphQLCompany.id,
+      name: graphQLCompany.name,
+      domainName: graphQLCompany.domain_name,
+      creationDate: new Date(now.toUTCString()),
+      employees: graphQLCompany.employees,
+      address: graphQLCompany.address,
+      accountOwner: {
+        id: '7af20dea-0412-4c4c-8b13-d6f0e6e09e87',
+        email: 'john@example.com',
+        displayName: 'John Doe',
+        workspaceMember: undefined,
+      },
+      pipes: [],
+    } satisfies Company);
+  });
+
+  it('should map Company to GraphQLCompany', () => {
+    const now = new Date();
+    now.setMilliseconds(0);
+    const company = {
+      id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6b',
+      name: 'ACME',
+      domainName: 'example.com',
+      employees: '10',
+      address: '1 Infinite Loop, 95014 Cupertino, California, USA',
+      pipes: [],
+      accountOwner: {
+        id: '522d4ec4-c46b-4360-a0a7-df8df170be81',
+        email: 'john@example.com',
+        displayName: 'John Doe',
+      },
+      creationDate: now,
+    };
+    const graphQLCompany = mapToGqlCompany(company);
+    expect(graphQLCompany).toStrictEqual({
+      id: company.id,
+      name: company.name,
+      domain_name: company.domainName,
+      created_at: now.toUTCString(),
+      employees: company.employees,
+      address: company.address,
+      account_owner_id: '522d4ec4-c46b-4360-a0a7-df8df170be81',
+      __typename: 'companies',
+    } satisfies GraphqlMutationCompany);
+  });
+});

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

@@ -0,0 +1,80 @@
+import {
+  mapToGqlPerson,
+  mapToPerson,
+  Person,
+  GraphqlMutationPerson,
+  GraphqlQueryPerson,
+} from '../person.interface';
+
+describe('Person mappers', () => {
+  it('should map GraphqlPerson to Person', () => {
+    const now = new Date();
+    now.setMilliseconds(0);
+    const graphQLPerson = {
+      id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6b',
+      firstname: 'John',
+      lastname: 'Doe',
+      created_at: now.toUTCString(),
+      email: 'john.doe@gmail.com',
+      phone: '+1 (555) 123-4567',
+      city: 'Paris',
+      company: {
+        id: '7af20dea-0412-4c4c-8b13-d6f0e6e09e87',
+        name: 'John Doe',
+        __typename: 'Company',
+      },
+      __typename: 'people',
+    } satisfies GraphqlQueryPerson;
+
+    const person = mapToPerson(graphQLPerson);
+    expect(person).toStrictEqual({
+      id: graphQLPerson.id,
+      firstname: graphQLPerson.firstname,
+      lastname: graphQLPerson.lastname,
+      creationDate: new Date(now.toUTCString()),
+      email: graphQLPerson.email,
+      city: graphQLPerson.city,
+      phone: graphQLPerson.phone,
+      company: {
+        id: '7af20dea-0412-4c4c-8b13-d6f0e6e09e87',
+        accountOwner: undefined,
+        address: undefined,
+        creationDate: undefined,
+        domainName: undefined,
+        employees: undefined,
+        name: 'John Doe',
+        pipes: [],
+      },
+    } satisfies Person);
+  });
+
+  it('should map Person to GraphQlPerson', () => {
+    const now = new Date();
+    now.setMilliseconds(0);
+    const person = {
+      id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6b',
+      firstname: 'John',
+      lastname: 'Doe',
+      creationDate: new Date(now.toUTCString()),
+      email: 'john.doe@gmail.com',
+      phone: '+1 (555) 123-4567',
+      city: 'Paris',
+      company: {
+        id: '7af20dea-0412-4c4c-8b13-d6f0e6e09e87',
+      },
+    } satisfies Person;
+
+    const graphQLPerson = mapToGqlPerson(person);
+    expect(graphQLPerson).toStrictEqual({
+      id: person.id,
+      firstname: person.firstname,
+      lastname: person.lastname,
+      created_at: now.toUTCString(),
+      email: person.email,
+      city: person.city,
+      phone: person.phone,
+      company_id: '7af20dea-0412-4c4c-8b13-d6f0e6e09e87',
+      __typename: 'people',
+    } satisfies GraphqlMutationPerson);
+  });
+});

front/src/interfaces/__tests__/user.interface.test.ts

@@ -0,0 +1,71 @@
+import {
+  mapToGqlUser,
+  mapToUser,
+  User,
+  GraphqlMutationUser,
+  GraphqlQueryUser,
+} from '../user.interface';
+
+describe('User mappers', () => {
+  it('should map GraphqlUser to User', () => {
+    const now = new Date();
+    now.setMilliseconds(0);
+    const graphQLUser = {
+      id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6b',
+      display_name: 'John Doe',
+      email: 'john.doe@gmail.com',
+      workspace_member: {
+        id: '7af20dea-0412-4c4c-8b13-d6f0e6e09e88',
+        workspace: {
+          id: '7af20dea-0412-4c4c-8b13-d6f0e6e09e89',
+          display_name: 'John Doe',
+          __typename: 'workspace',
+        },
+        __typename: 'workspace_members',
+      },
+      __typename: 'users',
+    } satisfies GraphqlQueryUser;
+
+    const User = mapToUser(graphQLUser);
+    expect(User).toStrictEqual({
+      id: graphQLUser.id,
+      displayName: graphQLUser.display_name,
+      email: graphQLUser.email,
+      workspaceMember: {
+        id: graphQLUser.workspace_member.id,
+        workspace: {
+          id: graphQLUser.workspace_member.workspace.id,
+          displayName: graphQLUser.workspace_member.workspace.display_name,
+          domainName: undefined,
+          logo: undefined,
+        },
+      },
+    } satisfies User);
+  });
+
+  it('should map User to GraphQlUser', () => {
+    const now = new Date();
+    now.setMilliseconds(0);
+    const user = {
+      id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6b',
+      displayName: 'John Doe',
+      email: 'john.doe@gmail.com',
+      workspaceMember: {
+        id: '7af20dea-0412-4c4c-8b13-d6f0e6e09e88',
+        workspace: {
+          id: '7af20dea-0412-4c4c-8b13-d6f0e6e09e89',
+          displayName: 'John Doe',
+        },
+      },
+    } satisfies User;
+
+    const graphQLUser = mapToGqlUser(user);
+    expect(graphQLUser).toStrictEqual({
+      id: user.id,
+      display_name: user.displayName,
+      email: user.email,
+      workspace_member_id: user.workspaceMember.id,
+      __typename: 'users',
+    } satisfies GraphqlMutationUser);
+  });
+});

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

@@ -1,112 +0,0 @@
-import { mapGqlCompany, mapCompany } from './company.interface';
-
-describe('mapCompany', () => {
-  it('should map company', () => {
-    const now = new Date();
-    now.setMilliseconds(0);
-    const company = mapCompany({
-      id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6b',
-      name: 'ACME',
-      domain_name: 'exmaple.com',
-      created_at: now.toUTCString(),
-      account_owner: {
-        id: '7af20dea-0412-4c4c-8b13-d6f0e6e09e87',
-        email: 'john@example.com',
-        displayName: 'John Doe',
-        __typename: 'User',
-      },
-      employees: 10,
-      address: '1 Infinite Loop, 95014 Cupertino, California, USA',
-      __typename: 'Company',
-    });
-    expect(company.id).toBe('7dfbc3f7-6e5e-4128-957e-8d86808cdf6b');
-    expect(company.name).toBe('ACME');
-    expect(company.domain_name).toBe('exmaple.com');
-    expect(company.creationDate).toEqual(now);
-    expect(company.accountOwner?.id).toBe(
-      '7af20dea-0412-4c4c-8b13-d6f0e6e09e87',
-    );
-    expect(company.accountOwner?.email).toBe('john@example.com');
-    expect(company.accountOwner?.displayName).toBe('John Doe');
-    expect(company.employees).toBe(10);
-    expect(company.address).toBe(
-      '1 Infinite Loop, 95014 Cupertino, California, USA',
-    );
-  });
-
-  it('should map company with no account owner', () => {
-    const now = new Date();
-    now.setMilliseconds(0);
-    const company = mapCompany({
-      id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6b',
-      name: 'ACME',
-      domain_name: 'exmaple.com',
-      created_at: now.toUTCString(),
-      employees: 10,
-      address: '1 Infinite Loop, 95014 Cupertino, California, USA',
-      __typename: 'Company',
-    });
-    expect(company.id).toBe('7dfbc3f7-6e5e-4128-957e-8d86808cdf6b');
-    expect(company.name).toBe('ACME');
-    expect(company.domain_name).toBe('exmaple.com');
-    expect(company.creationDate).toEqual(now);
-    expect(company.accountOwner).toBeNull();
-    expect(company.employees).toBe(10);
-    expect(company.address).toBe(
-      '1 Infinite Loop, 95014 Cupertino, California, USA',
-    );
-  });
-
-  it('should map company back', () => {
-    const now = new Date();
-    now.setMilliseconds(0);
-    const company = mapGqlCompany({
-      id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6b',
-      name: 'ACME',
-      domain_name: 'exmaple.com',
-      employees: 10,
-      address: '1 Infinite Loop, 95014 Cupertino, California, USA',
-      opportunities: [],
-      accountOwner: {
-        id: '522d4ec4-c46b-4360-a0a7-df8df170be81',
-        email: 'john@example.com',
-        displayName: 'John Doe',
-      },
-      creationDate: now,
-    });
-    expect(company.id).toBe('7dfbc3f7-6e5e-4128-957e-8d86808cdf6b');
-    expect(company.name).toBe('ACME');
-    expect(company.domain_name).toBe('exmaple.com');
-    expect(company.created_at).toEqual(now.toUTCString());
-    expect(company.account_owner_id).toBe(
-      '522d4ec4-c46b-4360-a0a7-df8df170be81',
-    );
-    expect(company.employees).toBe(10);
-    expect(company.address).toBe(
-      '1 Infinite Loop, 95014 Cupertino, California, USA',
-    );
-  });
-
-  it('should map company with no account owner back', () => {
-    const now = new Date();
-    now.setMilliseconds(0);
-    const company = mapGqlCompany({
-      id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6b',
-      name: 'ACME',
-      domain_name: 'exmaple.com',
-      employees: 10,
-      address: '1 Infinite Loop, 95014 Cupertino, California, USA',
-      opportunities: [],
-      creationDate: now,
-    });
-    expect(company.id).toBe('7dfbc3f7-6e5e-4128-957e-8d86808cdf6b');
-    expect(company.name).toBe('ACME');
-    expect(company.domain_name).toBe('exmaple.com');
-    expect(company.created_at).toEqual(now.toUTCString());
-    expect(company.account_owner_id).toBeUndefined();
-    expect(company.employees).toBe(10);
-    expect(company.address).toBe(
-      '1 Infinite Loop, 95014 Cupertino, California, USA',
-    );
-  });
-});

front/src/interfaces/company.interface.ts

@@ -1,75 +1,72 @@
-import { GraphqlQueryUser, User } from './user.interface';
-
-export interface Opportunity {
-  id: string;
-  name: string;
-  icon: string;
-}
+import { Pipe } from 'stream';
+import { GraphqlQueryUser, User, mapToUser } from './user.interface';
+import { GraphqlQueryPipe } from './pipe.interface';
 
 export type Company = {
   id: string;
-  name: string;
-  domain_name: string;
-  employees: number;
-  address: string;
-  opportunities: Opportunity[];
+  name?: string;
+  domainName?: string;
+  employees?: string;
+  address?: string;
+
+  creationDate?: Date;
+
+  pipes?: Pipe[];
   accountOwner?: User | null;
-  creationDate: Date;
 };
 
 export type GraphqlQueryCompany = {
   id: string;
-  name: string;
-  domain_name: string;
+  name?: string;
+  domain_name?: string;
+  employees?: string;
+  address?: string;
+
+  created_at?: string;
+
   account_owner?: GraphqlQueryUser | null;
-  employees: number;
-  address: string;
-  created_at: string;
+  pipes?: GraphqlQueryPipe[] | null;
   __typename: string;
 };
 
 export type GraphqlMutationCompany = {
   id: string;
-  name: string;
-  domain_name: string;
+  name?: string;
+  domain_name?: string;
+  employees?: string;
+  address?: string;
+
+  created_at?: string;
+
   account_owner_id?: string;
-  employees: number;
-  address: string;
-  created_at: string;
-  account_owner?: GraphqlQueryUser | null;
+  __typename: string;
 };
 
-export const mapCompany = (company: GraphqlQueryCompany): Company => ({
+export const mapToCompany = (company: GraphqlQueryCompany): Company => ({
   id: company.id,
   employees: company.employees,
   name: company.name,
   address: company.address,
-  domain_name: company.domain_name,
+  domainName: company.domain_name,
+  creationDate: company.created_at ? new Date(company.created_at) : undefined,
+
   accountOwner: company.account_owner
-    ? {
-        id: company.account_owner.id,
-        email: company.account_owner.email,
-        displayName: company.account_owner.displayName,
-      }
-    : null,
-  creationDate: new Date(company.created_at),
-  opportunities: [],
+    ? mapToUser(company.account_owner)
+    : company.account_owner,
+  pipes: [],
 });
 
-export const mapGqlCompany = (company: Company): GraphqlMutationCompany => ({
+export const mapToGqlCompany = (company: Company): GraphqlMutationCompany => ({
+  id: company.id,
   name: company.name,
-  domain_name: company.domain_name,
-  created_at: company.creationDate.toUTCString(),
-  account_owner_id: company.accountOwner?.id,
+  domain_name: company.domainName,
   address: company.address,
   employees: company.employees,
-  id: company.id,
-  account_owner: company.accountOwner
-    ? {
-        id: company.accountOwner?.id,
-        email: company.accountOwner?.email,
-        displayName: company.accountOwner?.displayName,
-        __typename: 'users',
-      }
-    : null,
+
+  created_at: company.creationDate
+    ? company.creationDate.toUTCString()
+    : undefined,
+
+  account_owner_id: company.accountOwner?.id,
+  __typename: 'companies',
 });

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

@@ -1,54 +0,0 @@
-import { mapGqlPerson, mapPerson } from './person.interface';
-
-describe('mapPerson', () => {
-  it('should map person', () => {
-    const person = mapPerson({
-      id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6b',
-      firstname: 'John',
-      lastname: 'Doe',
-      email: '',
-      phone: '',
-      city: '',
-      created_at: '',
-      company: {
-        __typename: '',
-        id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6b',
-        name: '',
-        domain_name: '',
-        employees: 0,
-        address: '',
-        created_at: '',
-        account_owner: null,
-      },
-      __typename: '',
-    });
-    expect(person.firstname).toBe('John');
-  });
-
-  it('should map person back', () => {
-    const person = mapGqlPerson({
-      id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6b',
-      firstname: 'John',
-      lastname: 'Doe',
-      email: '',
-      phone: '',
-      city: '',
-      company: {
-        id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6b',
-        name: 'Test',
-        domain_name: '',
-        opportunities: [],
-        employees: 0,
-        address: '',
-        creationDate: new Date(),
-      },
-      creationDate: new Date(),
-      pipe: {
-        id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6c',
-        name: '',
-        icon: '',
-      },
-    });
-    expect(person.firstname).toBe('John');
-  });
-});

front/src/interfaces/person.interface.ts

@@ -1,64 +1,77 @@
-import { Company, GraphqlQueryCompany, mapCompany } from './company.interface';
+import {
+  Company,
+  GraphqlQueryCompany,
+  mapToCompany,
+} from './company.interface';
 import { Pipe } from './pipe.interface';
 
 export type Person = {
   id: string;
-  firstname: string;
-  lastname: string;
-  picture?: string;
-  email: string;
-  company: Company | null;
-  phone: string;
-  creationDate: Date;
-  pipe: Pipe | null;
-  city: string;
+  firstname?: string;
+  lastname?: string;
+  picture?: string | null;
+  email?: string;
+  phone?: string;
+  city?: string;
+
+  creationDate?: Date;
+
+  company?: Company | null;
+  pipes?: Pipe[] | null;
 };
 
 export type GraphqlQueryPerson = {
-  city: string;
-  company: GraphqlQueryCompany | null;
-  created_at: string;
-  email: string;
-  firstname: string;
   id: string;
-  lastname: string;
-  phone: string;
+  firstname?: string;
+  lastname?: string;
+  city?: string;
+  email?: string;
+  phone?: string;
+
+  created_at?: string;
+
+  company?: GraphqlQueryCompany | null;
+
   __typename: string;
 };
 
 export type GraphqlMutationPerson = {
-  city: string;
-  company_id?: string;
-  created_at: string;
-  email: string;
-  firstname: string;
   id: string;
-  lastname: string;
-  phone: string;
+  firstname?: string;
+  lastname?: string;
+  email?: string;
+  phone?: string;
+  city?: string;
+  created_at?: string;
+  company_id?: string;
   __typename: string;
 };
 
-export const mapPerson = (person: GraphqlQueryPerson): Person => ({
+export const mapToPerson = (person: GraphqlQueryPerson): Person => ({
   id: person.id,
+  firstname: person.firstname,
+  lastname: person.lastname,
   email: person.email,
   phone: person.phone,
   city: person.city,
-  firstname: person.firstname,
-  lastname: person.lastname,
-  creationDate: new Date(person.created_at),
-  pipe: {
-    name: 'coucou',
-    id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6b',
-    icon: '💰',
-  },
-  company: person.company ? mapCompany(person.company) : null,
+
+  creationDate: person.created_at ? new Date(person.created_at) : undefined,
+
+  company: person.company ? mapToCompany(person.company) : null,
 });
 
-export const mapGqlPerson = (person: Person): GraphqlMutationPerson => ({
-  ...(person as Omit<Person, 'company'>),
+export const mapToGqlPerson = (person: Person): GraphqlMutationPerson => ({
+  id: person.id,
   firstname: person.firstname,
   lastname: person.lastname,
-  created_at: person.creationDate.toUTCString(),
+  email: person.email,
+  phone: person.phone,
+  city: person.city,
+
+  created_at: person.creationDate
+    ? person.creationDate.toUTCString()
+    : undefined,
+
   company_id: person.company?.id,
-  __typename: 'People',
+  __typename: 'people',
 });

front/src/interfaces/pipe.interface.ts

@@ -1,5 +1,12 @@
 export interface Pipe {
   id: string;
-  name: string;
-  icon: string;
+  name?: string;
+  icon?: string | null;
+}
+
+export interface GraphqlQueryPipe {
+  id: string;
+  name?: string;
+  icon?: string | null;
+  __typename: string;
 }

front/src/interfaces/user.interface.ts

@@ -1,42 +1,45 @@
 import {
   GraphqlQueryWorkspaceMember,
   WorkspaceMember,
-} from './workspace.interface';
+  mapToWorkspaceMember,
+} from './workspace_member.interface';
+
+export interface User {
+  id: string;
+  email?: string;
+  displayName?: string;
+  workspaceMember?: WorkspaceMember;
+}
 
 export type GraphqlQueryUser = {
   id: string;
-  email: string;
-  displayName: string;
+  email?: string;
+  display_name?: string;
   workspace_member?: GraphqlQueryWorkspaceMember;
   __typename: string;
 };
 
-export interface User {
+export type GraphqlMutationUser = {
   id: string;
-  email: string;
-  displayName: string;
-  workspace_member?: WorkspaceMember;
-}
-
-export type PartialUser = Partial<User> &
-  Pick<User, 'id' | 'displayName' | 'email'>;
-
-export const mapUser = (user: GraphqlQueryUser): User => {
-  const mappedUser = {
-    id: user.id,
-    email: user.email,
-    displayName: user.displayName,
-  } as User;
-  if (user.workspace_member) {
-    mappedUser['workspace_member'] = {
-      workspace: {
-        id: user.workspace_member.workspace.id,
-        displayName: user.workspace_member.workspace.display_name,
-        domainName: user.workspace_member.workspace.domain_name,
-        logo: user.workspace_member.workspace.logo,
-      },
-    };
-  }
-
-  return mappedUser;
+  email?: string;
+  display_name?: string;
+  workspace_member_id?: string;
+  __typename: string;
 };
+
+export const mapToUser = (user: GraphqlQueryUser): User => ({
+  id: user.id,
+  email: user.email,
+  displayName: user.display_name,
+  workspaceMember: user.workspace_member
+    ? mapToWorkspaceMember(user.workspace_member)
+    : user.workspace_member,
+});
+
+export const mapToGqlUser = (user: User): GraphqlMutationUser => ({
+  id: user.id,
+  email: user.email,
+  display_name: user.displayName,
+  workspace_member_id: user.workspaceMember?.id,
+  __typename: 'users',
+});

front/src/interfaces/workspace.interface.ts

@@ -1,22 +1,41 @@
 export interface Workspace {
   id: string;
-  domainName: string;
-  displayName: string;
-  logo: string;
-}
-
-export interface WorkspaceMember {
-  workspace: Workspace;
+  domainName?: string;
+  displayName?: string;
+  logo?: string | null;
 }
 
 export type GraphqlQueryWorkspace = {
   id: string;
-  display_name: string;
-  domain_name: string;
-  logo: string;
+  display_name?: string;
+  domain_name?: string;
+  logo?: string | null;
   __typename: string;
 };
-export type GraphqlQueryWorkspaceMember = {
-  workspace: GraphqlQueryWorkspace;
+
+export type GraphqlMutationWorkspace = {
+  id: string;
+  display_name?: string;
+  domain_name?: string;
+  logo?: string | null;
   __typename: string;
 };
+
+export const mapToWorkspace = (
+  workspace: GraphqlQueryWorkspace,
+): Workspace => ({
+  id: workspace.id,
+  domainName: workspace.domain_name,
+  displayName: workspace.display_name,
+  logo: workspace.logo,
+});
+
+export const mapToGqlWorkspace = (
+  workspace: Workspace,
+): GraphqlMutationWorkspace => ({
+  id: workspace.id,
+  domain_name: workspace.domainName,
+  display_name: workspace.displayName,
+  logo: workspace.logo,
+  __typename: 'workspaces',
+});

front/src/interfaces/workspace_member.interface.ts

@@ -0,0 +1,39 @@
+import {
+  Workspace,
+  GraphqlQueryWorkspace,
+  mapToWorkspace,
+} from './workspace.interface';
+
+export interface WorkspaceMember {
+  id: string;
+  workspace: Workspace;
+}
+
+export type GraphqlQueryWorkspaceMember = {
+  id: string;
+  workspace: GraphqlQueryWorkspace;
+  __typename: string;
+};
+
+export type GraphqlMutationWorkspaceMember = {
+  id: string;
+  workspace_id: string;
+  __typename: string;
+};
+
+export const mapToWorkspaceMember = (
+  workspaceMember: GraphqlQueryWorkspaceMember,
+): WorkspaceMember => ({
+  id: workspaceMember.id,
+  workspace: workspaceMember.workspace
+    ? mapToWorkspace(workspaceMember.workspace)
+    : workspaceMember.workspace,
+});
+
+export const mapToGqlWorkspaceMember = (
+  workspaceMember: WorkspaceMember,
+): GraphqlMutationWorkspaceMember => ({
+  id: workspaceMember.id,
+  workspace_id: workspaceMember.workspace?.id,
+  __typename: 'workspace_members',
+});

front/src/layout/AppLayout.tsx

@@ -27,7 +27,7 @@ function AppLayout({ children, user }: OwnProps) {
   return (
     <ThemeProvider theme={lightTheme}>
       <StyledLayout>
-        <Navbar user={user} workspace={user?.workspace_member?.workspace} />
+        <Navbar user={user} workspace={user?.workspaceMember?.workspace} />
         <StyledRightContainer>{children}</StyledRightContainer>
       </StyledLayout>
     </ThemeProvider>

front/src/layout/navbar/WorkspaceContainer.tsx

@@ -20,7 +20,7 @@ const StyledContainer = styled.button`
 `;
 
 type StyledLogoProps = {
-  logo: string;
+  logo?: string | null;
 };
 
 const StyledLogo = styled.div<StyledLogoProps>`

front/src/layout/navbar/__stories__/Navbar.stories.tsx

@@ -20,7 +20,8 @@ export const NavbarOnCompanies = () => {
             id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6b',
             email: 'charles@twenty.com',
             displayName: 'Charles Bochet',
-            workspace_member: {
+            workspaceMember: {
+              id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6d',
               workspace: {
                 id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6b',
                 displayName: 'Claap',

front/src/pages/companies/Companies.tsx

@@ -11,7 +11,7 @@ import {
   useCompaniesQuery,
 } from '../../services/companies';
 import Table from '../../components/table/Table';
-import { Company, mapCompany } from '../../interfaces/company.interface';
+import { Company, mapToCompany } from '../../interfaces/company.interface';
 import {
   useCompaniesColumns,
   availableFilters,
@@ -61,7 +61,7 @@ function Companies() {
   useEffect(() => {
     if (!loading) {
       if (data) {
-        setInternalData(data.companies.map(mapCompany));
+        setInternalData(data.companies.map(mapToCompany));
       }
     }
   }, [loading, setInternalData, data]);
@@ -70,10 +70,10 @@ function Companies() {
     const newCompany: Company = {
       id: uuidv4(),
       name: '',
-      domain_name: '',
-      employees: 0,
+      domainName: '',
+      employees: '0',
       address: '',
-      opportunities: [],
+      pipes: [],
       creationDate: new Date(),
       accountOwner: null,
     };

front/src/pages/companies/__tests__/Companies.test.tsx

@@ -18,7 +18,7 @@ jest.mock('../../../apollo', () => {
         variables: GraphqlMutationCompany;
       }) => {
         const gqlCompany = arg.variables as unknown as GraphqlQueryCompany;
-        return { data: companyInterface.mapCompany(gqlCompany) };
+        return { data: companyInterface.mapToCompany(gqlCompany) };
       },
     },
   };

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

@@ -1,5 +1,5 @@
 import { CellContext, createColumnHelper } from '@tanstack/react-table';
-import { Company, mapCompany } from '../../interfaces/company.interface';
+import { Company, mapToCompany } from '../../interfaces/company.interface';
 import { updateCompany } from '../../services/companies';
 import ColumnHead from '../../components/table/ColumnHead';
 import CompanyChip from '../../components/chips/CompanyChip';
@@ -29,7 +29,7 @@ import {
 } from '../../services/search/search';
 import EditableDate from '../../components/table/editable-cell/EditableDate';
 import EditableRelation from '../../components/table/editable-cell/EditableRelation';
-import { User, mapUser } from '../../interfaces/user.interface';
+import { User, mapToUser } from '../../interfaces/user.interface';
 import { useMemo } from 'react';
 import { SelectAllCheckbox } from '../../components/table/SelectAllCheckbox';
 import Checkbox from '../../components/form/Checkbox';
@@ -79,7 +79,7 @@ export const availableFilters = [
       }),
       resultMapper: (company) => ({
         render: (company) => company.name,
-        value: mapCompany(company),
+        value: mapToCompany(company),
       }),
     },
     selectedValueRender: (company) => company.name,
@@ -110,24 +110,24 @@ export const availableFilters = [
         name: { _ilike: `%${searchInput}%` },
       }),
       resultMapper: (company) => ({
-        render: (company) => company.domain_name,
-        value: mapCompany(company),
+        render: (company) => company.domainName,
+        value: mapToCompany(company),
       }),
     },
-    selectedValueRender: (company) => company.domain_name,
+    selectedValueRender: (company) => company.domainName,
     operands: [
       {
         label: 'Equal',
         id: 'equal',
         whereTemplate: (company) => ({
-          domain_name: { _eq: company.domain_name },
+          domain_name: { _eq: company.domainName },
         }),
       },
       {
         label: 'Not equal',
         id: 'not-equal',
         whereTemplate: (company) => ({
-          _not: { domain_name: { _eq: company.domain_name } },
+          _not: { domain_name: { _eq: company.domainName } },
         }),
       },
     ],
@@ -163,9 +163,9 @@ export const useCompaniesColumns = () => {
         ),
         cell: (props) => (
           <EditableChip
-            value={props.row.original.name}
+            value={props.row.original.name || ''}
             placeholder="Name"
-            picture={`https://www.google.com/s2/favicons?domain=${props.row.original.domain_name}&sz=256`}
+            picture={`https://www.google.com/s2/favicons?domain=${props.row.original.domainName}&sz=256`}
             changeHandler={(value: string) => {
               const company = props.row.original;
               company.name = value;
@@ -181,23 +181,23 @@ export const useCompaniesColumns = () => {
         ),
         cell: (props) => (
           <EditableText
-            content={props.row.original.employees.toFixed(0)}
+            content={props.row.original.employees || ''}
             changeHandler={(value) => {
               const company = props.row.original;
-              company.employees = parseInt(value);
+              company.employees = value;
               updateCompany(company);
             }}
           />
         ),
       }),
-      columnHelper.accessor('domain_name', {
+      columnHelper.accessor('domainName', {
         header: () => <ColumnHead viewName="URL" viewIcon={<FaLink />} />,
         cell: (props) => (
           <EditableText
-            content={props.row.original.domain_name}
+            content={props.row.original.domainName || ''}
             changeHandler={(value) => {
               const company = props.row.original;
-              company.domain_name = value;
+              company.domainName = value;
               updateCompany(company);
             }}
           />
@@ -207,7 +207,7 @@ export const useCompaniesColumns = () => {
         header: () => <ColumnHead viewName="Address" viewIcon={<FaMapPin />} />,
         cell: (props) => (
           <EditableText
-            content={props.row.original.address}
+            content={props.row.original.address || ''}
             changeHandler={(value) => {
               const company = props.row.original;
               company.address = value;
@@ -222,7 +222,7 @@ export const useCompaniesColumns = () => {
         ),
         cell: (props) => (
           <EditableDate
-            value={props.row.original.creationDate}
+            value={props.row.original.creationDate || new Date()}
             changeHandler={(value: Date) => {
               const company = props.row.original;
               company.creationDate = value;
@@ -244,7 +244,7 @@ export const useCompaniesColumns = () => {
               accountOwner: User,
             ): PersonChipPropsType => {
               return {
-                name: accountOwner.displayName,
+                name: accountOwner.displayName || '',
               };
             }}
             changeHandler={(relation: User) => {
@@ -268,7 +268,7 @@ export const useCompaniesColumns = () => {
                 }),
                 resultMapper: (accountOwner) => ({
                   render: (accountOwner) => accountOwner.displayName,
-                  value: mapUser(accountOwner),
+                  value: mapToUser(accountOwner),
                 }),
               } satisfies SearchConfigType<User>
             }

front/src/pages/people/People.tsx

@@ -8,7 +8,7 @@ import {
   availableSorts,
   usePeopleColumns,
 } from './people-table';
-import { Person, mapPerson } from '../../interfaces/person.interface';
+import { Person, mapToPerson } from '../../interfaces/person.interface';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import {
   PeopleSelectedSortType,
@@ -58,7 +58,7 @@ function People() {
   useEffect(() => {
     if (!loading) {
       if (data) {
-        setInternalData(data.people.map(mapPerson));
+        setInternalData(data.people.map(mapToPerson));
       }
     }
   }, [loading, setInternalData, data]);
@@ -71,7 +71,7 @@ function People() {
       email: '',
       phone: '',
       company: null,
-      pipe: null,
+      pipes: [],
       creationDate: new Date(),
       city: '',
     };

front/src/pages/people/__tests__/People.test.tsx

@@ -18,7 +18,7 @@ jest.mock('../../../apollo', () => {
         variables: GraphqlMutationPerson;
       }) => {
         const gqlPerson = arg.variables as unknown as GraphqlQueryPerson;
-        return { data: personInterface.mapPerson(gqlPerson) };
+        return { data: personInterface.mapToPerson(gqlPerson) };
       },
     },
   };

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

@@ -14,7 +14,7 @@ import Checkbox from '../../components/form/Checkbox';
 import CompanyChip, {
   CompanyChipPropsType,
 } from '../../components/chips/CompanyChip';
-import { Person, mapPerson } from '../../interfaces/person.interface';
+import { Person, mapToPerson } from '../../interfaces/person.interface';
 import EditableText from '../../components/table/editable-cell/EditableText';
 import {
   FilterConfigType,
@@ -26,7 +26,7 @@ import {
   SEARCH_COMPANY_QUERY,
   SEARCH_PEOPLE_QUERY,
 } from '../../services/search/search';
-import { Company, mapCompany } from '../../interfaces/company.interface';
+import { Company, mapToCompany } from '../../interfaces/company.interface';
 import EditablePhone from '../../components/table/editable-cell/EditablePhone';
 import EditableFullName from '../../components/table/editable-cell/EditableFullName';
 import EditableDate from '../../components/table/editable-cell/EditableDate';
@@ -93,7 +93,7 @@ export const fullnameFilter = {
     }),
     resultMapper: (person) => ({
       render: (person) => `${person.firstname} ${person.lastname}`,
-      value: mapPerson(person),
+      value: mapToPerson(person),
     }),
   },
   selectedValueRender: (person) => `${person.firstname} ${person.lastname}`,
@@ -133,11 +133,11 @@ export const companyFilter = {
       name: { _ilike: `%${searchInput}%` },
     }),
     resultMapper: (data) => ({
-      value: mapCompany(data),
+      value: mapToCompany(data),
       render: (company) => company.name,
     }),
   },
-  selectedValueRender: (company) => company.name,
+  selectedValueRender: (company) => company.name || '',
   operands: [
     {
       label: 'Equal',
@@ -167,7 +167,7 @@ export const emailFilter = {
     }),
     resultMapper: (person) => ({
       render: (person) => person.email,
-      value: mapPerson(person),
+      value: mapToPerson(person),
     }),
   },
   operands: [
@@ -186,7 +186,7 @@ export const emailFilter = {
       }),
     },
   ],
-  selectedValueRender: (person) => person.email,
+  selectedValueRender: (person) => person.email || '',
 } satisfies FilterConfigType<Person, Person>;
 
 export const cityFilter = {
@@ -200,7 +200,7 @@ export const cityFilter = {
     }),
     resultMapper: (person) => ({
       render: (person) => person.city,
-      value: mapPerson(person),
+      value: mapToPerson(person),
     }),
   },
   operands: [
@@ -219,7 +219,7 @@ export const cityFilter = {
       }),
     },
   ],
-  selectedValueRender: (person) => person.email,
+  selectedValueRender: (person) => person.email || '',
 } satisfies FilterConfigType<Person, Person>;
 
 export const availableFilters = [
@@ -256,8 +256,8 @@ export const usePeopleColumns = () => {
         header: () => <ColumnHead viewName="People" viewIcon={<FaRegUser />} />,
         cell: (props) => (
           <EditableFullName
-            firstname={props.row.original.firstname}
-            lastname={props.row.original.lastname}
+            firstname={props.row.original.firstname || ''}
+            lastname={props.row.original.lastname || ''}
             changeHandler={(firstName: string, lastName: string) => {
               const person = props.row.original;
               person.firstname = firstName;
@@ -272,7 +272,7 @@ export const usePeopleColumns = () => {
         cell: (props) => (
           <EditableText
             placeholder="Email"
-            content={props.row.original.email}
+            content={props.row.original.email || ''}
             changeHandler={(value: string) => {
               const person = props.row.original;
               person.email = value;
@@ -292,8 +292,8 @@ export const usePeopleColumns = () => {
             ChipComponent={CompanyChip}
             chipComponentPropsMapper={(company): CompanyChipPropsType => {
               return {
-                name: company.name,
-                picture: `https://www.google.com/s2/favicons?domain=${company.domain_name}&sz=256`,
+                name: company.name || '',
+                picture: `https://www.google.com/s2/favicons?domain=${company.domainName}&sz=256`,
               };
             }}
             changeHandler={(relation) => {
@@ -313,7 +313,7 @@ export const usePeopleColumns = () => {
                 }),
                 resultMapper: (company) => ({
                   render: (company) => company.name,
-                  value: mapCompany(company),
+                  value: mapToCompany(company),
                 }),
               } satisfies SearchConfigType<Company>
             }
@@ -325,7 +325,7 @@ export const usePeopleColumns = () => {
         cell: (props) => (
           <EditablePhone
             placeholder="Phone"
-            value={props.row.original.phone}
+            value={props.row.original.phone || ''}
             changeHandler={(value: string) => {
               const person = props.row.original;
               person.phone = value;
@@ -340,7 +340,7 @@ export const usePeopleColumns = () => {
         ),
         cell: (props) => (
           <EditableDate
-            value={props.row.original.creationDate}
+            value={props.row.original.creationDate || new Date()}
             changeHandler={(value: Date) => {
               const person = props.row.original;
               person.creationDate = value;
@@ -355,7 +355,7 @@ export const usePeopleColumns = () => {
           <EditableText
             editModeHorizontalAlign="right"
             placeholder="City"
-            content={props.row.original.city}
+            content={props.row.original.city || ''}
             changeHandler={(value: string) => {
               const person = props.row.original;
               person.city = value;

front/src/services/companies/__tests__/select.test.ts

@@ -1,5 +1,5 @@
-import { reduceSortsToOrderBy } from '../../components/table/table-header/helpers';
-import { CompaniesSelectedSortType } from './select';
+import { reduceSortsToOrderBy } from '../../../components/table/table-header/helpers';
+import { CompaniesSelectedSortType } from '../select';
 
 describe('reduceSortsToOrderBy', () => {
   it('should return an array of objects with the id as key and the order as value', () => {

front/src/services/companies/update.ts

@@ -1,5 +1,5 @@
 import { FetchResult, gql } from '@apollo/client';
-import { Company, mapGqlCompany } from '../../interfaces/company.interface';
+import { Company, mapToGqlCompany } from '../../interfaces/company.interface';
 import { apiClient } from '../../apollo';
 
 export const UPDATE_COMPANY = gql`
@@ -95,7 +95,7 @@ export async function updateCompany(
 ): Promise<FetchResult<Company>> {
   const result = await apiClient.mutate({
     mutation: UPDATE_COMPANY,
-    variables: mapGqlCompany(company),
+    variables: mapToGqlCompany(company),
   });
   return result;
 }
@@ -105,7 +105,7 @@ export async function insertCompany(
 ): Promise<FetchResult<Company>> {
   const result = await apiClient.mutate({
     mutation: INSERT_COMPANY,
-    variables: mapGqlCompany(company),
+    variables: mapToGqlCompany(company),
   });
 
   return result;

front/src/services/people/__tests__/select.test.ts

@@ -1,5 +1,5 @@
-import { reduceSortsToOrderBy } from '../../components/table/table-header/helpers';
-import { PeopleSelectedSortType } from './select';
+import { reduceSortsToOrderBy } from '../../../components/table/table-header/helpers';
+import { PeopleSelectedSortType } from '../select';
 
 describe('reduceSortsToOrderBy', () => {
   it('should return an array of objects with the id as key and the order as value', () => {

front/src/services/people/__tests__/update.test.ts

@@ -15,7 +15,7 @@ jest.mock('../../../apollo', () => {
         variables: GraphqlMutationPerson;
       }) => {
         const gqlPerson = arg.variables as unknown as GraphqlQueryPerson;
-        return { data: personInterface.mapPerson(gqlPerson) };
+        return { data: personInterface.mapToPerson(gqlPerson) };
       },
     },
   };
@@ -30,17 +30,18 @@ it('updates a person', async () => {
     company: {
       id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6b',
       name: 'ACME',
-      domain_name: 'example.com',
+      domainName: 'example.com',
     },
     phone: '+1 (555) 123-4567',
-    pipe: {
-      id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6d',
-      name: 'Customer',
-      icon: '!',
-    },
+    pipes: [
+      {
+        id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6d',
+        name: 'Customer',
+        icon: '!',
+      },
+    ],
     creationDate: new Date(),
     city: 'San Francisco',
-    countryCode: 'US',
   });
   expect(result.data).toBeDefined();
   result.data && expect(result.data.email).toBe('john@example.com');

front/src/services/people/update.ts

@@ -1,5 +1,5 @@
 import { FetchResult, gql } from '@apollo/client';
-import { Person, mapGqlPerson } from '../../interfaces/person.interface';
+import { Person, mapToGqlPerson } from '../../interfaces/person.interface';
 import { apiClient } from '../../apollo';
 
 export const UPDATE_PERSON = gql`
@@ -112,7 +112,7 @@ export async function updatePerson(
 ): Promise<FetchResult<Person>> {
   const result = await apiClient.mutate({
     mutation: UPDATE_PERSON,
-    variables: mapGqlPerson(person),
+    variables: mapToGqlPerson(person),
   });
   return result;
 }
@@ -122,7 +122,7 @@ export async function insertPerson(
 ): Promise<FetchResult<Person>> {
   const result = await apiClient.mutate({
     mutation: INSERT_PERSON,
-    variables: mapGqlPerson(person),
+    variables: mapToGqlPerson(person),
   });
 
   return result;