diff options
Diffstat (limited to 'src/features')
-rw-r--r-- | src/features/publishDebugInfo/Component.tsx (renamed from src/features/publishDebugInfo/Component.js) | 95 | ||||
-rw-r--r-- | src/features/publishDebugInfo/index.ts | 14 |
2 files changed, 47 insertions, 62 deletions
diff --git a/src/features/publishDebugInfo/Component.js b/src/features/publishDebugInfo/Component.tsx index 27661d917..e265902dd 100644 --- a/src/features/publishDebugInfo/Component.js +++ b/src/features/publishDebugInfo/Component.tsx | |||
@@ -1,18 +1,15 @@ | |||
1 | import { inject, observer } from 'mobx-react'; | 1 | import { inject, observer } from 'mobx-react'; |
2 | import PropTypes from 'prop-types'; | 2 | import { Component, ReactElement } from 'react'; |
3 | import { Component } from 'react'; | 3 | import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; |
4 | import { defineMessages, injectIntl } from 'react-intl'; | 4 | import withStyles, { WithStylesProps } from 'react-jss'; |
5 | import injectSheet from 'react-jss'; | 5 | import { StoresProps } from '../../@types/ferdium-components.types'; |
6 | import { state as ModalState } from './store'; | 6 | import { state as ModalState } from './store'; |
7 | |||
8 | import { H1 } from '../../components/ui/headline'; | 7 | import { H1 } from '../../components/ui/headline'; |
9 | import { sendAuthRequest } from '../../api/utils/auth'; | 8 | import { sendAuthRequest } from '../../api/utils/auth'; |
10 | import Button from '../../components/ui/button'; | 9 | import Button from '../../components/ui/button'; |
11 | import Input from '../../components/ui/input/index'; | 10 | import Input from '../../components/ui/input/index'; |
12 | import Modal from '../../components/ui/Modal'; | 11 | import Modal from '../../components/ui/Modal'; |
13 | import { DEBUG_API } from '../../config'; | 12 | import { DEBUG_API } from '../../config'; |
14 | import AppStore from '../../stores/AppStore'; | ||
15 | import ServicesStore from '../../stores/ServicesStore'; | ||
16 | 13 | ||
17 | const debug = require('../../preload-safe-debug')( | 14 | const debug = require('../../preload-safe-debug')( |
18 | 'Ferdium:feature:publishDebugInfo', | 15 | 'Ferdium:feature:publishDebugInfo', |
@@ -78,30 +75,47 @@ const styles = theme => ({ | |||
78 | }, | 75 | }, |
79 | }); | 76 | }); |
80 | 77 | ||
81 | class PublishDebugLogModal extends Component { | 78 | interface IProps |
82 | state = { | 79 | extends Partial<StoresProps>, |
83 | log: null, | 80 | WithStylesProps<typeof styles>, |
84 | error: false, | 81 | WrappedComponentProps {} |
85 | isSendingLog: false, | 82 | |
86 | }; | 83 | interface IState { |
84 | log: null; | ||
85 | error: boolean; | ||
86 | isSendingLogs: boolean; | ||
87 | } | ||
88 | |||
89 | @inject('stores', 'actions') | ||
90 | @observer | ||
91 | class PublishDebugLogModal extends Component<IProps, IState> { | ||
92 | constructor(props: IProps) { | ||
93 | super(props); | ||
94 | |||
95 | this.state = { | ||
96 | log: null, | ||
97 | error: false, | ||
98 | isSendingLogs: false, | ||
99 | }; | ||
100 | } | ||
87 | 101 | ||
88 | // Close this modal | 102 | // Close this modal |
89 | close() { | 103 | close(): void { |
90 | ModalState.isModalVisible = false; | 104 | ModalState.isModalVisible = false; |
91 | this.setState({ | 105 | this.setState({ |
92 | log: null, | 106 | log: null, |
93 | error: false, | 107 | error: false, |
94 | isSendingLog: false, | 108 | isSendingLogs: false, |
95 | }); | 109 | }); |
96 | } | 110 | } |
97 | 111 | ||
98 | async publishDebugInfo() { | 112 | async publishDebugInfo(): Promise<void> { |
99 | debug('debugInfo: starting publish'); | 113 | debug('debugInfo: starting publish'); |
100 | this.setState({ | 114 | this.setState({ |
101 | isSendingLog: true, | 115 | isSendingLogs: true, |
102 | }); | 116 | }); |
103 | 117 | ||
104 | const debugInfo = JSON.stringify(this.props.stores.app.debugInfo); | 118 | const debugInfo = JSON.stringify(this.props.stores?.app?.debugInfo); |
105 | 119 | ||
106 | const request = await sendAuthRequest( | 120 | const request = await sendAuthRequest( |
107 | `${DEBUG_API}/create`, | 121 | `${DEBUG_API}/create`, |
@@ -118,31 +132,21 @@ class PublishDebugLogModal extends Component { | |||
118 | if (request.status === 200) { | 132 | if (request.status === 200) { |
119 | const response = await request.json(); | 133 | const response = await request.json(); |
120 | if (response.id) { | 134 | if (response.id) { |
121 | this.setState({ | 135 | this.setState({ log: response.id }); |
122 | log: response.id, | ||
123 | }); | ||
124 | } else { | 136 | } else { |
125 | this.setState({ | 137 | this.setState({ error: true }); |
126 | error: true, | ||
127 | }); | ||
128 | } | 138 | } |
129 | } else { | 139 | } else { |
130 | this.setState({ | 140 | this.setState({ error: true }); |
131 | error: true, | ||
132 | }); | ||
133 | } | 141 | } |
134 | 142 | ||
135 | debug('debugInfo: finished publishing'); | 143 | debug('debugInfo: finished publishing'); |
136 | } | 144 | } |
137 | 145 | ||
138 | render() { | 146 | render(): ReactElement { |
139 | const { isModalVisible } = ModalState; | 147 | const { isModalVisible } = ModalState; |
140 | 148 | const { classes, intl } = this.props; | |
141 | const { classes } = this.props; | 149 | const { log, error, isSendingLogs } = this.state; |
142 | |||
143 | const { log, error, isSendingLog } = this.state; | ||
144 | |||
145 | const { intl } = this.props; | ||
146 | 150 | ||
147 | return ( | 151 | return ( |
148 | <Modal | 152 | <Modal |
@@ -159,18 +163,16 @@ class PublishDebugLogModal extends Component { | |||
159 | <p className={classes.info}> | 163 | <p className={classes.info}> |
160 | {intl.formatMessage(messages.published)} | 164 | {intl.formatMessage(messages.published)} |
161 | </p> | 165 | </p> |
162 | <Input showLabel={false} value={`${DEBUG_API}/${log}`} readonly /> | 166 | {/* TODO - [TS DEBT] need to check if <Input/> take readOnly and use it */} |
167 | <Input showLabel={false} value={`${DEBUG_API}/${log}`} readOnly /> | ||
163 | </> | 168 | </> |
164 | )} | 169 | )} |
165 | |||
166 | {error && ( | 170 | {error && ( |
167 | <p className={classes.info}>{intl.formatMessage(messages.error)}</p> | 171 | <p className={classes.info}>{intl.formatMessage(messages.error)}</p> |
168 | )} | 172 | )} |
169 | |||
170 | {!log && !error && ( | 173 | {!log && !error && ( |
171 | <> | 174 | <> |
172 | <p className={classes.info}>{intl.formatMessage(messages.info)}</p> | 175 | <p className={classes.info}>{intl.formatMessage(messages.info)}</p> |
173 | |||
174 | <a | 176 | <a |
175 | href={`${DEBUG_API}/privacy.html`} | 177 | href={`${DEBUG_API}/privacy.html`} |
176 | target="_blank" | 178 | target="_blank" |
@@ -187,13 +189,12 @@ class PublishDebugLogModal extends Component { | |||
187 | > | 189 | > |
188 | {intl.formatMessage(messages.terms)} | 190 | {intl.formatMessage(messages.terms)} |
189 | </a> | 191 | </a> |
190 | |||
191 | <Button | 192 | <Button |
192 | type="button" | 193 | type="button" |
193 | label={intl.formatMessage(messages.publish)} | 194 | label={intl.formatMessage(messages.publish)} |
194 | className={classes.button} | 195 | className={classes.button} |
195 | onClick={() => this.publishDebugInfo()} | 196 | onClick={() => this.publishDebugInfo()} |
196 | disabled={isSendingLog} | 197 | disabled={isSendingLogs} |
197 | /> | 198 | /> |
198 | </> | 199 | </> |
199 | )} | 200 | )} |
@@ -202,18 +203,6 @@ class PublishDebugLogModal extends Component { | |||
202 | } | 203 | } |
203 | } | 204 | } |
204 | 205 | ||
205 | PublishDebugLogModal.propTypes = { | ||
206 | stores: PropTypes.shape({ | ||
207 | app: PropTypes.instanceOf(AppStore).isRequired, | ||
208 | }).isRequired, | ||
209 | actions: PropTypes.shape({ | ||
210 | service: PropTypes.instanceOf(ServicesStore).isRequired, | ||
211 | }).isRequired, | ||
212 | classes: PropTypes.object.isRequired, | ||
213 | }; | ||
214 | |||
215 | export default injectIntl( | 206 | export default injectIntl( |
216 | injectSheet(styles, { injectTheme: true })( | 207 | withStyles(styles, { injectTheme: true })(PublishDebugLogModal), |
217 | inject('stores', 'actions')(observer(PublishDebugLogModal)), | ||
218 | ), | ||
219 | ); | 208 | ); |
diff --git a/src/features/publishDebugInfo/index.ts b/src/features/publishDebugInfo/index.ts index 80714a104..cbbdbc594 100644 --- a/src/features/publishDebugInfo/index.ts +++ b/src/features/publishDebugInfo/index.ts | |||
@@ -1,21 +1,17 @@ | |||
1 | import { state as ModalState } from './store'; | 1 | import { state } from './store'; |
2 | 2 | ||
3 | export { default as Component } from './Component'; | 3 | export { default as Component } from './Component'; |
4 | 4 | ||
5 | const state = ModalState; | ||
6 | const debug = require('../../preload-safe-debug')( | 5 | const debug = require('../../preload-safe-debug')( |
7 | 'Ferdium:feature:publishDebugInfo', | 6 | 'Ferdium:feature:publishDebugInfo', |
8 | ); | 7 | ); |
9 | 8 | ||
10 | export default function initialize() { | 9 | export default function initialize(): void { |
11 | debug('Initialize publishDebugInfo feature'); | 10 | debug('Initialize publishDebugInfo feature'); |
12 | 11 | ||
13 | function showModal() { | 12 | const showModal = (): void => { |
14 | state.isModalVisible = true; | 13 | state.isModalVisible = true; |
15 | } | ||
16 | |||
17 | window['ferdium'].features.publishDebugInfo = { | ||
18 | state, | ||
19 | showModal, | ||
20 | }; | 14 | }; |
15 | |||
16 | window['ferdium'].features.publishDebugInfo = { state, showModal }; | ||
21 | } | 17 | } |