From 0844490c134101f1030273bfe5fef040e27e681a Mon Sep 17 00:00:00 2001
From: Sammy Teillet <sammy.teillet@gmail.com>
Date: Wed, 19 Apr 2023 15:13:26 +0200
Subject: [PATCH] feature: wrap all elements in a cell

---
 .../HorizontalyAlignedContainer.tsx           |  2 +-
 front/src/pages/people/People.tsx             | 57 ++++++++++---------
 2 files changed, 32 insertions(+), 27 deletions(-)

diff --git a/front/src/layout/containers/HorizontalyAlignedContainer.tsx b/front/src/layout/containers/HorizontalyAlignedContainer.tsx
index 6892b2fa3..1e0f63dc1 100644
--- a/front/src/layout/containers/HorizontalyAlignedContainer.tsx
+++ b/front/src/layout/containers/HorizontalyAlignedContainer.tsx
@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 
 type OwnProps = {
-  children: JSX.Element[];
+  children: JSX.Element[] | JSX.Element;
 };
 
 const StyledContainer = styled.div`
diff --git a/front/src/pages/people/People.tsx b/front/src/pages/people/People.tsx
index edd55f15f..1be1a401a 100644
--- a/front/src/pages/people/People.tsx
+++ b/front/src/pages/people/People.tsx
@@ -123,9 +123,11 @@ const columns = [
   columnHelper.accessor('email', {
     header: () => <ColumnHead viewName="Email" viewIcon={faEnvelope} />,
     cell: (props) => (
-      <a href={`mailto:${props.row.original.email}`}>
-        {props.row.original.email}
-      </a>
+      <ClickableCell href="#">
+        <a href={`mailto:${props.row.original.email}`}>
+          {props.row.original.email}
+        </a>
+      </ClickableCell>
     ),
   }),
   columnHelper.accessor('company', {
@@ -142,41 +144,44 @@ const columns = [
   columnHelper.accessor('phone', {
     header: () => <ColumnHead viewName="Phone" viewIcon={faPhone} />,
     cell: (props) => (
-      <a
-        href={parsePhoneNumber(
-          props.row.original.phone,
-          props.row.original.countryCode as CountryCode,
-        )?.getURI()}
-      >
-        {parsePhoneNumber(
-          props.row.original.phone,
-          props.row.original.countryCode as CountryCode,
-        )?.formatInternational() || props.row.original.phone}
-      </a>
+      <ClickableCell href="#">
+        <a
+          href={parsePhoneNumber(
+            props.row.original.phone,
+            props.row.original.countryCode as CountryCode,
+          )?.getURI()}
+        >
+          {parsePhoneNumber(
+            props.row.original.phone,
+            props.row.original.countryCode as CountryCode,
+          )?.formatInternational() || props.row.original.phone}
+        </a>
+      </ClickableCell>
     ),
   }),
   columnHelper.accessor('creationDate', {
     header: () => <ColumnHead viewName="Creation" viewIcon={faCalendar} />,
-    cell: (props) =>
-      new Intl.DateTimeFormat(undefined, {
-        month: 'short',
-        day: 'numeric',
-        year: 'numeric',
-      }).format(props.row.original.creationDate),
+    cell: (props) => (
+      <ClickableCell href="#">
+        {new Intl.DateTimeFormat(undefined, {
+          month: 'short',
+          day: 'numeric',
+          year: 'numeric',
+        }).format(props.row.original.creationDate)}
+      </ClickableCell>
+    ),
   }),
   columnHelper.accessor('pipe', {
     header: () => <ColumnHead viewName="Pipe" viewIcon={faRectangleList} />,
     cell: (props) => (
-      <ClickableCell href="#">
-        <CompanyChip
-          name={props.row.original.pipe.name}
-          picture={props.row.original.pipe.icon}
-        />
-      </ClickableCell>
+      <ClickableCell href="#">{props.row.original.pipe.name}</ClickableCell>
     ),
   }),
   columnHelper.accessor('city', {
     header: () => <ColumnHead viewName="City" viewIcon={faMapPin} />,
+    cell: (props) => (
+      <ClickableCell href="#">{props.row.original.city}</ClickableCell>
+    ),
   }),
 ];