59 lines
1.3 KiB
TypeScript
59 lines
1.3 KiB
TypeScript
import { faUser, faList } from '@fortawesome/pro-regular-svg-icons';
|
|
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 {
|
|
GraphqlPerson,
|
|
Person,
|
|
mapPerson,
|
|
} from '../../interfaces/person.interface';
|
|
import { defaultData } from './default-data';
|
|
|
|
const StyledPeopleContainer = styled.div`
|
|
display: flex;
|
|
width: 100%;
|
|
`;
|
|
|
|
export const GET_PEOPLE = gql`
|
|
query GetPeople {
|
|
person {
|
|
id
|
|
phone
|
|
email
|
|
city
|
|
firstname
|
|
lastname
|
|
created_at
|
|
company {
|
|
company_name
|
|
company_domain
|
|
}
|
|
}
|
|
}
|
|
`;
|
|
|
|
function People() {
|
|
const { data } = useQuery<{ person: GraphqlPerson[] }>(GET_PEOPLE);
|
|
|
|
const mydata: Person[] = data ? data.person.map(mapPerson) : defaultData;
|
|
|
|
return (
|
|
<WithTopBarContainer title="People" icon={faUser}>
|
|
<StyledPeopleContainer>
|
|
{mydata && (
|
|
<Table
|
|
data={mydata}
|
|
columns={peopleColumns}
|
|
viewName="All People"
|
|
viewIcon={faList}
|
|
/>
|
|
)}
|
|
</StyledPeopleContainer>
|
|
</WithTopBarContainer>
|
|
);
|
|
}
|
|
|
|
export default People;
|