admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

refactor: remove mappers (#326)

Browse Source 
* 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>
This commit is contained in:
Sammy Teillet
2023-06-19 16:07:16 +02:00
committed by GitHub
parent c8c4a953c2
commit 96a53ad765
27 changed files with 849 additions and 1005 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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);
});
});

87
front/src/modules/companies/interfaces/company.interface.ts
View File

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

5
front/src/modules/companies/services/update.ts
View File

@ -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;
}

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

@ -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);
});
});

84
front/src/modules/people/interfaces/person.interface.ts
View File

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

4
front/src/modules/people/services/__tests__/update.test.ts
View File

@ -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');

2
front/src/modules/people/services/update.ts
View File

@ -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;
}

10
front/src/modules/ui/components/table/EntityTable.tsx
View File

@ -23,10 +23,7 @@ import { currentRowSelectionState } from '../../tables/states/rowSelectionState'
import { TableHeader } from './table-header/TableHeader';
type OwnProps<
TData extends { id: string; __typename: 'Company' | 'people' },
SortField,
> = {
type OwnProps<TData extends { id: string }, 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<
TData extends { id: string; __typename: 'Company' | 'people' },
SortField,
>({
export function EntityTable<TData extends { id: string }, SortField>({
data,
columns,
viewName,

3
front/src/modules/users/components/__stories__/Avatar.stories.tsx
View File

@ -12,8 +12,7 @@ const meta: Meta<typeof Avatar> = {
export default meta;
type Story = StoryObj<typeof Avatar>;
const avatarUrl =
'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';
const avatarUrl = 'http://placekitten.com/300/300';
export const Rounded: Story = {
render: getRenderWrapperForComponent(

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

@ -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);
});
});

54
front/src/modules/users/interfaces/user.interface.ts
View File

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

39
front/src/modules/users/interfaces/workspaceMember.interface.ts
View File

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

2
front/src/modules/utils/interfaces/generic.interface.ts
View File

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

6
front/src/modules/utils/utils.ts
View File

@ -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;

35
front/src/modules/workspaces/interfaces/workspace.interface.ts
View File

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