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>
This commit is contained in:
Sammy Teillet 2023-06-19 16:07:16 +02:00 committed by GitHub
parent c8c4a953c2
commit 96a53ad765
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
27 changed files with 849 additions and 1005 deletions

View File

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

View File

@ -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-interactions": "^7.0.2",
"@storybook/addon-links": "^7.0.2",
"@storybook/addon-styling": "^1.0.8",
"@storybook/addon-essentials": "^7.0.22",
"@storybook/addon-interactions": "^7.0.22",
"@storybook/addon-links": "^7.0.22",
"@storybook/addon-styling": "^1.3.0",
"@storybook/jest": "^0.1.0",
"@storybook/node-logger": "^7.0.2",
"@storybook/preset-create-react-app": "^7.0.2",
"@storybook/react": "^7.0.2",
"@storybook/react-webpack5": "^7.0.2",
"@storybook/node-logger": "^7.0.22",
"@storybook/react": "^7.0.22",
"@storybook/react-webpack5": "^7.0.22",
"@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"

View File

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

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

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;

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

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

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;

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

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

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,

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(

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

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;

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;

View File

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

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;

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;

View File

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

View File

@ -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={

View File

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

View File

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

View File

@ -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]) {
setCurrentUser(mapToUser(data?.users?.[0]));
if (user) {
setCurrentUser(user);
setIsAuthenticating(false);
}
}, [data, setCurrentUser, setIsAuthenticating]);
}, [user, setCurrentUser, setIsAuthenticating]);
return <>{children}</>;
}

View File

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

View File

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

View File

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

File diff suppressed because it is too large Load Diff