diff options
Diffstat (limited to 'src/components/services/content')
-rw-r--r-- | src/components/services/content/ServiceWebview.tsx (renamed from src/components/services/content/ServiceWebview.jsx) | 48 | ||||
-rw-r--r-- | src/components/services/content/Services.tsx (renamed from src/components/services/content/Services.jsx) | 81 |
2 files changed, 67 insertions, 62 deletions
diff --git a/src/components/services/content/ServiceWebview.jsx b/src/components/services/content/ServiceWebview.tsx index 835c5125e..ac8d1ea66 100644 --- a/src/components/services/content/ServiceWebview.jsx +++ b/src/components/services/content/ServiceWebview.tsx | |||
@@ -1,27 +1,32 @@ | |||
1 | import { Component } from 'react'; | 1 | import { Component, ReactElement } from 'react'; |
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer } from 'mobx-react'; | 2 | import { observer } from 'mobx-react'; |
4 | import { action, makeObservable, observable, reaction } from 'mobx'; | 3 | import { action, makeObservable, observable, reaction } from 'mobx'; |
5 | import ElectronWebView from 'react-electron-web-view'; | 4 | import ElectronWebView from 'react-electron-web-view'; |
6 | import { join } from 'path'; | 5 | import { join } from 'path'; |
7 | |||
8 | import ServiceModel from '../../../models/Service'; | 6 | import ServiceModel from '../../../models/Service'; |
9 | 7 | ||
10 | const debug = require('../../../preload-safe-debug')('Ferdium:Services'); | 8 | const debug = require('../../../preload-safe-debug')('Ferdium:Services'); |
11 | 9 | ||
12 | class ServiceWebview extends Component { | 10 | interface IProps { |
13 | static propTypes = { | 11 | service: ServiceModel; |
14 | service: PropTypes.instanceOf(ServiceModel).isRequired, | 12 | setWebviewReference: (options: { |
15 | setWebviewReference: PropTypes.func.isRequired, | 13 | serviceId: string; |
16 | detachService: PropTypes.func.isRequired, | 14 | webview: ElectronWebView | null; |
17 | isSpellcheckerEnabled: PropTypes.bool.isRequired, | 15 | }) => void; |
18 | }; | 16 | detachService: (options: { service: ServiceModel }) => void; |
17 | isSpellcheckerEnabled: boolean; | ||
18 | } | ||
19 | 19 | ||
20 | @observable webview = null; | 20 | @observer |
21 | class ServiceWebview extends Component<IProps> { | ||
22 | @observable webview: ElectronWebView | null = null; | ||
21 | 23 | ||
22 | constructor(props) { | 24 | constructor(props: IProps) { |
23 | super(props); | 25 | super(props); |
24 | 26 | ||
27 | this.refocusWebview = this.refocusWebview.bind(this); | ||
28 | this._setWebview = this._setWebview.bind(this); | ||
29 | |||
25 | makeObservable(this); | 30 | makeObservable(this); |
26 | 31 | ||
27 | reaction( | 32 | reaction( |
@@ -45,15 +50,18 @@ class ServiceWebview extends Component { | |||
45 | ); | 50 | ); |
46 | } | 51 | } |
47 | 52 | ||
48 | componentWillUnmount() { | 53 | componentWillUnmount(): void { |
49 | const { service, detachService } = this.props; | 54 | const { service, detachService } = this.props; |
50 | detachService({ service }); | 55 | detachService({ service }); |
51 | } | 56 | } |
52 | 57 | ||
53 | refocusWebview = () => { | 58 | refocusWebview(): void { |
54 | const { webview } = this; | 59 | const { webview } = this; |
55 | debug('Refocus Webview is called', this.props.service); | 60 | debug('Refocus Webview is called', this.props.service); |
56 | if (!webview) return; | 61 | if (!webview) { |
62 | return; | ||
63 | } | ||
64 | |||
57 | if (this.props.service.isActive) { | 65 | if (this.props.service.isActive) { |
58 | webview.view.blur(); | 66 | webview.view.blur(); |
59 | webview.view.focus(); | 67 | webview.view.focus(); |
@@ -67,13 +75,13 @@ class ServiceWebview extends Component { | |||
67 | } else { | 75 | } else { |
68 | debug('Refocus not required - Not active service'); | 76 | debug('Refocus not required - Not active service'); |
69 | } | 77 | } |
70 | }; | 78 | } |
71 | 79 | ||
72 | @action _setWebview(webview) { | 80 | @action _setWebview(webview): void { |
73 | this.webview = webview; | 81 | this.webview = webview; |
74 | } | 82 | } |
75 | 83 | ||
76 | render() { | 84 | render(): ReactElement { |
77 | const { service, setWebviewReference, isSpellcheckerEnabled } = this.props; | 85 | const { service, setWebviewReference, isSpellcheckerEnabled } = this.props; |
78 | 86 | ||
79 | const preloadScript = join( | 87 | const preloadScript = join( |
@@ -114,7 +122,7 @@ class ServiceWebview extends Component { | |||
114 | }); | 122 | }); |
115 | }, 0); | 123 | }, 0); |
116 | }} | 124 | }} |
117 | onUpdateTargetUrl={this.updateTargetUrl} | 125 | // onUpdateTargetUrl={this.updateTargetUrl} // TODO - [TS DEBT] need to check where its from |
118 | useragent={service.userAgent} | 126 | useragent={service.userAgent} |
119 | disablewebsecurity={ | 127 | disablewebsecurity={ |
120 | service.recipe.disablewebsecurity ? true : undefined | 128 | service.recipe.disablewebsecurity ? true : undefined |
@@ -129,4 +137,4 @@ class ServiceWebview extends Component { | |||
129 | } | 137 | } |
130 | } | 138 | } |
131 | 139 | ||
132 | export default observer(ServiceWebview); | 140 | export default ServiceWebview; |
diff --git a/src/components/services/content/Services.jsx b/src/components/services/content/Services.tsx index da700b5b1..53cddd907 100644 --- a/src/components/services/content/Services.jsx +++ b/src/components/services/content/Services.tsx | |||
@@ -1,14 +1,13 @@ | |||
1 | import { Component } from 'react'; | 1 | import { Component, ReactElement } from 'react'; |
2 | import PropTypes from 'prop-types'; | 2 | import { observer } from 'mobx-react'; |
3 | import { observer, PropTypes as MobxPropTypes, inject } from 'mobx-react'; | ||
4 | import { Link } from 'react-router-dom'; | 3 | import { Link } from 'react-router-dom'; |
5 | import { defineMessages, injectIntl } from 'react-intl'; | 4 | import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; |
6 | import Confetti from 'react-confetti'; | 5 | import Confetti from 'react-confetti'; |
7 | import ms from 'ms'; | 6 | import ms from 'ms'; |
8 | import injectSheet from 'react-jss'; | 7 | import withStyles, { WithStylesProps } from 'react-jss'; |
9 | |||
10 | import ServiceView from './ServiceView'; | 8 | import ServiceView from './ServiceView'; |
11 | import Appear from '../../ui/effects/Appear'; | 9 | import Appear from '../../ui/effects/Appear'; |
10 | import Service from '../../../models/Service'; | ||
12 | 11 | ||
13 | const messages = defineMessages({ | 12 | const messages = defineMessages({ |
14 | getStarted: { | 13 | getStarted: { |
@@ -39,37 +38,40 @@ const styles = { | |||
39 | }, | 38 | }, |
40 | }; | 39 | }; |
41 | 40 | ||
42 | class Services extends Component { | 41 | interface IProps extends WrappedComponentProps, WithStylesProps<typeof styles> { |
43 | static propTypes = { | 42 | services?: Service[]; |
44 | services: MobxPropTypes.arrayOrObservableArray, | 43 | setWebviewReference: () => void; |
45 | setWebviewReference: PropTypes.func.isRequired, | 44 | detachService: () => void; |
46 | detachService: PropTypes.func.isRequired, | 45 | handleIPCMessage: () => void; |
47 | handleIPCMessage: PropTypes.func.isRequired, | 46 | openWindow: () => void; |
48 | openWindow: PropTypes.func.isRequired, | 47 | reload: (options: { serviceId: string }) => void; |
49 | reload: PropTypes.func.isRequired, | 48 | openSettings: (options: { path: string }) => void; |
50 | openSettings: PropTypes.func.isRequired, | 49 | update: (options: { |
51 | update: PropTypes.func.isRequired, | 50 | serviceId: string; |
52 | userHasCompletedSignup: PropTypes.bool.isRequired, | 51 | serviceData: { isEnabled: boolean }; |
53 | // eslint-disable-next-line react/forbid-prop-types | 52 | redirect: boolean; |
54 | classes: PropTypes.object.isRequired, | 53 | }) => void; |
55 | isSpellcheckerEnabled: PropTypes.bool.isRequired, | 54 | userHasCompletedSignup: boolean; |
56 | }; | 55 | isSpellcheckerEnabled: boolean; |
56 | } | ||
57 | 57 | ||
58 | static defaultProps = { | 58 | interface IState { |
59 | services: [], | 59 | showConfetti: boolean; |
60 | }; | 60 | } |
61 | 61 | ||
62 | _confettiTimeout = null; | 62 | @observer |
63 | class Services extends Component<IProps, IState> { | ||
64 | _confettiTimeout: number | null = null; | ||
63 | 65 | ||
64 | constructor() { | 66 | constructor(props: IProps) { |
65 | super(); | 67 | super(props); |
66 | 68 | ||
67 | this.state = { | 69 | this.state = { |
68 | showConfetti: true, | 70 | showConfetti: true, |
69 | }; | 71 | }; |
70 | } | 72 | } |
71 | 73 | ||
72 | componentDidMount() { | 74 | componentDidMount(): void { |
73 | this._confettiTimeout = window.setTimeout(() => { | 75 | this._confettiTimeout = window.setTimeout(() => { |
74 | this.setState({ | 76 | this.setState({ |
75 | showConfetti: false, | 77 | showConfetti: false, |
@@ -77,15 +79,15 @@ class Services extends Component { | |||
77 | }, ms('8s')); | 79 | }, ms('8s')); |
78 | } | 80 | } |
79 | 81 | ||
80 | componentWillUnmount() { | 82 | componentWillUnmount(): void { |
81 | if (this._confettiTimeout) { | 83 | if (this._confettiTimeout) { |
82 | clearTimeout(this._confettiTimeout); | 84 | clearTimeout(this._confettiTimeout); |
83 | } | 85 | } |
84 | } | 86 | } |
85 | 87 | ||
86 | render() { | 88 | render(): ReactElement { |
87 | const { | 89 | const { |
88 | services, | 90 | services = [], |
89 | handleIPCMessage, | 91 | handleIPCMessage, |
90 | setWebviewReference, | 92 | setWebviewReference, |
91 | detachService, | 93 | detachService, |
@@ -96,32 +98,31 @@ class Services extends Component { | |||
96 | userHasCompletedSignup, | 98 | userHasCompletedSignup, |
97 | classes, | 99 | classes, |
98 | isSpellcheckerEnabled, | 100 | isSpellcheckerEnabled, |
101 | intl, | ||
99 | } = this.props; | 102 | } = this.props; |
100 | 103 | ||
101 | const { showConfetti } = this.state; | 104 | const { showConfetti } = this.state; |
102 | 105 | ||
103 | const { intl } = this.props; | ||
104 | |||
105 | return ( | 106 | return ( |
106 | <div className="services"> | 107 | <div className="services"> |
107 | {userHasCompletedSignup && ( | 108 | {userHasCompletedSignup && ( |
108 | <div className={classes.confettiContainer}> | 109 | <div className={classes.confettiContainer}> |
109 | <Confetti | 110 | <Confetti |
110 | width={window.width} | 111 | width={window.innerWidth} |
111 | height={window.height} | 112 | height={window.innerHeight} |
112 | numberOfPieces={showConfetti ? 200 : 0} | 113 | numberOfPieces={showConfetti ? 200 : 0} |
113 | /> | 114 | /> |
114 | </div> | 115 | </div> |
115 | )} | 116 | )} |
116 | {services.length === 0 && ( | 117 | {services.length === 0 && ( |
117 | <Appear timeout={1500} transitionName="slideUp"> | 118 | <Appear transitionName="slideUp"> |
118 | <div className="services__no-service"> | 119 | <div className="services__no-service"> |
119 | <img | 120 | <img |
120 | src="./assets/images/logo-beard-only.svg" | 121 | src="./assets/images/logo-beard-only.svg" |
121 | alt="Logo" | 122 | alt="Logo" |
122 | style={{ maxHeight: '50vh' }} | 123 | style={{ maxHeight: '50vh' }} |
123 | /> | 124 | /> |
124 | <Appear timeout={300} transitionName="slideUp"> | 125 | <Appear transitionName="slideUp"> |
125 | <Link to="/settings/recipes" className="button"> | 126 | <Link to="/settings/recipes" className="button"> |
126 | {intl.formatMessage(messages.getStarted)} | 127 | {intl.formatMessage(messages.getStarted)} |
127 | </Link> | 128 | </Link> |
@@ -158,8 +159,4 @@ class Services extends Component { | |||
158 | } | 159 | } |
159 | } | 160 | } |
160 | 161 | ||
161 | export default injectIntl( | 162 | export default injectIntl(withStyles(styles, { injectTheme: true })(Services)); |
162 | injectSheet(styles, { injectTheme: true })( | ||
163 | inject('actions')(observer(Services)), | ||
164 | ), | ||
165 | ); | ||