Use Graphql types in FE and complete mappers removal (#348)

Fix Typescript build issues
2023-06-21 10:52:00 -07:00
parent b179d1f1f0
commit 8a330b9746
35 changed files with 398 additions and 574 deletions
--- a/front/src/pages/companies/Companies.tsx
+++ b/front/src/pages/companies/Companies.tsx
@ -3,14 +3,9 @@ import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { v4 as uuidv4 } from 'uuid';

-import {
-  Company,
-  mapToCompany,
-} from '@/companies/interfaces/company.interface';
 import {
  CompaniesSelectedSortType,
  defaultOrderBy,
-  insertCompany,
  useCompaniesQuery,
 } from '@/companies/services';
 import {
@ -23,8 +18,13 @@ import { EntityTable } from '@/ui/components/table/EntityTable';
 import { IconBuildingSkyscraper } from '@/ui/icons/index';
 import { IconList } from '@/ui/icons/index';
 import { WithTopBarContainer } from '@/ui/layout/containers/WithTopBarContainer';
-import { BoolExpType } from '@/utils/interfaces/generic.interface';
-import { CompanyOrderByWithRelationInput as Companies_Order_By } from '~/generated/graphql';
+import {
+  CompanyOrderByWithRelationInput as Companies_Order_By,
+  CompanyWhereInput,
+  GetCompaniesQuery,
+  InsertCompanyMutationVariables,
+  useInsertCompanyMutation,
+} from '~/generated/graphql';

 import { TableActionBarButtonCreateCommentThreadCompany } from './table/TableActionBarButtonCreateCommentThreadCompany';
 import { TableActionBarButtonDeleteCompanies } from './table/TableActionBarButtonDeleteCompanies';
@ -38,15 +38,16 @@ const StyledCompaniesContainer = styled.div`
 `;

 export function Companies() {
+  const [insertCompany] = useInsertCompanyMutation();
  const [orderBy, setOrderBy] = useState<Companies_Order_By[]>(defaultOrderBy);
-  const [where, setWhere] = useState<BoolExpType<Company>>({});
+  const [where, setWhere] = useState<CompanyWhereInput>({});

  const updateSorts = useCallback((sorts: Array<CompaniesSelectedSortType>) => {
    setOrderBy(sorts.length ? reduceSortsToOrderBy(sorts) : defaultOrderBy);
  }, []);

  const updateFilters = useCallback(
-    (filters: Array<SelectedFilterType<Company>>) => {
+    (filters: Array<SelectedFilterType<GetCompaniesQuery['companies'][0]>>) => {
      setWhere(reduceFiltersToWhere(filters));
    },
    [],
@ -54,21 +55,19 @@ export function Companies() {

  const { data } = useCompaniesQuery(orderBy, where);

-  const companies = data?.companies.map(mapToCompany) ?? [];
+  const companies = data?.companies ?? [];

  async function handleAddButtonClick() {
-    const newCompany: Company = {
+    const newCompany: InsertCompanyMutationVariables = {
      id: uuidv4(),
      name: '',
      domainName: '',
      employees: null,
      address: '',
      createdAt: new Date().toISOString(),
-      accountOwner: null,
-      __typename: 'Company',
    };

-    await insertCompany(newCompany);
+    await insertCompany({ variables: newCompany });
  }

  const companiesColumns = useCompaniesColumns();
--- a/front/src/pages/companies/companies-columns.tsx
+++ b/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 { updateCompany } from '@/companies/services';
 import {
  PersonChip,
  PersonChipPropsType,
@ -22,12 +21,16 @@ import {
  IconUsers,
 } from '@/ui/icons/index';
 import { getCheckBoxColumn } from '@/ui/tables/utils/getCheckBoxColumn';
-import { mapToUser, User } from '@/users/interfaces/user.interface';
-import { GetCompaniesQueryHookResult, QueryMode } from '~/generated/graphql';
+import {
+  GetCompaniesQuery,
+  QueryMode,
+  useUpdateCompanyMutation,
+} from '~/generated/graphql';

-const columnHelper = createColumnHelper<GetCompaniesQueryHookResult>();
+const columnHelper = createColumnHelper<GetCompaniesQuery['companies'][0]>();

 export const useCompaniesColumns = () => {
+  const [updateCompany] = useUpdateCompanyMutation();
  return useMemo(() => {
    return [
      getCheckBoxColumn(),
@ -54,7 +57,12 @@ export const useCompaniesColumns = () => {
            changeHandler={(value) => {
              const company = { ...props.row.original };
              company.domainName = value;
-              updateCompany(company);
+              updateCompany({
+                variables: {
+                  ...company,
+                  accountOwnerId: company.accountOwner?.id,
+                },
+              });
            }}
          />
        ),
@ -71,13 +79,13 @@ export const useCompaniesColumns = () => {
            changeHandler={(value) => {
              const company = { ...props.row.original };

-              if (value === '') {
-                company.employees = null;
-                updateCompany(company);
-              } else if (!Number.isNaN(Number(value))) {
-                company.employees = Number(value);
-                updateCompany(company);
-              }
+              updateCompany({
+                variables: {
+                  ...company,
+                  employees: value === '' ? null : Number(value),
+                  accountOwnerId: company.accountOwner?.id,
+                },
+              });
            }}
          />
        ),
@ -94,7 +102,12 @@ export const useCompaniesColumns = () => {
            changeHandler={(value) => {
              const company = { ...props.row.original };
              company.address = value;
-              updateCompany(company);
+              updateCompany({
+                variables: {
+                  ...company,
+                  accountOwnerId: company.accountOwner?.id,
+                },
+              });
            }}
          />
        ),
@ -117,7 +130,12 @@ export const useCompaniesColumns = () => {
            changeHandler={(value: Date) => {
              const company = { ...props.row.original };
              company.createdAt = value.toISOString();
-              updateCompany(company);
+              updateCompany({
+                variables: {
+                  ...company,
+                  accountOwnerId: company.accountOwner?.id,
+                },
+              });
            }}
          />
        ),
@ -131,21 +149,24 @@ export const useCompaniesColumns = () => {
          />
        ),
        cell: (props) => (
-          <EditableRelation<User, PersonChipPropsType>
+          <EditableRelation<any, PersonChipPropsType>
            relation={props.row.original.accountOwner}
            searchPlaceholder="Account Owner"
            ChipComponent={PersonChip}
            chipComponentPropsMapper={(
-              accountOwner: User,
+              accountOwner: any,
            ): PersonChipPropsType => {
              return {
                name: accountOwner.displayName || '',
              };
            }}
-            onChange={(relation: User) => {
-              const company = { ...props.row.original };
-              company.accountOwnerId = relation.id;
-              updateCompany(company);
+            onChange={(relation: any) => {
+              updateCompany({
+                variables: {
+                  ...props.row.original,
+                  accountOwnerId: relation.id,
+                },
+              });
            }}
            searchConfig={
              {
@ -156,15 +177,15 @@ export const useCompaniesColumns = () => {
                    mode: QueryMode.Insensitive,
                  },
                }),
-                resultMapper: (accountOwner) => ({
-                  render: (accountOwner) => accountOwner.displayName,
-                  value: mapToUser(accountOwner),
+                resultMapper: (accountOwner: any) => ({
+                  render: (accountOwner: any) => accountOwner.displayName,
+                  value: accountOwner,
                }),
-              } satisfies SearchConfigType<User>
+              } satisfies SearchConfigType
            }
          />
        ),
      }),
    ];
-  }, []);
+  }, [updateCompany]);
 };
--- a/front/src/pages/companies/companies-filters.tsx
+++ b/front/src/pages/companies/companies-filters.tsx
@ -1,4 +1,3 @@
-import { Company } from '@/companies/interfaces/company.interface';
 import { FilterConfigType } from '@/filters-and-sorts/interfaces/filters/interface';
 import { SEARCH_USER_QUERY } from '@/search/services/search';
 import {
@ -9,8 +8,7 @@ import {
  IconUser,
  IconUsers,
 } from '@/ui/icons/index';
-import { mapToUser, User } from '@/users/interfaces/user.interface';
-import { QueryMode } from '~/generated/graphql';
+import { QueryMode, User } from '~/generated/graphql';

 export const nameFilter = {
  key: 'name',
@ -21,14 +19,14 @@ export const nameFilter = {
    {
      label: 'Contains',
      id: 'like',
-      whereTemplate: (searchString) => ({
+      whereTemplate: (searchString: string) => ({
        name: { contains: `%${searchString}%`, mode: QueryMode.Insensitive },
      }),
    },
    {
      label: 'Does not contain',
      id: 'not_like',
-      whereTemplate: (searchString) => ({
+      whereTemplate: (searchString: string) => ({
        NOT: [
          {
            name: {
@ -40,7 +38,7 @@ export const nameFilter = {
      }),
    },
  ],
-} satisfies FilterConfigType<Company, string>;
+} satisfies FilterConfigType<string>;

 export const employeesFilter = {
  key: 'employees',
@ -51,7 +49,7 @@ export const employeesFilter = {
    {
      label: 'Greater than',
      id: 'greater_than',
-      whereTemplate: (searchString) => ({
+      whereTemplate: (searchString: string) => ({
        employees: {
          gte: isNaN(Number(searchString)) ? undefined : Number(searchString),
        },
@ -60,14 +58,14 @@ export const employeesFilter = {
    {
      label: 'Less than',
      id: 'less_than',
-      whereTemplate: (searchString) => ({
+      whereTemplate: (searchString: string) => ({
        employees: {
          lte: isNaN(Number(searchString)) ? undefined : Number(searchString),
        },
      }),
    },
  ],
-} satisfies FilterConfigType<Company, string>;
+} satisfies FilterConfigType<string>;

 export const urlFilter = {
  key: 'domainName',
@ -78,7 +76,7 @@ export const urlFilter = {
    {
      label: 'Contains',
      id: 'like',
-      whereTemplate: (searchString) => ({
+      whereTemplate: (searchString: string) => ({
        domainName: {
          contains: `%${searchString}%`,
          mode: QueryMode.Insensitive,
@ -88,7 +86,7 @@ export const urlFilter = {
    {
      label: 'Does not contain',
      id: 'not_like',
-      whereTemplate: (searchString) => ({
+      whereTemplate: (searchString: string) => ({
        NOT: [
          {
            domainName: {
@ -100,7 +98,7 @@ export const urlFilter = {
      }),
    },
  ],
-} satisfies FilterConfigType<Company, string>;
+} satisfies FilterConfigType<string>;

 export const addressFilter = {
  key: 'address',
@ -111,14 +109,14 @@ export const addressFilter = {
    {
      label: 'Contains',
      id: 'like',
-      whereTemplate: (searchString) => ({
+      whereTemplate: (searchString: string) => ({
        address: { contains: `%${searchString}%`, mode: QueryMode.Insensitive },
      }),
    },
    {
      label: 'Does not contain',
      id: 'not_like',
-      whereTemplate: (searchString) => ({
+      whereTemplate: (searchString: string) => ({
        NOT: [
          {
            address: {
@ -130,7 +128,7 @@ export const addressFilter = {
      }),
    },
  ],
-} satisfies FilterConfigType<Company, string>;
+} satisfies FilterConfigType<string>;

 export const ccreatedAtFilter = {
  key: 'createdAt',
@ -141,7 +139,7 @@ export const ccreatedAtFilter = {
    {
      label: 'Greater than',
      id: 'greater_than',
-      whereTemplate: (searchString) => ({
+      whereTemplate: (searchString: string) => ({
        createdAt: {
          gte: searchString,
        },
@ -150,14 +148,14 @@ export const ccreatedAtFilter = {
    {
      label: 'Less than',
      id: 'less_than',
-      whereTemplate: (searchString) => ({
+      whereTemplate: (searchString: string) => ({
        createdAt: {
          lte: searchString,
        },
      }),
    },
  ],
-} satisfies FilterConfigType<Company, string>;
+} satisfies FilterConfigType<string>;

 export const accountOwnerFilter = {
  key: 'accountOwner',
@ -172,24 +170,24 @@ export const accountOwnerFilter = {
        mode: QueryMode.Insensitive,
      },
    }),
-    resultMapper: (data) => ({
-      value: mapToUser(data),
-      render: (owner) => owner.displayName,
+    resultMapper: (data: any) => ({
+      value: data,
+      render: (owner: any) => owner.displayName,
    }),
  },
-  selectedValueRender: (owner) => owner.displayName || '',
+  selectedValueRender: (owner: any) => owner.displayName || '',
  operands: [
    {
      label: 'Is',
      id: 'is',
-      whereTemplate: (owner) => ({
+      whereTemplate: (owner: any) => ({
        accountOwner: { is: { displayName: { equals: owner.displayName } } },
      }),
    },
    {
      label: 'Is not',
      id: 'is_not',
-      whereTemplate: (owner) => ({
+      whereTemplate: (owner: any) => ({
        NOT: [
          {
            accountOwner: {
@ -200,7 +198,7 @@ export const accountOwnerFilter = {
      }),
    },
  ],
-} satisfies FilterConfigType<Company, User>;
+} satisfies FilterConfigType<User>;

 export const availableFilters = [
  nameFilter,