/
eventAttachments.jsx
109 lines (96 loc) · 2.95 KB
/
eventAttachments.jsx
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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
import PropTypes from 'prop-types';
import React from 'react';
import createReactClass from 'create-react-class';
import {Box} from 'grid-emotion';
import ApiMixin from 'app/mixins/apiMixin';
import FileSize from 'app/components/fileSize';
import GroupState from 'app/mixins/groupState';
import {t} from 'app/locale';
import {Panel, PanelBody, PanelItem} from 'app/components/panels';
export default createReactClass({
displayName: 'EventAttachments',
propTypes: {
event: PropTypes.object.isRequired,
orgId: PropTypes.string.isRequired,
projectId: PropTypes.string.isRequired,
},
mixins: [ApiMixin, GroupState],
getInitialState() {
return {attachmentList: undefined, expanded: false};
},
componentDidMount() {
this.fetchData(this.props.event);
},
componentWillReceiveProps(nextProps) {
if (this.props.event && nextProps.event) {
if (this.props.event.id !== nextProps.event.id) {
//two events, with different IDs
this.fetchData(nextProps.event);
}
} else if (nextProps.event) {
//going from having no event to having an event
this.fetchData(nextProps.event);
}
},
fetchData(event) {
// TODO(dcramer): this API request happens twice, and we need a store for it
if (!event) return;
this.api.request(
`/projects/${this.props.orgId}/${this.props
.projectId}/events/${event.id}/attachments/`,
{
success: (data, _, jqXHR) => {
this.setState({
attachmentList: data,
});
},
error: error => {
this.setState({
attachmentList: undefined,
});
},
}
);
},
getDownloadUrl(attachment) {
let {orgId, event, projectId} = this.props;
return `/api/0/projects/${orgId}/${projectId}/events/${event.id}/attachments/${attachment.id}/?download=1`;
},
render() {
let {attachmentList} = this.state;
if (!(attachmentList && attachmentList.length)) {
return null;
}
return (
<div className="box">
<div className="box-header">
<h3>
{t('Attachments')} ({attachmentList.length})
</h3>
<Panel>
<PanelBody>
{attachmentList.map(attachment => {
return (
<PanelItem key={attachment.id} align="center">
<Box
flex={10}
pr={1}
style={{wordWrap: 'break-word', wordBreak: 'break-all'}}
>
<a href={this.getDownloadUrl(attachment)}>
<strong>{attachment.name}</strong>
</a>
</Box>
<Box flex={1} textAlign="right">
<FileSize bytes={attachment.size} />
</Box>
</PanelItem>
);
})}
</PanelBody>
</Panel>
</div>
</div>
);
},
});