Reorganize frontend and install Craco to alias modules (#190)

front/src/modules/companies/components/CompanyChip.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import styled from '@emotion/styled';
+
+export type CompanyChipPropsType = {
+  name: string;
+  picture?: string;
+};
+
+const StyledContainer = styled.span`
+  background-color: ${(props) => props.theme.tertiaryBackground};
+  border-radius: ${(props) => props.theme.spacing(1)};
+  color: ${(props) => props.theme.text80};
+  display: inline-flex;
+  align-items: center;
+  padding: ${(props) => props.theme.spacing(1)};
+  gap: ${(props) => props.theme.spacing(1)};
+
+  :hover {
+    filter: brightness(95%);
+  }
+
+  img {
+    height: 14px;
+    width: 14px;
+    object-fit: cover;
+  }
+`;
+
+function CompanyChip({ name, picture }: CompanyChipPropsType) {
+  return (
+    <StyledContainer data-testid="company-chip">
+      {picture && (
+        <img
+          data-testid="company-chip-image"
+          src={picture?.toString()}
+          alt={`${name}-company-logo`}
+        />
+      )}
+      {name}
+    </StyledContainer>
+  );
+}
+
+export default CompanyChip;

front/src/modules/companies/components/CompanyEditableNameCell.tsx

@@ -0,0 +1,42 @@
+import { useOpenCommentRightDrawer } from '@/comments/hooks/useOpenCommentRightDrawer';
+import EditableChip from '@/ui/components/editable-cell/EditableChip';
+import { getLogoUrlFromDomainName } from '@/utils/utils';
+
+import { Company } from '../interfaces/company.interface';
+import { updateCompany } from '../services';
+
+import CompanyChip from './CompanyChip';
+
+type OwnProps = {
+  company: Company;
+};
+
+export function CompanyEditableNameChipCell({ company }: OwnProps) {
+  const openCommentRightDrawer = useOpenCommentRightDrawer();
+
+  function handleCommentClick() {
+    openCommentRightDrawer([
+      {
+        type: 'Company',
+        id: company.id,
+      },
+    ]);
+  }
+
+  return (
+    <EditableChip
+      value={company.name || ''}
+      placeholder="Name"
+      picture={getLogoUrlFromDomainName(company.domainName)}
+      changeHandler={(value: string) => {
+        updateCompany({
+          ...company,
+          name: value,
+        });
+      }}
+      ChipComponent={CompanyChip}
+      commentCount={12}
+      onCommentClick={handleCommentClick}
+    />
+  );
+}

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

@@ -0,0 +1,88 @@
+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',
+      accountOwner: {
+        id: '7af20dea-0412-4c4c-8b13-d6f0e6e09e87',
+        email: 'john@example.com',
+        displayName: 'John Doe',
+        __typename: 'User',
+      },
+      pipes: [
+        {
+          id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6c',
+          name: 'Pipe 1',
+          icon: '!',
+          __typename: 'Pipe',
+        },
+      ],
+      __typename: 'companies',
+    } satisfies GraphqlQueryCompany;
+
+    const company = mapToCompany(graphQLCompany);
+    expect(company).toStrictEqual({
+      __typename: 'companies',
+      id: graphQLCompany.id,
+      name: graphQLCompany.name,
+      domainName: graphQLCompany.domainName,
+      createdAt: new Date(now.toUTCString()),
+      employees: graphQLCompany.employees,
+      address: graphQLCompany.address,
+      accountOwner: {
+        __typename: 'users',
+        id: '7af20dea-0412-4c4c-8b13-d6f0e6e09e87',
+        email: 'john@example.com',
+        displayName: 'John Doe',
+        workspaceMember: undefined,
+      },
+      pipes: [],
+    } satisfies Company);
+  });
+
+  it('should map Company to GraphQLCompany', () => {
+    const now = new Date();
+    now.setMilliseconds(0);
+    const company = {
+      id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6b',
+      name: 'ACME',
+      domainName: 'example.com',
+      employees: 10,
+      address: '1 Infinite Loop, 95014 Cupertino, California, USA',
+      pipes: [],
+      accountOwner: {
+        id: '522d4ec4-c46b-4360-a0a7-df8df170be81',
+        email: 'john@example.com',
+        displayName: 'John Doe',
+        __typename: 'users',
+      },
+      createdAt: now,
+      __typename: 'companies',
+    } 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: 'companies',
+    } satisfies GraphqlMutationCompany);
+  });
+});

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

@@ -0,0 +1,78 @@
+import {
+  GraphqlQueryPipeline,
+  Pipeline,
+} from '../../pipelines/interfaces/pipeline.interface';
+import {
+  GraphqlQueryUser,
+  mapToUser,
+  User,
+} from '../../users/interfaces/user.interface';
+
+export type Company = {
+  __typename: 'companies';
+  id: string;
+  name?: string;
+  domainName?: string;
+  employees?: number | null;
+  address?: string;
+
+  createdAt?: Date;
+
+  pipes?: Pipeline[];
+  accountOwner?: User | null;
+};
+
+export type GraphqlQueryCompany = {
+  id: string;
+  name?: string;
+  domainName?: string;
+  employees?: number | null;
+  address?: string;
+
+  createdAt?: string;
+
+  accountOwner?: GraphqlQueryUser | null;
+  pipes?: GraphqlQueryPipeline[] | null;
+  __typename: string;
+};
+
+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: 'companies',
+  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: [],
+});
+
+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: 'companies',
+});

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

@@ -0,0 +1,19 @@
+import { reduceSortsToOrderBy } from '@/filters-and-sorts/helpers';
+
+import { CompaniesSelectedSortType } from '../select';
+
+describe('reduceSortsToOrderBy', () => {
+  it('should return an array of objects with the id as key and the order as value', () => {
+    const sorts = [
+      { key: 'name', label: 'name', order: 'asc', _type: 'default_sort' },
+      {
+        key: 'domainName',
+        label: 'domainName',
+        order: 'desc',
+        _type: 'default_sort',
+      },
+    ] satisfies CompaniesSelectedSortType[];
+    const result = reduceSortsToOrderBy(sorts);
+    expect(result).toEqual([{ name: 'asc' }, { domainName: 'desc' }]);
+  });
+});

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

@@ -0,0 +1,2 @@
+export * from './select';
+export * from './update';

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

@@ -0,0 +1,48 @@
+import { gql, QueryResult, useQuery } from '@apollo/client';
+
+import { SelectedSortType } from '@/filters-and-sorts/interfaces/sorts/interface';
+import {
+  CompanyOrderByWithRelationInput as Companies_Order_By,
+  CompanyWhereInput as Companies_Bool_Exp,
+  SortOrder as Order_By,
+} from '~/generated/graphql';
+
+import { GraphqlQueryCompany } from '../interfaces/company.interface';
+
+export type CompaniesSelectedSortType = SelectedSortType<Companies_Order_By>;
+
+export const GET_COMPANIES = gql`
+  query GetCompanies(
+    $orderBy: [CompanyOrderByWithRelationInput!]
+    $where: CompanyWhereInput
+  ) {
+    companies: findManyCompany(orderBy: $orderBy, where: $where) {
+      id
+      domainName
+      name
+      createdAt
+      address
+      employees
+      accountOwner {
+        id
+        email
+        displayName
+      }
+    }
+  }
+`;
+
+export function useCompaniesQuery(
+  orderBy: Companies_Order_By[],
+  where: Companies_Bool_Exp,
+): QueryResult<{ companies: GraphqlQueryCompany[] }> {
+  return useQuery<{ companies: GraphqlQueryCompany[] }>(GET_COMPANIES, {
+    variables: { orderBy, where },
+  });
+}
+
+export const defaultOrderBy: Companies_Order_By[] = [
+  {
+    createdAt: Order_By.Desc,
+  },
+];

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

@@ -0,0 +1,111 @@
+import { FetchResult, gql } from '@apollo/client';
+
+import { apiClient } from '~/apollo';
+
+import { Company, mapToGqlCompany } from '../interfaces/company.interface';
+
+export const UPDATE_COMPANY = gql`
+  mutation UpdateCompany(
+    $id: String
+    $name: String
+    $domainName: String
+    $accountOwnerId: String
+    $createdAt: DateTime
+    $address: String
+    $employees: Int
+  ) {
+    updateOneCompany(
+      where: { id: $id }
+      data: {
+        accountOwner: { connect: { id: $accountOwnerId } }
+        address: { set: $address }
+        domainName: { set: $domainName }
+        employees: { set: $employees }
+        name: { set: $name }
+        createdAt: { set: $createdAt }
+      }
+    ) {
+      accountOwner {
+        id
+        email
+        displayName
+      }
+      address
+      createdAt
+      domainName
+      employees
+      id
+      name
+    }
+  }
+`;
+
+export const INSERT_COMPANY = gql`
+  mutation InsertCompany(
+    $id: String!
+    $name: String!
+    $domainName: String!
+    $createdAt: DateTime
+    $address: String!
+    $employees: Int
+  ) {
+    createOneCompany(
+      data: {
+        id: $id
+        name: $name
+        domainName: $domainName
+        createdAt: $createdAt
+        address: $address
+        employees: $employees
+      }
+    ) {
+      address
+      createdAt
+      domainName
+      employees
+      id
+      name
+    }
+  }
+`;
+
+export const DELETE_COMPANIES = gql`
+  mutation DeleteCompanies($ids: [String!]) {
+    deleteManyCompany(where: { id: { in: $ids } }) {
+      count
+    }
+  }
+`;
+
+export async function updateCompany(
+  company: Company,
+): Promise<FetchResult<Company>> {
+  const result = await apiClient.mutate({
+    mutation: UPDATE_COMPANY,
+    variables: mapToGqlCompany(company),
+  });
+  return result;
+}
+
+export async function insertCompany(
+  company: Company,
+): Promise<FetchResult<Company>> {
+  const result = await apiClient.mutate({
+    mutation: INSERT_COMPANY,
+    variables: mapToGqlCompany(company),
+    refetchQueries: ['GetCompanies'],
+  });
+
+  return result;
+}
+
+export async function deleteCompanies(
+  peopleIds: string[],
+): Promise<FetchResult<Company>> {
+  const result = await apiClient.mutate({
+    mutation: DELETE_COMPANIES,
+    variables: { ids: peopleIds },
+  });
+
+  return result;
+}