Merge pull request #51 from twentyhq/sammy/t-104-i-see-a-localized-date

Sammy/t 104 i see a localized date

front/src/components/table/ClickableCell.tsx

@@ -4,14 +4,15 @@ import { Link } from 'react-router-dom';
 
 type OwnProps = {
   href: string;
-  id: string;
   children?: React.ReactNode;
 };
 
-const TD = styled.td`
+const StyledClickable = styled.div`
   position: relative;
   box-sizing: border-box;
   height: 32px;
+  display: flex;
+  align-items: center;
 
   ::before {
     content: '';
@@ -23,6 +24,7 @@ const TD = styled.td`
     border: 1px solid ${(props) => props.theme.text20};
     box-sizing: border-box;
     border-radius: 4px;
+    pointer-events: none;
     display: none;
   }
 
@@ -35,13 +37,13 @@ const Container = styled.span`
   padding-left: ${(props) => props.theme.spacing(2)};
 `;
 
-function ClickableCell({ href, children, id }: OwnProps) {
+function ClickableCell({ href, children }: OwnProps) {
   return (
-    <TD key={id}>
+    <StyledClickable>
       <Link to={href}>
         <Container>{children}</Container>
       </Link>
-    </TD>
+    </StyledClickable>
   );
 }
 

front/src/components/table/Table.tsx

@@ -32,7 +32,7 @@ const StyledTable = styled.table`
     :last-child {
       border-right-color: transparent;
     }
-    :first-child {
+    :first-of-type {
       border-left-color: transparent;
     }
   }
@@ -46,7 +46,7 @@ const StyledTable = styled.table`
     :last-child {
       border-right-color: transparent;
     }
-    :first-child {
+    :first-of-type {
       border-left-color: transparent;
     }
   }
@@ -89,9 +89,10 @@ function Table({ data, columns, viewName, viewIcon }: OwnProps) {
           {table.getRowModel().rows.map((row) => (
             <tr key={row.id}>
               {row.getVisibleCells().map((cell) => {
-                return flexRender(
+                return (
-                  cell.column.columnDef.cell,
+                  <td key={cell.id}>
-                  cell.getContext(),
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </td>
                 );
               })}
             </tr>

front/src/pages/people/People.tsx

@@ -108,34 +108,32 @@ const columns = [
   columnHelper.accessor('fullName', {
     header: () => <ColumnHead viewName="People" viewIcon={faUser} />,
     cell: (props) => (
-      <td key={props.cell.id}>
+      <>
         <HorizontalyAlignedContainer>
           <Checkbox
             id={`person-selected-${props.row.original.email}`}
-            name={`person-selected${props.row.original.email}`}
+            name={`person-selected-${props.row.original.email}`}
           />
           <PersonChip
             name={props.row.original.fullName}
             picture={props.row.original.picture}
           />
         </HorizontalyAlignedContainer>
-      </td>
+      </>
     ),
   }),
   columnHelper.accessor('email', {
     header: () => <ColumnHead viewName="Email" viewIcon={faEnvelope} />,
     cell: (props) => (
-      <ClickableCell id={props.cell.id} href="#">
+      <ClickableCell href={`mailto:${props.row.original.email}`}>
-        <a href={`mailto:${props.row.original.email}`}>
+        {props.row.original.email}
-          {props.row.original.email}
-        </a>
       </ClickableCell>
     ),
   }),
   columnHelper.accessor('company', {
     header: () => <ColumnHead viewName="Company" viewIcon={faBuildings} />,
     cell: (props) => (
-      <ClickableCell id={props.cell.id} href="#">
+      <ClickableCell href="#">
         <CompanyChip
           name={props.row.original.company.name}
           picture={`https://www.google.com/s2/favicons?domain=${props.row.original.company.domain}&sz=256`}
@@ -146,25 +144,23 @@ const columns = [
   columnHelper.accessor('phone', {
     header: () => <ColumnHead viewName="Phone" viewIcon={faPhone} />,
     cell: (props) => (
-      <ClickableCell id={props.cell.id} href="#">
+      <ClickableCell
-        <a
+        href={parsePhoneNumber(
-          href={parsePhoneNumber(
+          props.row.original.phone,
-            props.row.original.phone,
+          props.row.original.countryCode as CountryCode,
-            props.row.original.countryCode as CountryCode,
+        )?.getURI()}
-          )?.getURI()}
+      >
-        >
+        {parsePhoneNumber(
-          {parsePhoneNumber(
+          props.row.original.phone,
-            props.row.original.phone,
+          props.row.original.countryCode as CountryCode,
-            props.row.original.countryCode as CountryCode,
+        )?.formatInternational() || props.row.original.phone}
-          )?.formatInternational() || props.row.original.phone}
-        </a>
       </ClickableCell>
     ),
   }),
   columnHelper.accessor('creationDate', {
     header: () => <ColumnHead viewName="Creation" viewIcon={faCalendar} />,
     cell: (props) => (
-      <ClickableCell id={props.cell.id} href="#">
+      <ClickableCell href="#">
         {new Intl.DateTimeFormat(undefined, {
           month: 'short',
           day: 'numeric',
@@ -176,17 +172,13 @@ const columns = [
   columnHelper.accessor('pipe', {
     header: () => <ColumnHead viewName="Pipe" viewIcon={faRectangleHistory} />,
     cell: (props) => (
-      <ClickableCell id={props.cell.id} href="#">
+      <ClickableCell href="#">{props.row.original.pipe.name}</ClickableCell>
-        {props.row.original.pipe.name}
-      </ClickableCell>
     ),
   }),
   columnHelper.accessor('city', {
     header: () => <ColumnHead viewName="City" viewIcon={faMapPin} />,
     cell: (props) => (
-      <ClickableCell id={props.cell.id} href="#">
+      <ClickableCell href="#">{props.row.original.city}</ClickableCell>
-        {props.row.original.city}
-      </ClickableCell>
     ),
   }),
 ];