-
-
Notifications
You must be signed in to change notification settings - Fork 7
/
CatsPage.js
66 lines (62 loc) · 1.79 KB
/
CatsPage.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
// @flow
import { MissingData, Table } from '@adeira/sx-design';
import * as React from 'react';
import { graphql, useLazyLoadQuery } from '@adeira/relay';
import fbt from 'fbt';
import type { CatsPageQuery } from './__generated__/CatsPageQuery.graphql';
export default function CatsPage(): React.Node {
const data = useLazyLoadQuery<CatsPageQuery>(graphql`
query CatsPageQuery {
cats {
listAllCats {
order
name
dateOfCastration
dateOfDeworming
dateOfAdoption
}
}
}
`);
return (
<Table
columns={[
{
Header: <fbt desc="order of the cat (table header)">Order</fbt>,
accessor: 'col1',
},
{
Header: <fbt desc="name of the cat (table header)">Name of the cat</fbt>,
accessor: 'col2',
},
{
Header: (
<fbt desc="date when the cat castration was performed (table header)">
Date of castration
</fbt>
),
accessor: 'col3',
},
{
Header: (
<fbt desc="date of the last deworming (table header)">Date of last deworming</fbt>
),
accessor: 'col4',
},
{
Header: <fbt desc="date of the cat adoption (table header)">Date of adoption</fbt>,
accessor: 'col5',
},
]}
data={data.cats.listAllCats.map((cat) => {
return {
col1: `#${cat.order}`,
col2: cat.name,
col3: cat.dateOfCastration ?? <MissingData />, // TODO: display with warning/error when around 4 months old
col4: cat.dateOfDeworming ?? <MissingData />, // TODO: display with warning/error
col5: cat.dateOfAdoption ?? <MissingData />,
};
})}
/>
);
}