Files
twenty/front/src/modules/people/components/PeopleCompanyCreateCell.tsx

79 lines
2.3 KiB
TypeScript

import { useState } from 'react';
import { v4 } from 'uuid';
import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState';
import { relationPickerSearchFilterScopedState } from '@/relation-picker/states/relationPickerSearchFilterScopedState';
import { isCreateModeScopedState } from '@/ui/components/editable-cell/states/isCreateModeScopedState';
import { EditableCellDoubleTextEditMode } from '@/ui/components/editable-cell/types/EditableCellDoubleTextEditMode';
import { logError } from '@/utils/logs/logError';
import {
Person,
useInsertCompanyMutation,
useUpdatePeopleMutation,
} from '~/generated/graphql';
type OwnProps = {
people: Pick<Person, 'id'>;
};
export function PeopleCompanyCreateCell({ people }: OwnProps) {
const [, setIsCreating] = useRecoilScopedState(isCreateModeScopedState);
const [currentSearchFilter] = useRecoilScopedState(
relationPickerSearchFilterScopedState,
);
const [companyName, setCompanyName] = useState(currentSearchFilter);
const [companyDomainName, setCompanyDomainName] = useState('');
const [insertCompany] = useInsertCompanyMutation();
const [updatePeople] = useUpdatePeopleMutation();
function handleDoubleTextChange(leftValue: string, rightValue: string): void {
setCompanyDomainName(leftValue);
setCompanyName(rightValue);
}
async function handleCompanyCreate(
companyName: string,
companyDomainName: string,
) {
const newCompanyId = v4();
try {
await insertCompany({
variables: {
id: newCompanyId,
name: companyName,
domainName: companyDomainName,
address: '',
createdAt: new Date().toISOString(),
},
});
await updatePeople({
variables: {
...people,
companyId: newCompanyId,
},
});
} catch (error) {
// TODO: handle error better
logError(error);
}
setIsCreating(false);
}
return (
<EditableCellDoubleTextEditMode
firstValue={companyDomainName}
secondValue={companyName}
firstValuePlaceholder="URL"
secondValuePlaceholder="Name"
onChange={handleDoubleTextChange}
onSubmit={() => handleCompanyCreate(companyName, companyDomainName)}
onExit={() => setIsCreating(false)}
/>
);
}