From b6c7149b66db6589657600f7eb6adbc495c07cdb Mon Sep 17 00:00:00 2001
From: Anders Borch <anders@cyborch.com>
Date: Mon, 24 Apr 2023 21:42:10 +0200
Subject: [PATCH] Use EditableCell for email

---
 front/src/pages/people/people-table.tsx | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/front/src/pages/people/people-table.tsx b/front/src/pages/people/people-table.tsx
index e1c14f4f7..f7fd24ad4 100644
--- a/front/src/pages/people/people-table.tsx
+++ b/front/src/pages/people/people-table.tsx
@@ -35,6 +35,8 @@ export const sortsAvailable = [
   },
   { id: 'city', label: 'City', order: 'asc', icon: faMapPin },
 ] satisfies Array<SortType<keyof GraphqlPerson>>;
+import EditableCell from '../../components/table/EditableCell';
+import { updatePerson } from '../../services/people';
 
 const columnHelper = createColumnHelper<Person>();
 export const peopleColumns = [
@@ -58,9 +60,14 @@ export const peopleColumns = [
   columnHelper.accessor('email', {
     header: () => <ColumnHead viewName="Email" viewIcon={faEnvelope} />,
     cell: (props) => (
-      <ClickableCell href={`mailto:${props.row.original.email}`}>
-        {props.row.original.email}
-      </ClickableCell>
+      <EditableCell
+        content={props.row.original.email}
+        changeHandler={(value) => {
+          const person = props.row.original;
+          person.email = value;
+          updatePerson(person).catch((error) => console.error(error)); // TODO: handle error
+        }}
+      />
     ),
   }),
   columnHelper.accessor('company', {