feature: wip get persons and map it

front/src/pages/people/People.tsx

@@ -3,6 +3,8 @@ import WithTopBarContainer from '../../layout/containers/WithTopBarContainer';
 import Table from '../../components/table/Table';
 import styled from '@emotion/styled';
 import { peopleColumns } from './people-table';
+import { gql, useQuery } from '@apollo/client';
+import { Person } from './types';
 import { defaultData } from './defaultData';
 
 const StyledPeopleContainer = styled.div`
@@ -10,16 +12,69 @@ const StyledPeopleContainer = styled.div`
   width: 100%;
 `;
 
+const GET_PEOPLE = gql`
+  query GetPeople {
+    person {
+      id
+      phone
+      email
+      city
+      firstname
+      lastname
+      created_at
+      company {
+        company_name
+        company_domain
+      }
+    }
+  }
+`;
+
+type QueryResult = {
+  city: string;
+  company: {
+    __typename: string;
+    company_name: string;
+    company_domain: string;
+  };
+  created_at: string;
+  email: string;
+  firstname: string;
+  id: number;
+  lastname: string;
+  phone: string;
+  __typename: string;
+};
+
 function People() {
+  const { data } = useQuery<{ person: QueryResult[] }>(GET_PEOPLE);
+
+  const mydata: Person[] = data
+    ? data.person.map((person) => ({
+        fullName: `${person.firstname} ${person.lastname}`,
+        creationDate: new Date(person.created_at),
+        pipe: { name: 'coucou', id: 1, icon: 'faUser' },
+        ...person,
+        company: {
+          id: 1,
+          name: person.company.company_name,
+          domain: person.company.company_domain,
+        },
+        countryCode: 'FR',
+      }))
+    : defaultData;
+
   return (
     <WithTopBarContainer title="People" icon={faUser}>
       <StyledPeopleContainer>
-        <Table
-          data={defaultData}
-          columns={peopleColumns}
-          viewName="All People"
-          viewIcon={faList}
-        />
+        {mydata && (
+          <Table
+            data={mydata}
+            columns={peopleColumns}
+            viewName="All People"
+            viewIcon={faList}
+          />
+        )}
       </StyledPeopleContainer>
     </WithTopBarContainer>
   );