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/src/pages/companies/Companies.tsx

@@ -63,8 +63,7 @@ export function Companies() {
       domainName: '',
       employees: null,
       address: '',
-      pipes: [],
-      createdAt: new Date(),
+      createdAt: new Date().toISOString(),
       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;
-              company.createdAt = value;
+              const company = { ...props.row.original };
+              company.createdAt = value.toISOString();
               updateCompany(company);
             }}
           />
@@ -140,17 +143,8 @@ export const useCompaniesColumns = () => {
               };
             }}
             onChange={(relation: User) => {
-              const company = props.row.original;
-              if (company.accountOwner) {
-                company.accountOwner.id = relation.id;
-              } else {
-                company.accountOwner = {
-                  __typename: 'users',
-                  id: relation.id,
-                  email: relation.email,
-                  displayName: relation.displayName,
-                };
-              }
+              const company = { ...props.row.original };
+              company.accountOwnerId = relation.id;
               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 = {
-      __typename: 'people',
+    const newPerson = {
+      __typename: 'Person',
       id: uuidv4(),
       firstname: '',
       lastname: '',
       email: '',
       phone: '',
       company: null,
-      pipes: [],
-      createdAt: new Date(),
+      createdAt: new Date().toISOString(),
       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;
-              person.createdAt = value;
+              const person = { ...props.row.original };
+              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);
             }}