/
ChangeRequestOverview.tsx
88 lines (83 loc) · 3.35 KB
/
ChangeRequestOverview.tsx
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
81
82
83
84
85
86
87
88
import { FC } from 'react';
import { Box, Button, Paper } from '@mui/material';
import { useChangeRequest } from 'hooks/api/getters/useChangeRequest/useChangeRequest';
import { ChangeRequestHeader } from './ChangeRequestHeader/ChangeRequestHeader';
import { ChangeRequestTimeline } from './ChangeRequestTimeline/ChangeRequestTimeline';
import { ChangeRequestReviewers } from './ChangeRequestReviewers/ChangeRequestReviewers';
import { ChangeRequest } from '../ChangeRequest/ChangeRequest';
import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
import { useChangeRequestApi } from 'hooks/api/actions/useChangeRequestApi/useChangeRequestApi';
import { ChangeRequestReviewStatus } from './ChangeRequestReviewStatus/ChangeRequestReviewStatus';
import useToast from 'hooks/useToast';
import { formatUnknownError } from 'utils/formatUnknownError';
export const ChangeRequestOverview: FC = () => {
const projectId = useRequiredPathParam('projectId');
const id = useRequiredPathParam('id');
const { data: changeRequest } = useChangeRequest(projectId, id);
const { applyChanges } = useChangeRequestApi();
const { setToastData, setToastApiError } = useToast();
if (!changeRequest) {
return null;
}
const onApplyChanges = async () => {
try {
await applyChanges(projectId, id);
setToastData({
type: 'success',
title: 'Success',
text: 'Changes appplied',
});
} catch (error: unknown) {
setToastApiError(formatUnknownError(error));
}
};
return (
<>
<ChangeRequestHeader changeRequest={changeRequest} />
<Box sx={{ display: 'flex' }}>
<Box
sx={{
width: '30%',
display: 'flex',
flexDirection: 'column',
}}
>
<ChangeRequestTimeline state={changeRequest.state} />
<ChangeRequestReviewers />
</Box>
<Paper
elevation={0}
sx={theme => ({
marginTop: theme.spacing(2),
marginLeft: theme.spacing(2),
width: '70%',
padding: 2,
borderRadius: theme =>
`${theme.shape.borderRadiusLarge}px`,
})}
>
<Box
sx={theme => ({
padding: theme.spacing(2),
})}
>
<ChangeRequest changeRequest={changeRequest} />
<ChangeRequestReviewStatus
approved={
changeRequest.state === 'Approved' ||
changeRequest.state === 'Applied'
}
/>
<Button
variant="contained"
sx={{ marginTop: 2 }}
onClick={onApplyChanges}
>
Apply changes
</Button>
</Box>
</Paper>
</Box>
</>
);
};