Persist table cell values on cell close (#655)

* Persist table cell values on cell close

* Apply to all cells

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

@@ -1,3 +1,5 @@
+import { useEffect, useState } from 'react';
+
 import { CellCommentChip } from '@/comments/components/table/CellCommentChip';
 import { useOpenTimelineRightDrawer } from '@/comments/hooks/useOpenTimelineRightDrawer';
 import { EditableCellChip } from '@/ui/components/editable-cell/types/EditableChip';
@@ -21,6 +23,8 @@ export function CompanyEditableNameChipCell({ company }: OwnProps) {
   const openCommentRightDrawer = useOpenTimelineRightDrawer();
   const [updateCompany] = useUpdateCompanyMutation();
 
+  const [internalValue, setInternalValue] = useState(company.name ?? '');
+
   function handleCommentClick(event: React.MouseEvent<HTMLDivElement>) {
     event.preventDefault();
     event.stopPropagation();
@@ -33,20 +37,17 @@ export function CompanyEditableNameChipCell({ company }: OwnProps) {
     ]);
   }
 
+  useEffect(() => {
+    setInternalValue(company.name ?? '');
+  }, [company.name]);
+
   return (
     <EditableCellChip
-      value={company.name ?? ''}
+      value={internalValue}
       placeholder="Name"
       picture={getLogoUrlFromDomainName(company.domainName)}
       id={company.id}
-      changeHandler={(value: string) => {
-        updateCompany({
-          variables: {
-            id: company.id,
-            name: value,
-          },
-        });
-      }}
+      changeHandler={setInternalValue}
       ChipComponent={CompanyChip}
       rightEndContents={[
         <CellCommentChip
@@ -54,6 +55,15 @@ export function CompanyEditableNameChipCell({ company }: OwnProps) {
           onClick={handleCommentClick}
         />,
       ]}
+      onSubmit={() =>
+        updateCompany({
+          variables: {
+            id: company.id,
+            name: internalValue,
+          },
+        })
+      }
+      onCancel={() => setInternalValue(company.name ?? '')}
     />
   );
 }

front/src/modules/companies/table/components/EditableCompanyAddressCell.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react';
 import { useRecoilValue } from 'recoil';
 
 import { companyAddressFamilyState } from '@/companies/states/companyAddressFamilyState';
@@ -14,19 +15,24 @@ export function EditableCompanyAddressCell() {
     companyAddressFamilyState(currentRowEntityId ?? ''),
   );
 
+  const [internalValue, setInternalValue] = useState(address ?? '');
+  useEffect(() => {
+    setInternalValue(address ?? '');
+  }, [address]);
+
   return (
     <EditableCellText
-      value={address ?? ''}
-      onChange={async (newAddress: string) => {
-        if (!currentRowEntityId) return;
-
-        await updateCompany({
+      value={internalValue}
+      onChange={setInternalValue}
+      onSubmit={() =>
+        updateCompany({
           variables: {
             id: currentRowEntityId,
-            address: newAddress,
+            address: internalValue,
           },
-        });
-      }}
+        })
+      }
+      onCancel={() => setInternalValue(address ?? '')}
     />
   );
 }

front/src/modules/companies/table/components/EditableCompanyDomainNameCell.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react';
 import { useRecoilValue } from 'recoil';
 
 import { companyDomainNameFamilyState } from '@/companies/states/companyDomainNameFamilyState';
@@ -13,20 +14,24 @@ export function EditableCompanyDomainNameCell() {
   const name = useRecoilValue(
     companyDomainNameFamilyState(currentRowEntityId ?? ''),
   );
+  const [internalValue, setInternalValue] = useState(name ?? '');
+  useEffect(() => {
+    setInternalValue(name ?? '');
+  }, [name]);
 
   return (
     <EditableCellText
-      value={name ?? ''}
-      onChange={async (domainName: string) => {
-        if (!currentRowEntityId) return;
-
-        await updateCompany({
+      value={internalValue}
+      onChange={setInternalValue}
+      onSubmit={() =>
+        updateCompany({
           variables: {
             id: currentRowEntityId,
-            domainName: domainName,
+            domainName: internalValue,
           },
-        });
-      }}
+        })
+      }
+      onCancel={() => setInternalValue(name ?? '')}
     />
   );
 }

front/src/modules/companies/table/components/EditableCompanyEmployeesCell.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react';
 import { useRecoilValue } from 'recoil';
 
 import { companyEmployeesFamilyState } from '@/companies/states/companyEmployeesFamilyState';
@@ -14,20 +15,26 @@ export function EditableCompanyEmployeesCell() {
     companyEmployeesFamilyState(currentRowEntityId ?? ''),
   );
 
+  const [internalValue, setInternalValue] = useState(employees ?? '');
+
+  useEffect(() => {
+    setInternalValue(employees ?? '');
+  }, [employees]);
+
   return (
     // TODO: Create an EditableCellNumber component
     <EditableCellText
-      value={employees ?? ''}
-      onChange={async (newEmployees: string) => {
-        if (!currentRowEntityId) return;
-
-        await updateCompany({
+      value={internalValue}
+      onChange={setInternalValue}
+      onSubmit={() =>
+        updateCompany({
           variables: {
             id: currentRowEntityId,
-            employees: parseInt(newEmployees),
+            employees: parseInt(internalValue),
           },
-        });
-      }}
+        })
+      }
+      onCancel={() => setInternalValue(employees ?? '')}
     />
   );
 }