refactor: remove mappers (#326)

* refactor: remove mappers

* chore: generate graphql types

* lint: remove useless import

* Remove preset-react-create-app from storybook addons

* test: remove old tests

* Upgrade storybook version

* Remove sb preset-cra and add sb svgr loader

* chore: remove figma image url from storybook

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

front/.storybook/main.js

@@ -20,6 +20,24 @@ module.exports = {
       include: /node_modules/,
       type: 'javascript/auto'
     });
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: [
+        {
+          loader: '@svgr/webpack'
+        },
+        {
+          loader: 'file-loader',
+          options: {
+            name: 'static/media/[path][name].[ext]'
+          }
+        }
+      ],
+      type: 'javascript/auto',
+      issuer: {
+        and: [/\.(ts|tsx|js|jsx|md|mdx)$/]
+      }
+    });
     config.resolve.extensions.push('.mjs');
     config.resolve.alias = {
       ...config.resolve.alias,
@@ -33,7 +51,6 @@ module.exports = {
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
-    "@storybook/preset-create-react-app",
     "@storybook/addon-coverage",
     "@storybook/addon-styling"
 

front/package.json

@@ -89,19 +89,19 @@
     "@graphql-codegen/typescript": "^3.0.4",
     "@graphql-codegen/typescript-operations": "^3.0.4",
     "@graphql-codegen/typescript-react-apollo": "^3.3.7",
-    "@storybook/addon-actions": "^7.0.2",
+    "@storybook/addon-actions": "^7.0.22",
     "@storybook/addon-coverage": "^0.0.8",
-    "@storybook/addon-essentials": "^7.0.2",
+    "@storybook/addon-essentials": "^7.0.22",
-    "@storybook/addon-interactions": "^7.0.2",
+    "@storybook/addon-interactions": "^7.0.22",
-    "@storybook/addon-links": "^7.0.2",
+    "@storybook/addon-links": "^7.0.22",
-    "@storybook/addon-styling": "^1.0.8",
+    "@storybook/addon-styling": "^1.3.0",
     "@storybook/jest": "^0.1.0",
-    "@storybook/node-logger": "^7.0.2",
+    "@storybook/node-logger": "^7.0.22",
-    "@storybook/preset-create-react-app": "^7.0.2",
+    "@storybook/react": "^7.0.22",
-    "@storybook/react": "^7.0.2",
+    "@storybook/react-webpack5": "^7.0.22",
-    "@storybook/react-webpack5": "^7.0.2",
     "@storybook/test-runner": "^0.10.0",
     "@storybook/testing-library": "^0.1.0",
+    "@svgr/webpack": "^8.0.1",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -125,7 +125,7 @@
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-simple-import-sort": "^10.0.0",
-    "eslint-plugin-storybook": "^0.6.11",
+    "eslint-plugin-storybook": "^0.6.12",
     "eslint-plugin-twenty": "file:../packages/eslint-plugin-twenty",
     "http-server": "^14.1.1",
     "mock-apollo-client": "^1.2.1",
@@ -134,7 +134,7 @@
     "prettier": "^2.8.0",
     "prop-types": "^15.8.1",
     "react-scripts": "5.0.1",
-    "storybook": "^7.0.2",
+    "storybook": "^7.0.22",
     "ts-jest": "^29.1.0",
     "typescript": "^4.9.3",
     "webpack": "^5.75.0"

front/src/generated/graphql.tsx

@@ -50,7 +50,7 @@ export type CommentCreateInput = {
   commentThread: CommentThreadCreateNestedOneWithoutCommentsInput;
   createdAt?: InputMaybe<Scalars['DateTime']>;
   deletedAt?: InputMaybe<Scalars['DateTime']>;
-  id: Scalars['String'];
+  id?: InputMaybe<Scalars['String']>;
   updatedAt?: InputMaybe<Scalars['DateTime']>;
 };
 
@@ -59,7 +59,7 @@ export type CommentCreateManyCommentThreadInput = {
   body: Scalars['String'];
   createdAt?: InputMaybe<Scalars['DateTime']>;
   deletedAt?: InputMaybe<Scalars['DateTime']>;
-  id: Scalars['String'];
+  id?: InputMaybe<Scalars['String']>;
   updatedAt?: InputMaybe<Scalars['DateTime']>;
 };
 
@@ -82,7 +82,7 @@ export type CommentCreateWithoutCommentThreadInput = {
   body: Scalars['String'];
   createdAt?: InputMaybe<Scalars['DateTime']>;
   deletedAt?: InputMaybe<Scalars['DateTime']>;
-  id: Scalars['String'];
+  id?: InputMaybe<Scalars['String']>;
   updatedAt?: InputMaybe<Scalars['DateTime']>;
 };
 
@@ -124,7 +124,7 @@ export type CommentThreadCreateInput = {
   comments?: InputMaybe<CommentCreateNestedManyWithoutCommentThreadInput>;
   createdAt?: InputMaybe<Scalars['DateTime']>;
   deletedAt?: InputMaybe<Scalars['DateTime']>;
-  id: Scalars['String'];
+  id?: InputMaybe<Scalars['String']>;
   updatedAt?: InputMaybe<Scalars['DateTime']>;
 };
 
@@ -171,7 +171,7 @@ export type CommentThreadTargetCreateManyCommentThreadInput = {
   commentableType: CommentableType;
   createdAt?: InputMaybe<Scalars['DateTime']>;
   deletedAt?: InputMaybe<Scalars['DateTime']>;
-  id: Scalars['String'];
+  id?: InputMaybe<Scalars['String']>;
   updatedAt?: InputMaybe<Scalars['DateTime']>;
 };
 
@@ -194,7 +194,7 @@ export type CommentThreadTargetCreateWithoutCommentThreadInput = {
   commentableType: CommentableType;
   createdAt?: InputMaybe<Scalars['DateTime']>;
   deletedAt?: InputMaybe<Scalars['DateTime']>;
-  id: Scalars['String'];
+  id?: InputMaybe<Scalars['String']>;
   updatedAt?: InputMaybe<Scalars['DateTime']>;
 };
 
@@ -408,7 +408,7 @@ export type CompanyCreateInput = {
   deletedAt?: InputMaybe<Scalars['DateTime']>;
   domainName: Scalars['String'];
   employees?: InputMaybe<Scalars['Int']>;
-  id: Scalars['String'];
+  id?: InputMaybe<Scalars['String']>;
   name: Scalars['String'];
   people?: InputMaybe<PersonCreateNestedManyWithoutCompanyInput>;
   updatedAt?: InputMaybe<Scalars['DateTime']>;
@@ -420,7 +420,7 @@ export type CompanyCreateManyAccountOwnerInput = {
   deletedAt?: InputMaybe<Scalars['DateTime']>;
   domainName: Scalars['String'];
   employees?: InputMaybe<Scalars['Int']>;
-  id: Scalars['String'];
+  id?: InputMaybe<Scalars['String']>;
   name: Scalars['String'];
   updatedAt?: InputMaybe<Scalars['DateTime']>;
 };
@@ -452,7 +452,7 @@ export type CompanyCreateWithoutAccountOwnerInput = {
   deletedAt?: InputMaybe<Scalars['DateTime']>;
   domainName: Scalars['String'];
   employees?: InputMaybe<Scalars['Int']>;
-  id: Scalars['String'];
+  id?: InputMaybe<Scalars['String']>;
   name: Scalars['String'];
   people?: InputMaybe<PersonCreateNestedManyWithoutCompanyInput>;
   updatedAt?: InputMaybe<Scalars['DateTime']>;
@@ -882,7 +882,7 @@ export type PersonCreateInput = {
   deletedAt?: InputMaybe<Scalars['DateTime']>;
   email: Scalars['String'];
   firstname: Scalars['String'];
-  id: Scalars['String'];
+  id?: InputMaybe<Scalars['String']>;
   lastname: Scalars['String'];
   phone: Scalars['String'];
   updatedAt?: InputMaybe<Scalars['DateTime']>;
@@ -1012,7 +1012,7 @@ export type PipelineProgress = {
 export type PipelineProgressCreateInput = {
   createdAt?: InputMaybe<Scalars['DateTime']>;
   deletedAt?: InputMaybe<Scalars['DateTime']>;
-  id: Scalars['String'];
+  id?: InputMaybe<Scalars['String']>;
   pipeline: PipelineCreateNestedOneWithoutPipelineProgressesInput;
   pipelineStage: PipelineStageCreateNestedOneWithoutPipelineProgressesInput;
   progressableId: Scalars['String'];
@@ -1350,7 +1350,6 @@ export type User = {
   lastSeen?: Maybe<Scalars['DateTime']>;
   locale: Scalars['String'];
   metadata?: Maybe<Scalars['JSON']>;
-  passwordHash?: Maybe<Scalars['String']>;
   phoneNumber?: Maybe<Scalars['String']>;
   updatedAt: Scalars['DateTime'];
   workspaceMember?: Maybe<WorkspaceMember>;
@@ -1388,11 +1387,10 @@ export type UserCreateWithoutCommentsInput = {
   displayName: Scalars['String'];
   email: Scalars['String'];
   emailVerified?: InputMaybe<Scalars['Boolean']>;
-  id: Scalars['String'];
+  id?: InputMaybe<Scalars['String']>;
   lastSeen?: InputMaybe<Scalars['DateTime']>;
   locale: Scalars['String'];
   metadata?: InputMaybe<Scalars['JSON']>;
-  passwordHash?: InputMaybe<Scalars['String']>;
   phoneNumber?: InputMaybe<Scalars['String']>;
   updatedAt?: InputMaybe<Scalars['DateTime']>;
 };
@@ -1411,7 +1409,6 @@ export type UserOrderByWithRelationInput = {
   lastSeen?: InputMaybe<SortOrder>;
   locale?: InputMaybe<SortOrder>;
   metadata?: InputMaybe<SortOrder>;
-  passwordHash?: InputMaybe<SortOrder>;
   phoneNumber?: InputMaybe<SortOrder>;
   updatedAt?: InputMaybe<SortOrder>;
 };
@@ -1463,7 +1460,6 @@ export type UserUpdateWithoutCommentsInput = {
   lastSeen?: InputMaybe<NullableDateTimeFieldUpdateOperationsInput>;
   locale?: InputMaybe<StringFieldUpdateOperationsInput>;
   metadata?: InputMaybe<Scalars['JSON']>;
-  passwordHash?: InputMaybe<NullableStringFieldUpdateOperationsInput>;
   phoneNumber?: InputMaybe<NullableStringFieldUpdateOperationsInput>;
   updatedAt?: InputMaybe<DateTimeFieldUpdateOperationsInput>;
 };
@@ -1490,7 +1486,6 @@ export type UserWhereInput = {
   lastSeen?: InputMaybe<DateTimeNullableFilter>;
   locale?: InputMaybe<StringFilter>;
   metadata?: InputMaybe<JsonNullableFilter>;
-  passwordHash?: InputMaybe<StringNullableFilter>;
   phoneNumber?: InputMaybe<StringNullableFilter>;
   updatedAt?: InputMaybe<DateTimeFilter>;
 };

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

@@ -1,94 +0,0 @@
-import {
-  Company,
-  GraphqlMutationCompany,
-  GraphqlQueryCompany,
-  mapToCompany,
-  mapToGqlCompany,
-} 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',
-      domainName: 'exmaple.com',
-      createdAt: now.toUTCString(),
-      employees: 10,
-      address: '1 Infinite Loop, 95014 Cupertino, California, USA',
-      _commentCount: 1,
-      accountOwner: {
-        id: '7af20dea-0412-4c4c-8b13-d6f0e6e09e87',
-        email: 'john@example.com',
-        displayName: 'John Doe',
-        avatarUrl: 'https://example.com/avatar.png',
-        __typename: 'User',
-      },
-      pipes: [
-        {
-          id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6c',
-          name: 'Pipe 1',
-          icon: '!',
-          __typename: 'Pipe',
-        },
-      ],
-      __typename: 'Company',
-    } satisfies GraphqlQueryCompany;
-
-    const company = mapToCompany(graphQLCompany);
-    expect(company).toStrictEqual({
-      __typename: 'Company',
-      id: graphQLCompany.id,
-      name: graphQLCompany.name,
-      domainName: graphQLCompany.domainName,
-      createdAt: new Date(now.toUTCString()),
-      employees: graphQLCompany.employees,
-      address: graphQLCompany.address,
-      _commentCount: 1,
-      accountOwner: {
-        __typename: 'users',
-        id: '7af20dea-0412-4c4c-8b13-d6f0e6e09e87',
-        email: 'john@example.com',
-        avatarUrl: 'https://example.com/avatar.png',
-        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: [],
-      _commentCount: 1,
-      accountOwner: {
-        id: '522d4ec4-c46b-4360-a0a7-df8df170be81',
-        email: 'john@example.com',
-        avatarUrl: 'https://example.com/avatar.png',
-        displayName: 'John Doe',
-        __typename: 'users',
-      },
-      createdAt: now,
-      __typename: 'Company',
-    } satisfies Company;
-    const graphQLCompany = mapToGqlCompany(company);
-    expect(graphQLCompany).toStrictEqual({
-      id: company.id,
-      name: company.name,
-      domainName: company.domainName,
-      createdAt: now.toUTCString(),
-      employees: company.employees,
-      address: company.address,
-      accountOwnerId: '522d4ec4-c46b-4360-a0a7-df8df170be81',
-      __typename: 'Company',
-    } satisfies GraphqlMutationCompany);
-  });
-});

front/src/modules/companies/interfaces/company.interface.ts

@@ -1,84 +1,13 @@
-import {
+import { Company as GQLCompany } from '../../../generated/graphql';
-  GraphqlQueryPipeline,
+import { DeepPartial } from '../../utils/utils';
-  Pipeline,
-} from '../../pipelines/interfaces/pipeline.interface';
-import {
-  GraphqlQueryUser,
-  mapToUser,
-  User,
-} from '../../users/interfaces/user.interface';
 
-export type Company = {
+export type Company = DeepPartial<GQLCompany> & { id: string };
-  __typename: 'Company';
-  id: string;
-  name?: string;
-  domainName?: string;
-  employees?: number | null;
-  address?: string;
 
-  createdAt?: Date;
+export type GraphqlQueryCompany = Company;
 
-  pipes?: Pipeline[];
+export type GraphqlMutationCompany = Company;
-  accountOwner?: User | null;
 
-  _commentCount?: number;
+export const mapToCompany = (company: GraphqlQueryCompany): Company => company;
-};
 
-export type GraphqlQueryCompany = {
+export const mapToGqlCompany = (company: Company): GraphqlMutationCompany =>
-  id: string;
+  company;
-  name?: string;
-  domainName?: string;
-  employees?: number | null;
-  address?: string;
-
-  createdAt?: string;
-
-  accountOwner?: GraphqlQueryUser | null;
-  pipes?: GraphqlQueryPipeline[] | null;
-  __typename?: string;
-
-  _commentCount?: number;
-};
-
-export type GraphqlMutationCompany = {
-  id: string;
-  name?: string;
-  domainName?: string;
-  employees?: number | null;
-  address?: string;
-
-  createdAt?: string;
-
-  accountOwnerId?: string;
-  __typename?: string;
-};
-
-export const mapToCompany = (company: GraphqlQueryCompany): Company => ({
-  __typename: 'Company',
-  id: company.id,
-  employees: company.employees,
-  name: company.name,
-  address: company.address,
-  domainName: company.domainName,
-  createdAt: company.createdAt ? new Date(company.createdAt) : undefined,
-
-  accountOwner: company.accountOwner
-    ? mapToUser(company.accountOwner)
-    : company.accountOwner,
-  pipes: [],
-
-  _commentCount: company._commentCount,
-});
-
-export const mapToGqlCompany = (company: Company): GraphqlMutationCompany => ({
-  id: company.id,
-  name: company.name,
-  domainName: company.domainName,
-  address: company.address,
-  employees: company.employees,
-
-  createdAt: company.createdAt ? company.createdAt.toUTCString() : undefined,
-
-  accountOwnerId: company.accountOwner?.id,
-  __typename: 'Company',
-});

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

@@ -2,6 +2,7 @@ import { FetchResult, gql } from '@apollo/client';
 
 import { apiClient } from '~/apollo';
 
+import { UpdateCompanyMutationVariables } from '../../../generated/graphql';
 import { Company, mapToGqlCompany } from '../interfaces/company.interface';
 
 export const UPDATE_COMPANY = gql`
@@ -78,11 +79,11 @@ export const DELETE_COMPANIES = gql`
 `;
 
 export async function updateCompany(
-  company: Company,
+  company: UpdateCompanyMutationVariables,
 ): Promise<FetchResult<Company>> {
   const result = await apiClient.mutate({
     mutation: UPDATE_COMPANY,
-    variables: mapToGqlCompany(company),
+    variables: company,
   });
   return result;
 }

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

@@ -1,86 +0,0 @@
-import {
-  GraphqlMutationPerson,
-  GraphqlQueryPerson,
-  mapToGqlPerson,
-  mapToPerson,
-  Person,
-} 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',
-      createdAt: now.toUTCString(),
-      email: 'john.doe@gmail.com',
-      phone: '+1 (555) 123-4567',
-      city: 'Paris',
-      _commentCount: 1,
-      company: {
-        id: '7af20dea-0412-4c4c-8b13-d6f0e6e09e87',
-        name: 'John Doe',
-        __typename: 'Company',
-      },
-      __typename: 'people',
-    } satisfies GraphqlQueryPerson;
-
-    const person = mapToPerson(graphQLPerson);
-    expect(person).toStrictEqual({
-      __typename: 'people',
-      id: graphQLPerson.id,
-      firstname: graphQLPerson.firstname,
-      lastname: graphQLPerson.lastname,
-      createdAt: new Date(now.toUTCString()),
-      email: graphQLPerson.email,
-      city: graphQLPerson.city,
-      phone: graphQLPerson.phone,
-      _commentCount: 1,
-      company: {
-        __typename: 'Company',
-        id: '7af20dea-0412-4c4c-8b13-d6f0e6e09e87',
-        accountOwner: undefined,
-        address: undefined,
-        createdAt: undefined,
-        domainName: undefined,
-        employees: undefined,
-        _commentCount: 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',
-      createdAt: new Date(now.toUTCString()),
-      email: 'john.doe@gmail.com',
-      phone: '+1 (555) 123-4567',
-      city: 'Paris',
-      _commentCount: 1,
-      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,
-      createdAt: now.toUTCString(),
-      email: person.email,
-      city: person.city,
-      phone: person.phone,
-      companyId: '7af20dea-0412-4c4c-8b13-d6f0e6e09e87',
-      __typename: 'people',
-    } satisfies GraphqlMutationPerson);
-  });
-});

front/src/modules/people/interfaces/person.interface.ts

@@ -1,82 +1,12 @@
-import {
+import { Person as GQLPerson } from '../../../generated/graphql';
-  Company,
+import { DeepPartial } from '../../utils/utils';
-  GraphqlQueryCompany,
-  mapToCompany,
-} from '@/companies/interfaces/company.interface';
-import { Pipeline } from '@/pipelines/interfaces/pipeline.interface';
 
-export type Person = {
+export type Person = DeepPartial<GQLPerson> & { id: GQLPerson['id'] };
-  __typename: 'people';
-  id: string;
-  firstname?: string;
-  lastname?: string;
-  picture?: string | null;
-  email?: string;
-  phone?: string;
-  city?: string;
 
-  createdAt?: Date;
+export type GraphqlQueryPerson = Person;
 
-  company?: Company | null;
+export type GraphqlMutationPerson = Person;
-  pipes?: Pipeline[] | null;
 
-  _commentCount?: number;
+export const mapToPerson = (person: GraphqlQueryPerson): Person => person;
-};
 
-export type GraphqlQueryPerson = {
+export const mapToGqlPerson = (person: Person): GraphqlMutationPerson => person;
-  id: string;
-  firstname?: string;
-  lastname?: string;
-  city?: string;
-  email?: string;
-  phone?: string;
-
-  createdAt?: string;
-
-  company?: GraphqlQueryCompany | null;
-
-  _commentCount?: number;
-
-  __typename?: string;
-};
-
-export type GraphqlMutationPerson = {
-  id: string;
-  firstname?: string;
-  lastname?: string;
-  email?: string;
-  phone?: string;
-  city?: string;
-  createdAt?: string;
-  companyId?: string;
-  __typename: 'people';
-};
-
-export const mapToPerson = (person: GraphqlQueryPerson): Person => ({
-  __typename: 'people',
-  id: person.id,
-  firstname: person.firstname,
-  lastname: person.lastname,
-  email: person.email,
-  phone: person.phone,
-  city: person.city,
-
-  createdAt: person.createdAt ? new Date(person.createdAt) : undefined,
-
-  company: person.company ? mapToCompany(person.company) : null,
-  _commentCount: person._commentCount,
-});
-
-export const mapToGqlPerson = (person: Person): GraphqlMutationPerson => ({
-  id: person.id,
-  firstname: person.firstname,
-  lastname: person.lastname,
-  email: person.email,
-  phone: person.phone,
-  city: person.city,
-
-  createdAt: person.createdAt ? person.createdAt.toUTCString() : undefined,
-
-  companyId: person.company?.id,
-  __typename: 'people',
-});

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

@@ -41,9 +41,9 @@ it('updates a person', async () => {
         icon: '!',
       },
     ],
-    createdAt: new Date(),
+    createdAt: new Date().toISOString(),
     city: 'San Francisco',
-    __typename: 'people',
+    __typename: 'Person',
   });
   expect(result.data).toBeDefined();
   result.data && expect(result.data.email).toBe('john@example.com');

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

@@ -93,7 +93,7 @@ export async function updatePerson(
 ): Promise<FetchResult<Person>> {
   const result = await apiClient.mutate({
     mutation: UPDATE_PERSON,
-    variables: mapToGqlPerson(person),
+    variables: person,
   });
   return result;
 }

front/src/modules/ui/components/table/EntityTable.tsx

@@ -23,10 +23,7 @@ import { currentRowSelectionState } from '../../tables/states/rowSelectionState'
 
 import { TableHeader } from './table-header/TableHeader';
 
-type OwnProps<
+type OwnProps<TData extends { id: string }, SortField> = {
-  TData extends { id: string; __typename: 'Company' | 'people' },
-  SortField,
-> = {
   data: Array<TData>;
   columns: Array<ColumnDef<TData, any>>;
   viewName: string;
@@ -108,10 +105,7 @@ const StyledRow = styled.tr<{ selected: boolean }>`
     props.selected ? props.theme.secondaryBackground : 'none'};
 `;
 
-export function EntityTable<
+export function EntityTable<TData extends { id: string }, SortField>({
-  TData extends { id: string; __typename: 'Company' | 'people' },
-  SortField,
->({
   data,
   columns,
   viewName,

front/src/modules/users/components/__stories__/Avatar.stories.tsx

@@ -12,8 +12,7 @@ const meta: Meta<typeof Avatar> = {
 export default meta;
 type Story = StoryObj<typeof Avatar>;
 
-const avatarUrl =
+const avatarUrl = 'http://placekitten.com/300/300';
-  'https://s3-alpha-sig.figma.com/img/bbb5/4905/f0a52cc2b9aaeb0a82a360d478dae8bf?Expires=1687132800&Signature=iVBr0BADa3LHoFVGbwqO-wxC51n1o~ZyFD-w7nyTyFP4yB-Y6zFawL-igewaFf6PrlumCyMJThDLAAc-s-Cu35SBL8BjzLQ6HymzCXbrblUADMB208PnMAvc1EEUDq8TyryFjRO~GggLBk5yR0EXzZ3zenqnDEGEoQZR~TRqS~uDF-GwQB3eX~VdnuiU2iittWJkajIDmZtpN3yWtl4H630A3opQvBnVHZjXAL5YPkdh87-a-H~6FusWvvfJxfNC2ZzbrARzXofo8dUFtH7zUXGCC~eUk~hIuLbLuz024lFQOjiWq2VKyB7dQQuGFpM-OZQEV8tSfkViP8uzDLTaCg__&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4';
 
 export const Rounded: Story = {
   render: getRenderWrapperForComponent(

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

@@ -1,77 +0,0 @@
-import {
-  GraphqlMutationUser,
-  GraphqlQueryUser,
-  mapToGqlUser,
-  mapToUser,
-  User,
-} 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',
-      displayName: 'John Doe',
-      avatarUrl: 'https://example.com/avatar.png',
-      email: 'john.doe@gmail.com',
-      workspaceMember: {
-        id: '7af20dea-0412-4c4c-8b13-d6f0e6e09e88',
-        workspace: {
-          id: '7af20dea-0412-4c4c-8b13-d6f0e6e09e89',
-          displayName: 'John Doe',
-          __typename: 'workspace',
-        },
-        __typename: 'workspace_members',
-      },
-      __typename: 'users',
-    } satisfies GraphqlQueryUser;
-
-    const User = mapToUser(graphQLUser);
-    expect(User).toStrictEqual({
-      __typename: 'users',
-      id: graphQLUser.id,
-      displayName: graphQLUser.displayName,
-      avatarUrl: graphQLUser.avatarUrl,
-      email: graphQLUser.email,
-      workspaceMember: {
-        id: graphQLUser.workspaceMember.id,
-        workspace: {
-          id: graphQLUser.workspaceMember.workspace.id,
-          displayName: graphQLUser.workspaceMember.workspace.displayName,
-          domainName: undefined,
-          logo: undefined,
-        },
-      },
-    } satisfies User);
-  });
-
-  it('should map User to GraphQlUser', () => {
-    const now = new Date();
-    now.setMilliseconds(0);
-    const user = {
-      __typename: 'users',
-      id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6b',
-      displayName: 'John Doe',
-      avatarUrl: 'https://example.com/avatar.png',
-      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,
-      displayName: user.displayName,
-      avatarUrl: user.avatarUrl,
-      email: user.email,
-      workspaceMemberId: user.workspaceMember.id,
-      __typename: 'users',
-    } satisfies GraphqlMutationUser);
-  });
-});

front/src/modules/users/interfaces/user.interface.ts

@@ -1,52 +1,12 @@
-import {
+import { User as GQLUser } from '../../../generated/graphql';
-  GraphqlQueryWorkspaceMember,
+import { DeepPartial } from '../../utils/utils';
-  mapToWorkspaceMember,
-  WorkspaceMember,
-} from './workspaceMember.interface';
 
-export interface User {
+export type User = DeepPartial<GQLUser> & { id: string };
-  __typename: 'users';
-  id: string;
-  email?: string;
-  displayName?: string;
-  avatarUrl?: string;
-  workspaceMember?: WorkspaceMember | null;
-}
 
-export type GraphqlQueryUser = {
+export type GraphqlQueryUser = User;
-  id: string;
-  email?: string;
-  displayName?: string;
-  workspaceMember?: GraphqlQueryWorkspaceMember | null;
-  avatarUrl?: string;
-  __typename?: string;
-};
 
-export type GraphqlMutationUser = {
+export type GraphqlMutationUser = User;
-  id: string;
-  email?: string;
-  displayName?: string;
-  avatarUrl?: string;
-  workspaceMemberId?: string;
-  __typename?: string;
-};
 
-export const mapToUser = (user: GraphqlQueryUser): User => ({
+export const mapToUser = (user: GraphqlQueryUser): User => user;
-  __typename: 'users',
-  id: user.id,
-  email: user.email,
-  displayName: user.displayName,
-  avatarUrl: user.avatarUrl,
-  workspaceMember: user.workspaceMember
-    ? mapToWorkspaceMember(user.workspaceMember)
-    : user.workspaceMember,
-});
 
-export const mapToGqlUser = (user: User): GraphqlMutationUser => ({
+export const mapToGqlUser = (user: User): GraphqlMutationUser => user;
-  id: user.id,
-  email: user.email,
-  displayName: user.displayName,
-  avatarUrl: user.avatarUrl,
-  workspaceMemberId: user.workspaceMember?.id,
-  __typename: 'users',
-});

front/src/modules/users/interfaces/workspaceMember.interface.ts

@@ -1,39 +1,18 @@
-import {
+import { WorkspaceMember as GQLWorkspaceMember } from '../../../generated/graphql';
-  GraphqlQueryWorkspace,
+import { DeepPartial } from '../../utils/utils';
-  mapToWorkspace,
-  Workspace,
-} from '../../workspaces/interfaces/workspace.interface';
 
-export interface WorkspaceMember {
+export type WorkspaceMember = DeepPartial<GQLWorkspaceMember> & {
-  id: string;
+  id: GQLWorkspaceMember['id'];
-  workspace: Workspace;
-}
-
-export type GraphqlQueryWorkspaceMember = {
-  id: string;
-  workspace: GraphqlQueryWorkspace;
-  __typename?: string;
 };
 
-export type GraphqlMutationWorkspaceMember = {
+export type GraphqlQueryWorkspaceMember = WorkspaceMember;
-  id: string;
+
-  workspace_id: string;
+export type GraphqlMutationWorkspaceMember = WorkspaceMember;
-  __typename?: string;
-};
 
 export const mapToWorkspaceMember = (
   workspaceMember: GraphqlQueryWorkspaceMember,
-): WorkspaceMember => ({
+): WorkspaceMember => workspaceMember;
-  id: workspaceMember.id,
-  workspace: workspaceMember.workspace
-    ? mapToWorkspace(workspaceMember.workspace)
-    : workspaceMember.workspace,
-});
 
 export const mapToGqlWorkspaceMember = (
   workspaceMember: WorkspaceMember,
-): GraphqlMutationWorkspaceMember => ({
+): GraphqlMutationWorkspaceMember => workspaceMember;
-  id: workspaceMember.id,
-  workspace_id: workspaceMember.workspace?.id,
-  __typename: 'workspace_members',
-});

front/src/modules/utils/interfaces/generic.interface.ts

@@ -15,7 +15,7 @@ import {
 
 export type AnyEntity = {
   id: string;
-  __typename: string;
+  __typename?: string;
 } & Record<string, any>;
 
 export type UnknownType = void;

front/src/modules/utils/utils.ts

@@ -13,3 +13,9 @@ export const getLogoUrlFromDomainName = (domainName?: string): string => {
 export const browserPrefersDarkMode = (): boolean => {
   return window.matchMedia('(prefers-color-scheme: dark)').matches;
 };
+
+export type DeepPartial<T> = T extends object
+  ? {
+      [P in keyof T]?: DeepPartial<T[P]>;
+    }
+  : T;

front/src/modules/workspaces/interfaces/workspace.interface.ts

@@ -1,26 +1,11 @@
-export interface Workspace {
+import { Workspace as GQLWorkspace } from '../../../generated/graphql';
-  id: string;
+import { DeepPartial } from '../../utils/utils';
-  domainName?: string;
-  displayName?: string;
-  logo?: string | null;
-  __typename?: string;
-}
 
-export type GraphqlQueryWorkspace = {
+export type Workspace = DeepPartial<GQLWorkspace> & { id: GQLWorkspace['id'] };
-  id: string;
-  displayName?: string;
-  domainName?: string;
-  logo?: string | null;
-  __typename?: string;
-};
 
-export type GraphqlMutationWorkspace = {
+export type GraphqlQueryWorkspace = Workspace;
-  id: string;
+
-  displayName?: string;
+export type GraphqlMutationWorkspace = Workspace;
-  domainName?: string;
-  logo?: string | null;
-  __typename?: string;
-};
 
 export const mapToWorkspace = (
   workspace: GraphqlQueryWorkspace,
@@ -33,10 +18,4 @@ export const mapToWorkspace = (
 
 export const mapToGqlWorkspace = (
   workspace: Workspace,
-): GraphqlMutationWorkspace => ({
+): GraphqlMutationWorkspace => workspace;
-  id: workspace.id,
-  domainName: workspace.domainName,
-  displayName: workspace.displayName,
-  logo: workspace.logo,
-  __typename: 'workspaces',
-});

front/src/pages/companies/Companies.tsx

@@ -63,8 +63,7 @@ export function Companies() {
       domainName: '',
       employees: null,
       address: '',
-      pipes: [],
+      createdAt: new Date().toISOString(),
-      createdAt: new Date(),
       accountOwner: null,
       __typename: 'Company',
     };

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

@@ -2,7 +2,6 @@ import { useMemo } from 'react';
 import { createColumnHelper } from '@tanstack/react-table';
 
 import { CompanyEditableNameChipCell } from '@/companies/components/CompanyEditableNameCell';
-import { Company } from '@/companies/interfaces/company.interface';
 import { updateCompany } from '@/companies/services';
 import {
   PersonChip,
@@ -24,9 +23,9 @@ import {
 } from '@/ui/icons/index';
 import { getCheckBoxColumn } from '@/ui/tables/utils/getCheckBoxColumn';
 import { mapToUser, User } from '@/users/interfaces/user.interface';
-import { QueryMode } from '~/generated/graphql';
+import { GetCompaniesQueryHookResult, QueryMode } from '~/generated/graphql';
 
-const columnHelper = createColumnHelper<Company>();
+const columnHelper = createColumnHelper<GetCompaniesQueryHookResult>();
 
 export const useCompaniesColumns = () => {
   return useMemo(() => {
@@ -53,7 +52,7 @@ export const useCompaniesColumns = () => {
             content={props.row.original.domainName || ''}
             placeholder="Domain name"
             changeHandler={(value) => {
-              const company = props.row.original;
+              const company = { ...props.row.original };
               company.domainName = value;
               updateCompany(company);
             }}
@@ -70,7 +69,7 @@ export const useCompaniesColumns = () => {
             content={props.row.original.employees?.toString() || ''}
             placeholder="Employees"
             changeHandler={(value) => {
-              const company = props.row.original;
+              const company = { ...props.row.original };
 
               if (value === '') {
                 company.employees = null;
@@ -93,7 +92,7 @@ export const useCompaniesColumns = () => {
             content={props.row.original.address || ''}
             placeholder="Address"
             changeHandler={(value) => {
-              const company = props.row.original;
+              const company = { ...props.row.original };
               company.address = value;
               updateCompany(company);
             }}
@@ -110,10 +109,14 @@ export const useCompaniesColumns = () => {
         ),
         cell: (props) => (
           <EditableDate
-            value={props.row.original.createdAt || new Date()}
+            value={
+              props.row.original.createdAt
+                ? new Date(props.row.original.createdAt)
+                : new Date()
+            }
             changeHandler={(value: Date) => {
-              const company = props.row.original;
+              const company = { ...props.row.original };
-              company.createdAt = value;
+              company.createdAt = value.toISOString();
               updateCompany(company);
             }}
           />
@@ -140,17 +143,8 @@ export const useCompaniesColumns = () => {
               };
             }}
             onChange={(relation: User) => {
-              const company = props.row.original;
+              const company = { ...props.row.original };
-              if (company.accountOwner) {
+              company.accountOwnerId = relation.id;
-                company.accountOwner.id = relation.id;
-              } else {
-                company.accountOwner = {
-                  __typename: 'users',
-                  id: relation.id,
-                  email: relation.email,
-                  displayName: relation.displayName,
-                };
-              }
               updateCompany(company);
             }}
             searchConfig={

front/src/pages/people/People.tsx

@@ -8,7 +8,7 @@ import {
   reduceSortsToOrderBy,
 } from '@/filters-and-sorts/helpers';
 import { SelectedFilterType } from '@/filters-and-sorts/interfaces/filters/interface';
-import { mapToPerson, Person } from '@/people/interfaces/person.interface';
+import { Person } from '@/people/interfaces/person.interface';
 import {
   defaultOrderBy,
   insertPerson,
@@ -50,21 +50,20 @@ export function People() {
 
   const { data } = usePeopleQuery(orderBy, where);
 
-  const people = data?.people.map(mapToPerson) ?? [];
+  const people = data?.people ?? [];
 
   async function handleAddButtonClick() {
-    const newPerson: Person = {
+    const newPerson = {
-      __typename: 'people',
+      __typename: 'Person',
       id: uuidv4(),
       firstname: '',
       lastname: '',
       email: '',
       phone: '',
       company: null,
-      pipes: [],
+      createdAt: new Date().toISOString(),
-      createdAt: new Date(),
       city: '',
-    };
+    } as const;
 
     await insertPerson(newPerson);
   }

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

@@ -3,7 +3,6 @@ import { createColumnHelper } from '@tanstack/react-table';
 
 import { EditablePeopleFullName } from '@/people/components/EditablePeopleFullName';
 import { PeopleCompanyCell } from '@/people/components/PeopleCompanyCell';
-import { Person } from '@/people/interfaces/person.interface';
 import { updatePerson } from '@/people/services';
 import { EditableDate } from '@/ui/components/editable-cell/types/EditableDate';
 import { EditablePhone } from '@/ui/components/editable-cell/types/EditablePhone';
@@ -19,7 +18,9 @@ import {
 } from '@/ui/icons/index';
 import { getCheckBoxColumn } from '@/ui/tables/utils/getCheckBoxColumn';
 
-const columnHelper = createColumnHelper<Person>();
+import { GetPeopleQueryHookResult } from '../../generated/graphql';
+
+const columnHelper = createColumnHelper<GetPeopleQueryHookResult>();
 
 export const usePeopleColumns = () => {
   return useMemo(() => {
@@ -34,7 +35,7 @@ export const usePeopleColumns = () => {
             <EditablePeopleFullName
               person={props.row.original}
               onChange={async (firstName: string, lastName: string) => {
-                const person = props.row.original;
+                const person = { ...props.row.original };
                 person.firstname = firstName;
                 person.lastname = lastName;
                 await updatePerson(person);
@@ -80,7 +81,7 @@ export const usePeopleColumns = () => {
             placeholder="Phone"
             value={props.row.original.phone || ''}
             changeHandler={(value: string) => {
-              const person = props.row.original;
+              const person = { ...props.row.original };
               person.phone = value;
               updatePerson(person);
             }}
@@ -97,10 +98,14 @@ export const usePeopleColumns = () => {
         ),
         cell: (props) => (
           <EditableDate
-            value={props.row.original.createdAt || new Date()}
+            value={
+              props.row.original.createdAt
+                ? new Date(props.row.original.createdAt)
+                : new Date()
+            }
             changeHandler={(value: Date) => {
-              const person = props.row.original;
+              const person = { ...props.row.original };
-              person.createdAt = value;
+              person.createdAt = value.toISOString();
               updatePerson(person);
             }}
           />
@@ -117,7 +122,7 @@ export const usePeopleColumns = () => {
             placeholder="City"
             content={props.row.original.city || ''}
             changeHandler={(value: string) => {
-              const person = props.row.original;
+              const person = { ...props.row.original };
               person.city = value;
               updatePerson(person);
             }}

front/src/providers/AuthProvider.tsx

@@ -4,7 +4,6 @@ import { useRecoilState } from 'recoil';
 import { getUserIdFromToken } from '@/auth/services/AuthService';
 import { currentUserState } from '@/auth/states/currentUserState';
 import { isAuthenticatingState } from '@/auth/states/isAuthenticatingState';
-import { mapToUser } from '@/users/interfaces/user.interface';
 import { useGetCurrentUserQuery } from '@/users/services';
 
 type OwnProps = {
@@ -18,13 +17,13 @@ export function AuthProvider({ children }: OwnProps) {
   const userIdFromToken = getUserIdFromToken();
 
   const { data } = useGetCurrentUserQuery(userIdFromToken);
-
+  const user = data?.users?.[0];
   useEffect(() => {
-    if (data?.users[0]) {
+    if (user) {
-      setCurrentUser(mapToUser(data?.users?.[0]));
+      setCurrentUser(user);
       setIsAuthenticating(false);
     }
-  }, [data, setCurrentUser, setIsAuthenticating]);
+  }, [user, setCurrentUser, setIsAuthenticating]);
 
   return <>{children}</>;
 }

front/src/testing/mock-data/companies.ts

@@ -1,6 +1,6 @@
-import { GraphqlQueryCompany } from '@/companies/interfaces/company.interface';
+import { Company } from '../../generated/graphql';
 
-export const mockedCompaniesData: Array<GraphqlQueryCompany> = [
+export const mockedCompaniesData = [
   {
     id: '89bb825c-171e-4bcc-9cf7-43448d6fb278',
     domainName: 'airbnb.com',
@@ -13,7 +13,7 @@ export const mockedCompaniesData: Array<GraphqlQueryCompany> = [
       email: 'charles@test.com',
       displayName: 'Charles Test',
       id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6b',
-      __typename: 'users',
+      __typename: 'User',
     },
     __typename: 'Company',
   },
@@ -83,4 +83,4 @@ export const mockedCompaniesData: Array<GraphqlQueryCompany> = [
     accountOwner: null,
     __typename: 'Company',
   },
-];
+] as Array<Company>;

front/src/testing/mock-data/people.ts

@@ -1,4 +1,4 @@
-import { GraphqlQueryPerson } from '@/people/interfaces/person.interface';
+import { Person } from '../../modules/people/interfaces/person.interface';
 
 export const mockedPeopleData = [
   {
@@ -55,7 +55,6 @@ export const mockedPeopleData = [
 
     city: 'Paris',
   },
-
   {
     id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6h',
     __typename: 'Person',
@@ -74,4 +73,4 @@ export const mockedPeopleData = [
 
     city: 'Paris',
   },
-] satisfies Array<GraphqlQueryPerson>;
+] satisfies Array<Person>;

front/src/testing/mock-data/users.ts

@@ -37,4 +37,4 @@ export const mockedUsersData: Array<GraphqlQueryUser> = [
       },
     },
   },
-];
+] as GraphqlQueryUser[];