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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
|
import React, { Fragment, useState } from 'react';
import t from './common/localization';
import { makeStyles, Typography, ListItem, ListItemText, ListItemSecondaryAction, List, Container, Paper, Divider } from '@material-ui/core';
import { useParams } from 'react-router-dom';
import { useEffectAsync } from './reactHelper';
import MainToolbar from './MainToolbar';
import { formatPosition } from './common/formatter';
import { prefixString } from './common/stringUtils';
const useStyles = makeStyles(theme => ({
root: {
marginTop: theme.spacing(2),
marginBottom: theme.spacing(2),
},
}));
const PositionPage = () => {
const classes = useStyles();
const { id } = useParams();
const [item, setItem] = useState();
useEffectAsync(async () => {
if (id) {
const response = await fetch(`/api/positions?id=${id}`, {
headers: {
'Accept': 'application/json'
},
});
if (response.ok) {
const items = await response.json();
setItem(items[0]);
}
} else {
setItem({});
}
}, [id]);
const formatKey = (key) => {
return t(prefixString('position', key)) || `${t('sharedAttribute')} "${key}"`;
};
const attributesList = () => {
const combinedList = {...item, ...item.attributes};
return Object.entries(combinedList).filter(([_, value]) => typeof value !== 'object');
}
return (
<>
<MainToolbar />
<Container maxWidth='sm' className={classes.root}>
<Paper>
{item &&
<List>
{attributesList().map(([key, value], index, list) => (
<Fragment key={key}>
<ListItem>
<ListItemText
primary={formatKey(key)}
/>
<ListItemSecondaryAction>
<Typography variant="body2">
{formatPosition(value, key)}
</Typography>
</ListItemSecondaryAction>
</ListItem>
{index < list.length - 1 ? <Divider /> : null}
</Fragment>
))}
</List>
}
</Paper>
</Container>
</>
);
}
export default PositionPage;
|
