diff options
author | vantezzen <hello@vantezzen.io> | 2019-10-29 21:18:14 +0100 |
---|---|---|
committer | vantezzen <hello@vantezzen.io> | 2019-10-29 21:18:14 +0100 |
commit | cddfc5027b84d8b201714f4198d4314b02c3c4c7 (patch) | |
tree | 348146bdf96f11c70ddefbaac420df6e370d70c7 /src/features/publishDebugInfo/Component.js | |
parent | Add @ammarmalhas as a contributor (diff) | |
download | ferdium-app-cddfc5027b84d8b201714f4198d4314b02c3c4c7.tar.gz ferdium-app-cddfc5027b84d8b201714f4198d4314b02c3c4c7.tar.zst ferdium-app-cddfc5027b84d8b201714f4198d4314b02c3c4c7.zip |
Add publish debug log option
Diffstat (limited to 'src/features/publishDebugInfo/Component.js')
-rw-r--r-- | src/features/publishDebugInfo/Component.js | 181 |
1 files changed, 181 insertions, 0 deletions
diff --git a/src/features/publishDebugInfo/Component.js b/src/features/publishDebugInfo/Component.js new file mode 100644 index 000000000..9e59fa205 --- /dev/null +++ b/src/features/publishDebugInfo/Component.js | |||
@@ -0,0 +1,181 @@ | |||
1 | import React, { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer, inject } from 'mobx-react'; | ||
4 | import { defineMessages, intlShape } from 'react-intl'; | ||
5 | import { H1 } from '@meetfranz/ui'; | ||
6 | import injectSheet from 'react-jss'; | ||
7 | |||
8 | import Input from '../../components/ui/Input'; | ||
9 | import Button from '../../components/ui/Button'; | ||
10 | import Modal from '../../components/ui/Modal'; | ||
11 | import { state as ModalState } from '.'; | ||
12 | import AppStore from '../../stores/AppStore'; | ||
13 | import { DEBUG_API } from '../../config'; | ||
14 | import { sendAuthRequest } from '../../api/utils/auth'; | ||
15 | |||
16 | const messages = defineMessages({ | ||
17 | title: { | ||
18 | id: 'feature.publishDebugInfo.title', | ||
19 | defaultMessage: '!!!Publish debug information', | ||
20 | }, | ||
21 | info: { | ||
22 | id: 'feature.publishDebugInfo.info', | ||
23 | defaultMessage: '!!!Publishing your debug information helps us find issues and errors in Ferdi. By publishing your debug information you accept Ferdi Debugger\'s privacy policy and terms of service', | ||
24 | }, | ||
25 | privacy: { | ||
26 | id: 'feature.publishDebugInfo.privacy', | ||
27 | defaultMessage: '!!!Privacy policy', | ||
28 | }, | ||
29 | terms: { | ||
30 | id: 'feature.publishDebugInfo.terms', | ||
31 | defaultMessage: '!!!Terms of service', | ||
32 | }, | ||
33 | publish: { | ||
34 | id: 'feature.publishDebugInfo.publish', | ||
35 | defaultMessage: '!!!Accept and publish', | ||
36 | }, | ||
37 | published: { | ||
38 | id: 'feature.publishDebugInfo.published', | ||
39 | defaultMessage: '!!!Your debug log was published and is now availible at', | ||
40 | }, | ||
41 | }); | ||
42 | |||
43 | const styles = theme => ({ | ||
44 | info: { | ||
45 | paddingTop: 20, | ||
46 | paddingBottom: 20, | ||
47 | }, | ||
48 | link: { | ||
49 | color: theme.styleTypes.primary.accent + ' !important', | ||
50 | padding: 10, | ||
51 | cursor: 'pointer', | ||
52 | }, | ||
53 | button: { | ||
54 | width: '100%', | ||
55 | marginTop: 10, | ||
56 | cursor: 'pointer', | ||
57 | }, | ||
58 | url: { | ||
59 | marginTop: 20, | ||
60 | |||
61 | '& > div': { | ||
62 | fontFamily: 'SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace', | ||
63 | }, | ||
64 | }, | ||
65 | }); | ||
66 | |||
67 | export default @injectSheet(styles) @inject('stores') @observer class PublishDebugLogModal extends Component { | ||
68 | static propTypes = { | ||
69 | classes: PropTypes.object.isRequired, | ||
70 | }; | ||
71 | |||
72 | static contextTypes = { | ||
73 | intl: intlShape, | ||
74 | }; | ||
75 | |||
76 | state = { | ||
77 | log: null, | ||
78 | isSendingLog: false, | ||
79 | } | ||
80 | |||
81 | // Close this modal | ||
82 | close() { | ||
83 | ModalState.isModalVisible = false; | ||
84 | } | ||
85 | |||
86 | async publishDebugInfo() { | ||
87 | this.setState({ | ||
88 | isSendingLog: true, | ||
89 | }) | ||
90 | |||
91 | const debugInfo = JSON.stringify(this.props.stores.app.debugInfo); | ||
92 | |||
93 | const request = await sendAuthRequest(`${DEBUG_API}/create`, { | ||
94 | method: 'POST', | ||
95 | body: JSON.stringify({ | ||
96 | log: debugInfo | ||
97 | }), | ||
98 | }, false); | ||
99 | const response = await request.json(); | ||
100 | console.log(response); | ||
101 | if (response.id) { | ||
102 | this.setState({ | ||
103 | log: response.id, | ||
104 | }) | ||
105 | } else { | ||
106 | // TODO: Show error message | ||
107 | this.close(); | ||
108 | } | ||
109 | } | ||
110 | |||
111 | render() { | ||
112 | const { isModalVisible } = ModalState; | ||
113 | |||
114 | const { | ||
115 | classes, | ||
116 | } = this.props; | ||
117 | |||
118 | const { | ||
119 | log | ||
120 | } = this.state; | ||
121 | |||
122 | const { intl } = this.context; | ||
123 | |||
124 | return ( | ||
125 | <Modal | ||
126 | isOpen={isModalVisible} | ||
127 | shouldCloseOnOverlayClick | ||
128 | close={this.close.bind(this)} | ||
129 | > | ||
130 | <H1> | ||
131 | {intl.formatMessage(messages.title)} | ||
132 | </H1> | ||
133 | { log ? ( | ||
134 | <> | ||
135 | <p className={classes.info}>{intl.formatMessage(messages.published)}</p> | ||
136 | <Input | ||
137 | className={classes.url} | ||
138 | showLabel={false} | ||
139 | field={{ | ||
140 | type: 'url', | ||
141 | value: DEBUG_API + '/' + log, | ||
142 | disabled: true, | ||
143 | }} | ||
144 | readonly | ||
145 | /> | ||
146 | </> | ||
147 | ) : ( | ||
148 | <> | ||
149 | <p className={classes.info}>{intl.formatMessage(messages.info)}</p> | ||
150 | |||
151 | <a href={ DEBUG_API + '/privacy.html' } target="_blank" className={classes.link}> | ||
152 | {intl.formatMessage(messages.privacy)} | ||
153 | </a> | ||
154 | <a href={ DEBUG_API + '/terms.html' } target="_blank" className={classes.link}> | ||
155 | {intl.formatMessage(messages.terms)} | ||
156 | </a> | ||
157 | |||
158 | <Button | ||
159 | type="button" | ||
160 | label={intl.formatMessage(messages.publish)} | ||
161 | className={classes.button} | ||
162 | onClick={this.publishDebugInfo.bind(this)} | ||
163 | disabled={this.state.isSendingLog} | ||
164 | /> | ||
165 | </> | ||
166 | ) } | ||
167 | </Modal> | ||
168 | ); | ||
169 | } | ||
170 | } | ||
171 | |||
172 | PublishDebugLogModal.wrappedComponent.propTypes = { | ||
173 | stores: PropTypes.shape({ | ||
174 | app: PropTypes.instanceOf(AppStore).isRequired, | ||
175 | }).isRequired, | ||
176 | actions: PropTypes.shape({ | ||
177 | service: PropTypes.shape({ | ||
178 | setActive: PropTypes.func.isRequired, | ||
179 | }).isRequired, | ||
180 | }).isRequired, | ||
181 | }; | ||