diff options
author | Stefan Malzner <stefan@adlk.io> | 2018-11-24 20:20:31 +0100 |
---|---|---|
committer | Stefan Malzner <stefan@adlk.io> | 2018-11-24 20:20:31 +0100 |
commit | df4d195ec7135c76f8f5de54c3939d2e74e80d4a (patch) | |
tree | 9a669462fa769d47e7be055b2026be7b58dc14a7 /src/features/delayApp/Component.js | |
parent | feat(App): Lay groundwork for general themeing support (diff) | |
download | ferdium-app-df4d195ec7135c76f8f5de54c3939d2e74e80d4a.tar.gz ferdium-app-df4d195ec7135c76f8f5de54c3939d2e74e80d4a.tar.zst ferdium-app-df4d195ec7135c76f8f5de54c3939d2e74e80d4a.zip |
Delay app based on featureAPI settings
Diffstat (limited to 'src/features/delayApp/Component.js')
-rw-r--r-- | src/features/delayApp/Component.js | 86 |
1 files changed, 86 insertions, 0 deletions
diff --git a/src/features/delayApp/Component.js b/src/features/delayApp/Component.js new file mode 100644 index 000000000..2bfa1162e --- /dev/null +++ b/src/features/delayApp/Component.js | |||
@@ -0,0 +1,86 @@ | |||
1 | import React, { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import { inject, observer } from 'mobx-react'; | ||
4 | import { defineMessages, intlShape } from 'react-intl'; | ||
5 | import injectSheet from 'react-jss'; | ||
6 | |||
7 | import Button from '../../components/ui/Button'; | ||
8 | |||
9 | import { config } from './'; | ||
10 | import styles from './styles'; | ||
11 | |||
12 | const messages = defineMessages({ | ||
13 | headline: { | ||
14 | id: 'feature.delayApp.headline', | ||
15 | defaultMessage: '!!!Please purchase license to skip waiting', | ||
16 | }, | ||
17 | action: { | ||
18 | id: 'feature.delayApp.action', | ||
19 | defaultMessage: '!!!Get a Franz Supporter License', | ||
20 | }, | ||
21 | text: { | ||
22 | id: 'feature.delayApp.text', | ||
23 | defaultMessage: '!!!Franz will continue in {seconds} seconds.', | ||
24 | }, | ||
25 | }); | ||
26 | |||
27 | export default @inject('actions') @observer @injectSheet(styles) class DelayApp extends Component { | ||
28 | static propTypes = { | ||
29 | // eslint-disable-next-line | ||
30 | classes: PropTypes.object.isRequired, | ||
31 | }; | ||
32 | |||
33 | static contextTypes = { | ||
34 | intl: intlShape, | ||
35 | }; | ||
36 | |||
37 | state = { | ||
38 | countdown: config.delayDuration, | ||
39 | } | ||
40 | |||
41 | componentDidMount() { | ||
42 | // const { reload } = this.props; | ||
43 | |||
44 | this.countdownInterval = setInterval(() => { | ||
45 | this.setState({ | ||
46 | countdown: this.state.countdown - this.countdownIntervalTimeout, | ||
47 | }); | ||
48 | |||
49 | if (this.state.countdown <= 0) { | ||
50 | // reload(); | ||
51 | clearInterval(this.countdownInterval); | ||
52 | } | ||
53 | }, this.countdownIntervalTimeout); | ||
54 | } | ||
55 | |||
56 | countdownInterval = null; | ||
57 | countdownIntervalTimeout = 1000; | ||
58 | |||
59 | render() { | ||
60 | const { classes, actions } = this.props; | ||
61 | const { intl } = this.context; | ||
62 | |||
63 | return ( | ||
64 | <div className={`${classes.container}`}> | ||
65 | <h1 className={classes.headline}>{intl.formatMessage(messages.headline)}</h1> | ||
66 | <Button | ||
67 | label={intl.formatMessage(messages.action)} | ||
68 | className={classes.button} | ||
69 | buttonType="inverted" | ||
70 | onClick={() => actions.ui.openSettings({ path: 'user' })} | ||
71 | /> | ||
72 | <p className="footnote">{intl.formatMessage(messages.text, { | ||
73 | seconds: this.state.countdown / 1000, | ||
74 | })}</p> | ||
75 | </div> | ||
76 | ); | ||
77 | } | ||
78 | } | ||
79 | |||
80 | DelayApp.wrappedComponent.propTypes = { | ||
81 | actions: PropTypes.shape({ | ||
82 | ui: PropTypes.shape({ | ||
83 | openSettings: PropTypes.func.isRequired, | ||
84 | }).isRequired, | ||
85 | }).isRequired, | ||
86 | }; | ||