refactor: move data types and table definition out of People component

front/src/pages/people/People.tsx

@@ -1,38 +1,9 @@
-import {
+import { faUser, faList } from '@fortawesome/pro-regular-svg-icons';
-  faBuildings,
-  faCalendar,
-  faEnvelope,
-  faUser,
-  faMapPin,
-  faPhone,
-  faRectangleHistory,
-  faList,
-} from '@fortawesome/pro-regular-svg-icons';
 import WithTopBarContainer from '../../layout/containers/WithTopBarContainer';
 import Table from '../../components/table/Table';
-import { Company } from '../../interfaces/company.interface';
-import { Pipe } from '../../interfaces/pipe.interface';
-import { createColumnHelper } from '@tanstack/react-table';
 import styled from '@emotion/styled';
-import ClickableCell from '../../components/table/ClickableCell';
+import { peopleColumns } from './people-table';
-import ColumnHead from '../../components/table/ColumnHead';
+import { defaultData } from './defaultData';
-import { parsePhoneNumber, CountryCode } from 'libphonenumber-js';
-import Checkbox from '../../components/form/Checkbox';
-import HorizontalyAlignedContainer from '../../layout/containers/HorizontalyAlignedContainer';
-import CompanyChip from '../../components/chips/CompanyChip';
-import PersonChip from '../../components/chips/PersonChip';
-
-type Person = {
-  fullName: string;
-  picture?: string;
-  email: string;
-  company: Company;
-  phone: string;
-  creationDate: Date;
-  pipe: Pipe;
-  city: string;
-  countryCode: string;
-};
 
 const StyledPeopleContainer = styled.div`
   display: flex;
@@ -44,150 +15,13 @@ const StyledPeopleContainer = styled.div`
   }
 `;
 
-const defaultData: Array<Person> = [
-  {
-    fullName: 'Alexandre Prot',
-    picture: 'http://placekitten.com/256',
-    email: 'alexandre@qonto.com',
-    company: { id: 1, name: 'Qonto', domain: 'qonto.com' },
-    phone: '06 12 34 56 78',
-    creationDate: new Date('Feb 23, 2018'),
-    pipe: { id: 1, name: 'Sales Pipeline', icon: 'faUser' },
-    city: 'Paris',
-    countryCode: 'FR',
-  },
-  {
-    fullName: 'Alexandre Prot',
-    email: 'alexandre@qonto.com',
-    company: { id: 2, name: 'LinkedIn', domain: 'linkedin.com' },
-    phone: '06 12 34 56 78',
-    creationDate: new Date('Feb 23, 2018'),
-    pipe: { id: 1, name: 'Sales Pipeline', icon: 'faUser' },
-    city: 'Paris',
-    countryCode: 'FR',
-  },
-  {
-    fullName: 'Alexandre Prot',
-    picture: 'http://placekitten.com/256',
-    email: 'alexandre@qonto.com',
-    company: { id: 1, name: 'Qonto', domain: 'qonto.com' },
-    phone: '06 12 34 56 78',
-    creationDate: new Date('Feb 23, 2018'),
-    pipe: { id: 1, name: 'Sales Pipeline', icon: 'faUser' },
-    city: 'Paris',
-    countryCode: 'FR',
-  },
-  {
-    fullName: 'Alexandre Prot',
-    picture: 'https://placekitten.com/g/256',
-    email: 'alexandre@qonto.com',
-    company: { id: 1, name: 'Slack', domain: 'slack.com' },
-    phone: '06 12 34 56 78',
-    creationDate: new Date('Feb 23, 2018'),
-    pipe: { id: 1, name: 'Sales Pipeline', icon: 'faUser' },
-    city: 'Paris',
-    countryCode: 'FR',
-  },
-  {
-    fullName: 'Alexandre Prot',
-    email: 'alexandre@qonto.com',
-    company: { id: 2, name: 'Facebook', domain: 'facebook.com' },
-    phone: '06 12 34 56 78',
-    creationDate: new Date('Feb 23, 2018'),
-    pipe: { id: 1, name: 'Sales Pipeline', icon: 'faUser' },
-    city: 'Paris',
-    countryCode: 'FR',
-  },
-];
-
-const columnHelper = createColumnHelper<Person>();
-
-const columns = [
-  columnHelper.accessor('fullName', {
-    header: () => <ColumnHead viewName="People" viewIcon={faUser} />,
-    cell: (props) => (
-      <>
-        <HorizontalyAlignedContainer>
-          <Checkbox
-            id={`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>
-      </>
-    ),
-  }),
-  columnHelper.accessor('email', {
-    header: () => <ColumnHead viewName="Email" viewIcon={faEnvelope} />,
-    cell: (props) => (
-      <ClickableCell href={`mailto:${props.row.original.email}`}>
-        {props.row.original.email}
-      </ClickableCell>
-    ),
-  }),
-  columnHelper.accessor('company', {
-    header: () => <ColumnHead viewName="Company" viewIcon={faBuildings} />,
-    cell: (props) => (
-      <ClickableCell href="#">
-        <CompanyChip
-          name={props.row.original.company.name}
-          picture={`https://www.google.com/s2/favicons?domain=${props.row.original.company.domain}&sz=256`}
-        />
-      </ClickableCell>
-    ),
-  }),
-  columnHelper.accessor('phone', {
-    header: () => <ColumnHead viewName="Phone" viewIcon={faPhone} />,
-    cell: (props) => (
-      <ClickableCell
-        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}
-      </ClickableCell>
-    ),
-  }),
-  columnHelper.accessor('creationDate', {
-    header: () => <ColumnHead viewName="Creation" viewIcon={faCalendar} />,
-    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={faRectangleHistory} />,
-    cell: (props) => (
-      <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>
-    ),
-  }),
-];
-
 function People() {
   return (
     <WithTopBarContainer title="People" icon={faUser}>
       <StyledPeopleContainer>
         <Table
           data={defaultData}
-          columns={columns}
+          columns={peopleColumns}
           viewName="All People"
           viewIcon={faList}
         />

front/src/pages/people/defaultData.ts

@@ -0,0 +1,57 @@
+import { Person } from './types';
+
+export const defaultData: Array<Person> = [
+  {
+    fullName: 'Alexandre Prot',
+    picture: 'http://placekitten.com/256',
+    email: 'alexandre@qonto.com',
+    company: { id: 1, name: 'Qonto', domain: 'qonto.com' },
+    phone: '06 12 34 56 78',
+    creationDate: new Date('Feb 23, 2018'),
+    pipe: { id: 1, name: 'Sales Pipeline', icon: 'faUser' },
+    city: 'Paris',
+    countryCode: 'FR',
+  },
+  {
+    fullName: 'Alexandre Prot',
+    email: 'alexandre@qonto.com',
+    company: { id: 2, name: 'LinkedIn', domain: 'linkedin.com' },
+    phone: '06 12 34 56 78',
+    creationDate: new Date('Feb 23, 2018'),
+    pipe: { id: 1, name: 'Sales Pipeline', icon: 'faUser' },
+    city: 'Paris',
+    countryCode: 'FR',
+  },
+  {
+    fullName: 'Alexandre Prot',
+    picture: 'http://placekitten.com/256',
+    email: 'alexandre@qonto.com',
+    company: { id: 1, name: 'Qonto', domain: 'qonto.com' },
+    phone: '06 12 34 56 78',
+    creationDate: new Date('Feb 23, 2018'),
+    pipe: { id: 1, name: 'Sales Pipeline', icon: 'faUser' },
+    city: 'Paris',
+    countryCode: 'FR',
+  },
+  {
+    fullName: 'Alexandre Prot',
+    picture: 'https://placekitten.com/g/256',
+    email: 'alexandre@qonto.com',
+    company: { id: 1, name: 'Slack', domain: 'slack.com' },
+    phone: '06 12 34 56 78',
+    creationDate: new Date('Feb 23, 2018'),
+    pipe: { id: 1, name: 'Sales Pipeline', icon: 'faUser' },
+    city: 'Paris',
+    countryCode: 'FR',
+  },
+  {
+    fullName: 'Alexandre Prot',
+    email: 'alexandre@qonto.com',
+    company: { id: 2, name: 'Facebook', domain: 'facebook.com' },
+    phone: '06 12 34 56 78',
+    creationDate: new Date('Feb 23, 2018'),
+    pipe: { id: 1, name: 'Sales Pipeline', icon: 'faUser' },
+    city: 'Paris',
+    countryCode: 'FR',
+  },
+];

front/src/pages/people/people-table.tsx

@@ -0,0 +1,98 @@
+import {
+  faBuildings,
+  faCalendar,
+  faEnvelope,
+  faUser,
+  faMapPin,
+  faPhone,
+  faRectangleHistory,
+} from '@fortawesome/pro-regular-svg-icons';
+import { createColumnHelper } from '@tanstack/react-table';
+import ClickableCell from '../../components/table/ClickableCell';
+import ColumnHead from '../../components/table/ColumnHead';
+import { parsePhoneNumber, CountryCode } from 'libphonenumber-js';
+import Checkbox from '../../components/form/Checkbox';
+import HorizontalyAlignedContainer from '../../layout/containers/HorizontalyAlignedContainer';
+import CompanyChip from '../../components/chips/CompanyChip';
+import PersonChip from '../../components/chips/PersonChip';
+import { Person } from './types';
+
+const columnHelper = createColumnHelper<Person>();
+export const peopleColumns = [
+  columnHelper.accessor('fullName', {
+    header: () => <ColumnHead viewName="People" viewIcon={faUser} />,
+    cell: (props) => (
+      <>
+        <HorizontalyAlignedContainer>
+          <Checkbox
+            id={`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>
+      </>
+    ),
+  }),
+  columnHelper.accessor('email', {
+    header: () => <ColumnHead viewName="Email" viewIcon={faEnvelope} />,
+    cell: (props) => (
+      <ClickableCell href={`mailto:${props.row.original.email}`}>
+        {props.row.original.email}
+      </ClickableCell>
+    ),
+  }),
+  columnHelper.accessor('company', {
+    header: () => <ColumnHead viewName="Company" viewIcon={faBuildings} />,
+    cell: (props) => (
+      <ClickableCell href="#">
+        <CompanyChip
+          name={props.row.original.company.name}
+          picture={`https://www.google.com/s2/favicons?domain=${props.row.original.company.domain}&sz=256`}
+        />
+      </ClickableCell>
+    ),
+  }),
+  columnHelper.accessor('phone', {
+    header: () => <ColumnHead viewName="Phone" viewIcon={faPhone} />,
+    cell: (props) => (
+      <ClickableCell
+        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}
+      </ClickableCell>
+    ),
+  }),
+  columnHelper.accessor('creationDate', {
+    header: () => <ColumnHead viewName="Creation" viewIcon={faCalendar} />,
+    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={faRectangleHistory} />,
+    cell: (props) => (
+      <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>
+    ),
+  }),
+];

front/src/pages/people/types.ts

@@ -0,0 +1,14 @@
+import { Company } from '../../interfaces/company.interface';
+import { Pipe } from '../../interfaces/pipe.interface';
+
+export type Person = {
+  fullName: string;
+  picture?: string;
+  email: string;
+  company: Company;
+  phone: string;
+  creationDate: Date;
+  pipe: Pipe;
+  city: string;
+  countryCode: string;
+};