Persist table cell values on cell close (#655)

* Persist table cell values on cell close

* Apply to all cells

front/src/modules/people/components/EditablePeopleFullName.tsx

@@ -15,6 +15,8 @@ type OwnProps = {
     | null
     | undefined;
   onChange: (firstName: string, lastName: string) => void;
+  onSubmit?: () => void;
+  onCancel?: () => void;
 };
 
 const NoEditModeContainer = styled.div`
@@ -28,7 +30,12 @@ const RightContainer = styled.div`
   margin-left: ${(props) => props.theme.spacing(1)};
 `;
 
-export function EditablePeopleFullName({ person, onChange }: OwnProps) {
+export function EditablePeopleFullName({
+  person,
+  onChange,
+  onSubmit,
+  onCancel,
+}: OwnProps) {
   const openCommentRightDrawer = useOpenTimelineRightDrawer();
 
   function handleDoubleTextChange(
@@ -61,6 +68,8 @@ export function EditablePeopleFullName({ person, onChange }: OwnProps) {
       firstValuePlaceholder="First name"
       secondValuePlaceholder="Last name"
       onChange={handleDoubleTextChange}
+      onSubmit={onSubmit}
+      onCancel={onCancel}
       nonEditModeContent={
         <NoEditModeContainer>
           <PersonChip

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

@@ -72,7 +72,7 @@ export function PeopleCompanyCreateCell({ people }: OwnProps) {
       secondValuePlaceholder="Name"
       onChange={handleDoubleTextChange}
       onSubmit={() => handleCompanyCreate(companyName, companyDomainName)}
-      onExit={() => setIsCreating(false)}
+      onCancel={() => setIsCreating(false)}
     />
   );
 }

front/src/modules/people/table/components/EditablePeopleCityCell.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react';
 import { useRecoilValue } from 'recoil';
 
 import { peopleCityFamilyState } from '@/people/states/peopleCityFamilyState';
@@ -12,19 +13,25 @@ export function EditablePeopleCityCell() {
 
   const city = useRecoilValue(peopleCityFamilyState(currentRowEntityId ?? ''));
 
+  const [internalValue, setInternalValue] = useState(city ?? '');
+
+  useEffect(() => {
+    setInternalValue(city ?? '');
+  }, [city]);
+
   return (
     <EditableCellPhone
-      value={city ?? ''}
-      onChange={async (newCity: string) => {
-        if (!currentRowEntityId) return;
-
-        await updatePerson({
+      value={internalValue}
+      onChange={setInternalValue}
+      onSubmit={() =>
+        updatePerson({
           variables: {
             id: currentRowEntityId,
-            city: newCity,
+            city: internalValue,
           },
-        });
-      }}
+        })
+      }
+      onCancel={() => setInternalValue(city ?? '')}
     />
   );
 }

front/src/modules/people/table/components/EditablePeopleEmailCell.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react';
 import { useRecoilValue } from 'recoil';
 
 import { peopleEmailFamilyState } from '@/people/states/peopleEmailFamilyState';
@@ -14,19 +15,25 @@ export function EditablePeopleEmailCell() {
     peopleEmailFamilyState(currentRowEntityId ?? ''),
   );
 
+  const [internalValue, setInternalValue] = useState(email ?? '');
+
+  useEffect(() => {
+    setInternalValue(email ?? '');
+  }, [email]);
+
   return (
     <EditableCellText
-      value={email ?? ''}
-      onChange={async (newEmail: string) => {
-        if (!currentRowEntityId) return;
-
-        await updatePerson({
+      value={internalValue}
+      onChange={setInternalValue}
+      onSubmit={() =>
+        updatePerson({
           variables: {
             id: currentRowEntityId,
-            email: newEmail,
+            email: internalValue,
           },
-        });
-      }}
+        })
+      }
+      onCancel={() => setInternalValue(email ?? '')}
     />
   );
 }

front/src/modules/people/table/components/EditablePeopleFullNameCell.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react';
 import { useRecoilValue } from 'recoil';
 
 import { EditablePeopleFullName } from '@/people/components/EditablePeopleFullName';
@@ -14,24 +15,38 @@ export function EditablePeopleFullNameCell() {
     peopleNameCellFamilyState(currentRowEntityId ?? ''),
   );
 
+  const [internalFirstName, setInternalFirstName] = useState(firstName ?? '');
+  const [internalLastName, setInternalLastName] = useState(lastName ?? '');
+
+  useEffect(() => {
+    setInternalFirstName(firstName ?? '');
+    setInternalLastName(lastName ?? '');
+  }, [firstName, lastName]);
+
   return (
     <EditablePeopleFullName
       person={{
         id: currentRowEntityId ?? undefined,
         _commentThreadCount: commentCount ?? undefined,
-        firstName: firstName ?? undefined,
-        lastName: lastName ?? undefined,
+        firstName: internalFirstName,
+        lastName: internalLastName,
       }}
-      onChange={async (firstName: string, lastName: string) => {
-        if (!currentRowEntityId) return;
-
-        await updatePerson({
+      onChange={(firstName, lastName) => {
+        setInternalFirstName(firstName);
+        setInternalLastName(lastName);
+      }}
+      onSubmit={() =>
+        updatePerson({
           variables: {
             id: currentRowEntityId,
-            firstName,
-            lastName,
+            firstName: internalFirstName,
+            lastName: internalLastName,
           },
-        });
+        })
+      }
+      onCancel={() => {
+        setInternalFirstName(firstName ?? '');
+        setInternalLastName(lastName ?? '');
       }}
     />
   );

front/src/modules/people/table/components/EditablePeoplePhoneCell.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react';
 import { useRecoilValue } from 'recoil';
 
 import { peoplePhoneFamilyState } from '@/people/states/peoplePhoneFamilyState';
@@ -13,19 +14,26 @@ export function EditablePeoplePhoneCell() {
   const phone = useRecoilValue(
     peoplePhoneFamilyState(currentRowEntityId ?? ''),
   );
+
+  const [internalValue, setInternalValue] = useState(phone ?? '');
+
+  useEffect(() => {
+    setInternalValue(phone ?? '');
+  }, [phone]);
+
   return (
     <EditableCellPhone
-      value={phone ?? ''}
-      onChange={async (newPhone: string) => {
-        if (!currentRowEntityId) return;
-
-        await updatePerson({
+      value={internalValue}
+      onChange={setInternalValue}
+      onSubmit={() =>
+        updatePerson({
           variables: {
             id: currentRowEntityId,
-            phone: newPhone,
+            phone: internalValue,
           },
-        });
-      }}
+        })
+      }
+      onCancel={() => setInternalValue(phone ?? '')}
     />
   );
 }