feat: disable atomic operation on nestjs graphql models (#751)

* feat: no atomic * feat: update front not atomic operations * feat: optional fields for person model & use proper gql type * Fix bug display name * Fix bug update user * Fixed bug avatar URL * Fixed display name on people cell * Fix lint * Fixed storybook display name * Fix storybook requests --------- Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
2023-07-20 21:23:35 +02:00
parent 663c4d5c3f
commit 872ec9e6bb
58 changed files with 622 additions and 652 deletions
--- a/front/src/modules/people/components/EditablePeopleFullName.tsx
+++ b/front/src/modules/people/components/EditablePeopleFullName.tsx
@ -8,7 +8,14 @@ import { PersonChip } from './PersonChip';
 type OwnProps = {
  person:
    | Partial<
-        Pick<Person, 'id' | 'firstName' | 'lastName' | '_commentThreadCount'>
+        Pick<
+          Person,
+          | 'id'
+          | 'firstName'
+          | 'lastName'
+          | 'displayName'
+          | '_commentThreadCount'
+        >
      >
    | null
    | undefined;
@ -49,7 +56,7 @@ export function EditablePeopleFullName({
      nonEditModeContent={
        <NoEditModeContainer>
          <PersonChip
-            name={person?.firstName + ' ' + person?.lastName}
+            name={`${person?.firstName ?? ''} ${person?.lastName ?? ''}`}
            id={person?.id ?? ''}
            clickable
          />
--- a/front/src/modules/people/components/PeopleCompanyCreateCell.tsx
+++ b/front/src/modules/people/components/PeopleCompanyCreateCell.tsx
@ -9,8 +9,8 @@ import { isCreateModeScopedState } from '@/ui/table/editable-cell/states/isCreat
 import { EditableCellDoubleTextEditMode } from '@/ui/table/editable-cell/types/EditableCellDoubleTextEditMode';
 import {
  Person,
-  useInsertCompanyMutation,
-  useUpdatePeopleMutation,
+  useInsertOneCompanyMutation,
+  useUpdateOnePersonMutation,
 } from '~/generated/graphql';
 import { logError } from '~/utils/logError';

@ -30,8 +30,8 @@ export function PeopleCompanyCreateCell({ people }: OwnProps) {
  const [companyName, setCompanyName] = useState(currentSearchFilter);

  const [companyDomainName, setCompanyDomainName] = useState('');
-  const [insertCompany] = useInsertCompanyMutation();
-  const [updatePeople] = useUpdatePeopleMutation();
+  const [insertCompany] = useInsertOneCompanyMutation();
+  const [updatePerson] = useUpdateOnePersonMutation();

  function handleDoubleTextChange(leftValue: string, rightValue: string): void {
    setCompanyDomainName(leftValue);
@ -47,11 +47,12 @@ export function PeopleCompanyCreateCell({ people }: OwnProps) {
    try {
      await insertCompany({
        variables: {
-          id: newCompanyId,
-          name: companyName,
-          domainName: companyDomainName,
-          address: '',
-          createdAt: new Date().toISOString(),
+          data: {
+            id: newCompanyId,
+            name: companyName,
+            domainName: companyDomainName,
+            address: '',
+          },
        },
        refetchQueries: [
          getOperationName(GET_COMPANIES) ?? '',
@ -59,10 +60,14 @@ export function PeopleCompanyCreateCell({ people }: OwnProps) {
        ],
      });

-      await updatePeople({
+      await updatePerson({
        variables: {
-          ...people,
-          companyId: newCompanyId,
+          where: {
+            id: people.id,
+          },
+          data: {
+            company: { connect: { id: newCompanyId } },
+          },
        },
      });
    } catch (error) {
--- a/front/src/modules/people/components/PeopleCompanyPicker.tsx
+++ b/front/src/modules/people/components/PeopleCompanyPicker.tsx
@ -10,7 +10,11 @@ import { RelationPickerHotkeyScope } from '@/ui/relation-picker/types/RelationPi
 import { useEditableCell } from '@/ui/table/editable-cell/hooks/useEditableCell';
 import { isCreateModeScopedState } from '@/ui/table/editable-cell/states/isCreateModeScopedState';
 import { TableHotkeyScope } from '@/ui/table/types/TableHotkeyScope';
-import { Company, Person, useUpdatePeopleMutation } from '~/generated/graphql';
+import {
+  Company,
+  Person,
+  useUpdateOnePersonMutation,
+} from '~/generated/graphql';

 export type OwnProps = {
  people: Pick<Person, 'id'> & { company?: Pick<Company, 'id'> | null };
@ -22,7 +26,7 @@ export function PeopleCompanyPicker({ people }: OwnProps) {
  const [searchFilter] = useRecoilScopedState(
    relationPickerSearchFilterScopedState,
  );
-  const [updatePeople] = useUpdatePeopleMutation();
+  const [updatePerson] = useUpdateOnePersonMutation();

  const { closeEditableCell } = useEditableCell();

@ -34,10 +38,14 @@ export function PeopleCompanyPicker({ people }: OwnProps) {
  });

  async function handleEntitySelected(entity: any) {
-    await updatePeople({
+    await updatePerson({
      variables: {
-        ...people,
-        companyId: entity.id,
+        where: {
+          id: people.id,
+        },
+        data: {
+          company: { connect: { id: entity.id } },
+        },
      },
    });

--- a/front/src/modules/people/components/PersonPropertyBox.tsx
+++ b/front/src/modules/people/components/PersonPropertyBox.tsx
@ -9,7 +9,11 @@ import { PropertyBox } from '@/ui/editable-field/property-box/components/Propert
 import { DateEditableField } from '@/ui/editable-field/variants/components/DateEditableField';
 import { PhoneEditableField } from '@/ui/editable-field/variants/components/PhoneEditableField';
 import { TextEditableField } from '@/ui/editable-field/variants/components/TextEditableField';
-import { Company, Person, useUpdatePeopleMutation } from '~/generated/graphql';
+import {
+  Company,
+  Person,
+  useUpdateOnePersonMutation,
+} from '~/generated/graphql';

 import { PeopleCompanyEditableField } from '../editable-field/components/PeopleCompanyEditableField';

@ -23,7 +27,7 @@ type OwnProps = {
 };

 export function PersonPropertyBox({ person }: OwnProps) {
-  const [updatePerson] = useUpdatePeopleMutation();
+  const [updatePerson] = useUpdateOnePersonMutation();

  return (
    <PropertyBox extraPadding={true}>
@ -34,8 +38,12 @@ export function PersonPropertyBox({ person }: OwnProps) {
        onSubmit={(newEmail) => {
          updatePerson({
            variables: {
-              id: person.id,
-              email: newEmail,
+              where: {
+                id: person.id,
+              },
+              data: {
+                email: newEmail,
+              },
            },
          });
        }}
@ -47,8 +55,12 @@ export function PersonPropertyBox({ person }: OwnProps) {
        onSubmit={(newPhone) => {
          updatePerson({
            variables: {
-              id: person.id,
-              phone: newPhone,
+              where: {
+                id: person.id,
+              },
+              data: {
+                phone: newPhone,
+              },
            },
          });
        }}
@ -59,8 +71,12 @@ export function PersonPropertyBox({ person }: OwnProps) {
        onSubmit={(newDate) => {
          updatePerson({
            variables: {
-              id: person.id,
-              createdAt: newDate,
+              where: {
+                id: person.id,
+              },
+              data: {
+                createdAt: newDate,
+              },
            },
          });
        }}
@ -73,8 +89,12 @@ export function PersonPropertyBox({ person }: OwnProps) {
        onSubmit={(newCity) => {
          updatePerson({
            variables: {
-              id: person.id,
-              city: newCity,
+              where: {
+                id: person.id,
+              },
+              data: {
+                city: newCity,
+              },
            },
          });
        }}
--- a/front/src/modules/people/editable-field/components/PeopleCompanyEditableFieldEditMode.tsx
+++ b/front/src/modules/people/editable-field/components/PeopleCompanyEditableFieldEditMode.tsx
@ -4,7 +4,11 @@ import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedSta
 import { SingleEntitySelect } from '@/ui/relation-picker/components/SingleEntitySelect';
 import { relationPickerSearchFilterScopedState } from '@/ui/relation-picker/states/relationPickerSearchFilterScopedState';
 import { EntityForSelect } from '@/ui/relation-picker/types/EntityForSelect';
-import { Company, Person, useUpdatePeopleMutation } from '~/generated/graphql';
+import {
+  Company,
+  Person,
+  useUpdateOnePersonMutation,
+} from '~/generated/graphql';

 export type OwnProps = {
  people: Pick<Person, 'id'> & { company?: Pick<Company, 'id'> | null };
@ -16,7 +20,7 @@ export function PeopleCompanyEditableFieldEditMode({ people }: OwnProps) {
  const [searchFilter] = useRecoilScopedState(
    relationPickerSearchFilterScopedState,
  );
-  const [updatePeople] = useUpdatePeopleMutation();
+  const [updatePerson] = useUpdateOnePersonMutation();

  const companies = useFilteredSearchCompanyQuery({
    searchFilter,
@ -24,10 +28,14 @@ export function PeopleCompanyEditableFieldEditMode({ people }: OwnProps) {
  });

  async function handleEntitySelected(entity: EntityForSelect) {
-    await updatePeople({
+    await updatePerson({
      variables: {
-        ...people,
-        companyId: entity.id,
+        where: {
+          id: people.id,
+        },
+        data: {
+          company: { connect: { id: entity.id } },
+        },
      },
    });
    closeEditableField();
--- a/front/src/modules/people/hooks/useSetPeopleEntityTable.ts
+++ b/front/src/modules/people/hooks/useSetPeopleEntityTable.ts
@ -19,7 +19,7 @@ export function useSetPeopleEntityTable() {
            .valueOrThrow();

          if (currentEmail !== person.email) {
-            set(peopleEmailFamilyState(person.id), person.email);
+            set(peopleEmailFamilyState(person.id), person.email ?? null);
          }

          const currentCity = snapshot
@ -27,7 +27,7 @@ export function useSetPeopleEntityTable() {
            .valueOrThrow();

          if (currentCity !== person.city) {
-            set(peopleCityFamilyState(person.id), person.city);
+            set(peopleCityFamilyState(person.id), person.city ?? null);
          }

          const currentCompany = snapshot
@ -45,7 +45,7 @@ export function useSetPeopleEntityTable() {
            .valueOrThrow();

          if (currentPhone !== person.phone) {
-            set(peoplePhoneFamilyState(person.id), person.phone);
+            set(peoplePhoneFamilyState(person.id), person.phone ?? null);
          }

          const currentCreatedAt = snapshot
@ -66,9 +66,10 @@ export function useSetPeopleEntityTable() {
            currentNameCell.commentCount !== person._commentThreadCount
          ) {
            set(peopleNameCellFamilyState(person.id), {
-              firstName: person.firstName,
-              lastName: person.lastName,
+              firstName: person.firstName ?? null,
+              lastName: person.lastName ?? null,
              commentCount: person._commentThreadCount,
+              displayName: person.displayName ?? null,
            });
          }
        }
--- a/front/src/modules/people/queries/tests/select.test.ts
+++ b/front/src/modules/people/queries/tests/select.test.ts
@ -9,13 +9,11 @@ describe('reduceSortsToOrderBy', () => {
        key: 'firstName',
        label: 'firstName',
        order: 'asc',
-        _type: 'default_sort',
      },
      {
        key: 'lastName',
        label: 'lastName',
        order: 'desc',
-        _type: 'default_sort',
      },
    ] satisfies PeopleSelectedSortType[];
    const result = reduceSortsToOrderBy(sorts);
--- a/front/src/modules/people/queries/select.ts
+++ b/front/src/modules/people/queries/select.ts
@ -27,6 +27,7 @@ export const GET_PEOPLE = gql`
      city
      firstName
      lastName
+      displayName
      createdAt
      _commentThreadCount
      company {
@ -103,6 +104,7 @@ export const GET_PERSON_NAMES_AND_COMMENT_COUNT = gql`
      id
      firstName
      lastName
+      displayName
      _commentThreadCount
    }
  }
--- a/front/src/modules/people/queries/update.ts
+++ b/front/src/modules/people/queries/update.ts
@ -1,29 +1,11 @@
 import { gql } from '@apollo/client';

-export const UPDATE_PERSON = gql`
-  mutation UpdatePeople(
-    $id: String
-    $firstName: String
-    $lastName: String
-    $phone: String
-    $city: String
-    $companyId: String
-    $email: String
-    $createdAt: DateTime
+export const UPDATE_ONE_PERSON = gql`
+  mutation UpdateOnePerson(
+    $where: PersonWhereUniqueInput!
+    $data: PersonUpdateInput!
  ) {
-    updateOnePerson(
-      where: { id: $id }
-      data: {
-        city: { set: $city }
-        company: { connect: { id: $companyId } }
-        email: { set: $email }
-        firstName: { set: $firstName }
-        id: { set: $id }
-        lastName: { set: $lastName }
-        phone: { set: $phone }
-        createdAt: { set: $createdAt }
-      }
-    ) {
+    updateOnePerson(data: $data, where: $where) {
      id
      city
      company {
@ -34,33 +16,16 @@ export const UPDATE_PERSON = gql`
      email
      firstName
      lastName
+      displayName
      phone
      createdAt
    }
  }
 `;

-export const INSERT_PERSON = gql`
-  mutation InsertPerson(
-    $id: String!
-    $firstName: String!
-    $lastName: String!
-    $phone: String!
-    $city: String!
-    $email: String!
-    $createdAt: DateTime
-  ) {
-    createOnePerson(
-      data: {
-        id: $id
-        firstName: $firstName
-        lastName: $lastName
-        phone: $phone
-        city: $city
-        email: $email
-        createdAt: $createdAt
-      }
-    ) {
+export const INSERT_ONE_PERSON = gql`
+  mutation InsertOnePerson($data: PersonCreateInput!) {
+    createOnePerson(data: $data) {
      id
      city
      company {
@ -71,14 +36,15 @@ export const INSERT_PERSON = gql`
      email
      firstName
      lastName
+      displayName
      phone
      createdAt
    }
  }
 `;

-export const DELETE_PEOPLE = gql`
-  mutation DeletePeople($ids: [String!]) {
+export const DELETE_MANY_PERSON = gql`
+  mutation DeleteManyPerson($ids: [String!]) {
    deleteManyPerson(where: { id: { in: $ids } }) {
      count
    }
--- a/front/src/modules/people/states/peopleNamesFamilyState.ts
+++ b/front/src/modules/people/states/peopleNamesFamilyState.ts
@ -5,6 +5,7 @@ export const peopleNameCellFamilyState = atomFamily<
    firstName: string | null;
    lastName: string | null;
    commentCount: number | null;
+    displayName: string | null;
  },
  string
 >({
@ -13,5 +14,6 @@ export const peopleNameCellFamilyState = atomFamily<
    firstName: null,
    lastName: null,
    commentCount: null,
+    displayName: null,
  },
 });
--- a/front/src/modules/people/table/components/EditablePeopleCityCell.tsx
+++ b/front/src/modules/people/table/components/EditablePeopleCityCell.tsx
@ -4,12 +4,12 @@ import { useRecoilValue } from 'recoil';
 import { peopleCityFamilyState } from '@/people/states/peopleCityFamilyState';
 import { EditableCellText } from '@/ui/table/editable-cell/types/EditableCellText';
 import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
-import { useUpdatePeopleMutation } from '~/generated/graphql';
+import { useUpdateOnePersonMutation } from '~/generated/graphql';

 export function EditablePeopleCityCell() {
  const currentRowEntityId = useCurrentRowEntityId();

-  const [updatePerson] = useUpdatePeopleMutation();
+  const [updatePerson] = useUpdateOnePersonMutation();

  const city = useRecoilValue(peopleCityFamilyState(currentRowEntityId ?? ''));

@ -26,8 +26,12 @@ export function EditablePeopleCityCell() {
      onSubmit={() =>
        updatePerson({
          variables: {
-            id: currentRowEntityId,
-            city: internalValue,
+            where: {
+              id: currentRowEntityId,
+            },
+            data: {
+              city: internalValue,
+            },
          },
        })
      }
--- a/front/src/modules/people/table/components/EditablePeopleCreatedAtCell.tsx
+++ b/front/src/modules/people/table/components/EditablePeopleCreatedAtCell.tsx
@ -4,7 +4,7 @@ import { useRecoilValue } from 'recoil';
 import { peopleCreatedAtFamilyState } from '@/people/states/peopleCreatedAtFamilyState';
 import { EditableCellDate } from '@/ui/table/editable-cell/types/EditableCellDate';
 import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
-import { useUpdatePeopleMutation } from '~/generated/graphql';
+import { useUpdateOnePersonMutation } from '~/generated/graphql';

 export function EditablePeopleCreatedAtCell() {
  const currentRowEntityId = useCurrentRowEntityId();
@ -13,7 +13,7 @@ export function EditablePeopleCreatedAtCell() {
    peopleCreatedAtFamilyState(currentRowEntityId ?? ''),
  );

-  const [updatePerson] = useUpdatePeopleMutation();
+  const [updatePerson] = useUpdateOnePersonMutation();

  return (
    <EditableCellDate
@ -22,8 +22,12 @@ export function EditablePeopleCreatedAtCell() {

        await updatePerson({
          variables: {
-            id: currentRowEntityId,
-            createdAt: newDate.toISOString(),
+            where: {
+              id: currentRowEntityId,
+            },
+            data: {
+              createdAt: newDate.toISOString(),
+            },
          },
        });
      }}
--- a/front/src/modules/people/table/components/EditablePeopleEmailCell.tsx
+++ b/front/src/modules/people/table/components/EditablePeopleEmailCell.tsx
@ -4,12 +4,12 @@ import { useRecoilValue } from 'recoil';
 import { peopleEmailFamilyState } from '@/people/states/peopleEmailFamilyState';
 import { EditableCellText } from '@/ui/table/editable-cell/types/EditableCellText';
 import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
-import { useUpdatePeopleMutation } from '~/generated/graphql';
+import { useUpdateOnePersonMutation } from '~/generated/graphql';

 export function EditablePeopleEmailCell() {
  const currentRowEntityId = useCurrentRowEntityId();

-  const [updatePerson] = useUpdatePeopleMutation();
+  const [updatePerson] = useUpdateOnePersonMutation();

  const email = useRecoilValue(
    peopleEmailFamilyState(currentRowEntityId ?? ''),
@ -28,8 +28,12 @@ export function EditablePeopleEmailCell() {
      onSubmit={() =>
        updatePerson({
          variables: {
-            id: currentRowEntityId,
-            email: internalValue,
+            where: {
+              id: currentRowEntityId,
+            },
+            data: {
+              email: internalValue,
+            },
          },
        })
      }
--- a/front/src/modules/people/table/components/EditablePeopleFullNameCell.tsx
+++ b/front/src/modules/people/table/components/EditablePeopleFullNameCell.tsx
@ -5,16 +5,16 @@ import { useRecoilValue } from 'recoil';
 import { EditablePeopleFullName } from '@/people/components/EditablePeopleFullName';
 import { peopleNameCellFamilyState } from '@/people/states/peopleNamesFamilyState';
 import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
-import { useUpdatePeopleMutation } from '~/generated/graphql';
+import { useUpdateOnePersonMutation } from '~/generated/graphql';

 import { GET_PERSON } from '../../queries';

 export function EditablePeopleFullNameCell() {
  const currentRowEntityId = useCurrentRowEntityId();

-  const [updatePerson] = useUpdatePeopleMutation();
+  const [updatePerson] = useUpdateOnePersonMutation();

-  const { commentCount, firstName, lastName } = useRecoilValue(
+  const { commentCount, firstName, lastName, displayName } = useRecoilValue(
    peopleNameCellFamilyState(currentRowEntityId ?? ''),
  );

@ -33,6 +33,7 @@ export function EditablePeopleFullNameCell() {
        _commentThreadCount: commentCount ?? undefined,
        firstName: internalFirstName,
        lastName: internalLastName,
+        displayName: displayName ?? undefined,
      }}
      onChange={(firstName, lastName) => {
        setInternalFirstName(firstName);
@ -41,9 +42,13 @@ export function EditablePeopleFullNameCell() {
      onSubmit={() =>
        updatePerson({
          variables: {
-            id: currentRowEntityId,
-            firstName: internalFirstName,
-            lastName: internalLastName,
+            where: {
+              id: currentRowEntityId,
+            },
+            data: {
+              firstName: internalFirstName,
+              lastName: internalLastName,
+            },
          },
          refetchQueries: [getOperationName(GET_PERSON) ?? ''],
        })
--- a/front/src/modules/people/table/components/EditablePeoplePhoneCell.tsx
+++ b/front/src/modules/people/table/components/EditablePeoplePhoneCell.tsx
@ -4,12 +4,12 @@ import { useRecoilValue } from 'recoil';
 import { peoplePhoneFamilyState } from '@/people/states/peoplePhoneFamilyState';
 import { EditableCellPhone } from '@/ui/table/editable-cell/types/EditableCellPhone';
 import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
-import { useUpdatePeopleMutation } from '~/generated/graphql';
+import { useUpdateOnePersonMutation } from '~/generated/graphql';

 export function EditablePeoplePhoneCell() {
  const currentRowEntityId = useCurrentRowEntityId();

-  const [updatePerson] = useUpdatePeopleMutation();
+  const [updatePerson] = useUpdateOnePersonMutation();

  const phone = useRecoilValue(
    peoplePhoneFamilyState(currentRowEntityId ?? ''),
@ -28,8 +28,12 @@ export function EditablePeoplePhoneCell() {
      onSubmit={() =>
        updatePerson({
          variables: {
-            id: currentRowEntityId,
-            phone: internalValue,
+            where: {
+              id: currentRowEntityId,
+            },
+            data: {
+              phone: internalValue,
+            },
          },
        })
      }
--- a/front/src/modules/people/table/components/TableActionBarButtonDeletePeople.tsx
+++ b/front/src/modules/people/table/components/TableActionBarButtonDeletePeople.tsx
@ -6,14 +6,14 @@ import { IconTrash } from '@/ui/icon/index';
 import { EntityTableActionBarButton } from '@/ui/table/action-bar/components/EntityTableActionBarButton';
 import { useResetTableRowSelection } from '@/ui/table/hooks/useResetTableRowSelection';
 import { selectedRowIdsSelector } from '@/ui/table/states/selectedRowIdsSelector';
-import { useDeletePeopleMutation } from '~/generated/graphql';
+import { useDeleteManyPersonMutation } from '~/generated/graphql';

 export function TableActionBarButtonDeletePeople() {
  const selectedRowIds = useRecoilValue(selectedRowIdsSelector);

  const resetRowSelection = useResetTableRowSelection();

-  const [deletePeople] = useDeletePeopleMutation({
+  const [deleteManyPerson] = useDeleteManyPersonMutation({
    refetchQueries: [getOperationName(GET_PEOPLE) ?? ''],
  });

@ -22,7 +22,7 @@ export function TableActionBarButtonDeletePeople() {

    resetRowSelection();

-    await deletePeople({
+    await deleteManyPerson({
      variables: {
        ids: rowIdsToDelete,
      },