6 files changed, 119 insertions, 124 deletions

diff --git a/src/components/services/content/ConnectionLostBanner.js b/src/components/services/content/ConnectionLostBanner.js
index ebe863333..423edb3c7 100644
--- a/src/components/services/content/ConnectionLostBanner.js
+++ b/src/components/services/content/ConnectionLostBanner.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import injectSheet from 'react-jss';
 import { Icon } from '@meetfranz/ui';
-import { intlShape, defineMessages } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 
 import { mdiAlert } from '@mdi/js';
 import { LIVE_API_FERDI_WEBSITE } from '../../../config';
@@ -12,15 +12,15 @@ import { LIVE_API_FERDI_WEBSITE } from '../../../config';
 const messages = defineMessages({
   text: {
     id: 'connectionLostBanner.message',
-    defaultMessage: '!!!Oh no! Ferdi lost the connection to {name}.',
+    defaultMessage: 'Oh no! Ferdi lost the connection to {name}.',
   },
   moreInformation: {
     id: 'connectionLostBanner.informationLink',
-    defaultMessage: '!!!What happened?',
+    defaultMessage: 'What happened?',
   },
   cta: {
     id: 'connectionLostBanner.cta',
-    defaultMessage: '!!!Reload Service',
+    defaultMessage: 'Reload Service',
   },
 });
 
@@ -78,16 +78,12 @@ class ConnectionLostBanner extends Component {
     reload: PropTypes.func.isRequired,
   };
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
   inputRef = React.createRef();
 
   render() {
     const { classes, name, reload } = this.props;
 
-    const { intl } = this.context;
+    const { intl } = this.props;
 
     return (
       <div className={classes.root}>
@@ -110,4 +106,4 @@ class ConnectionLostBanner extends Component {
   }
 }
 
-export default ConnectionLostBanner;
+export default injectIntl(ConnectionLostBanner);
diff --git a/src/components/services/content/ErrorHandlers/WebviewErrorHandler.js b/src/components/services/content/ErrorHandlers/WebviewErrorHandler.js
index 36e0ac418..41d84c0b0 100644
--- a/src/components/services/content/ErrorHandlers/WebviewErrorHandler.js
+++ b/src/components/services/content/ErrorHandlers/WebviewErrorHandler.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 import injectSheet from 'react-jss';
 
 import Button from '../../../ui/Button';
@@ -11,27 +11,29 @@ import styles from './styles';
 const messages = defineMessages({
   headline: {
     id: 'service.errorHandler.headline',
-    defaultMessage: '!!!Oh no!',
+    defaultMessage: 'Oh no!',
   },
   text: {
     id: 'service.errorHandler.text',
-    defaultMessage: '!!!{name} has failed to load.',
+    defaultMessage: '{name} has failed to load.',
   },
   action: {
     id: 'service.errorHandler.action',
-    defaultMessage: '!!!Reload {name}',
+    defaultMessage: 'Reload {name}',
   },
   editAction: {
     id: 'service.errorHandler.editAction',
-    defaultMessage: '!!!Edit {name}',
+    defaultMessage: 'Edit {name}',
   },
   errorMessage: {
     id: 'service.errorHandler.message',
-    defaultMessage: '!!!Error:',
+    defaultMessage: 'Error:',
   },
 });
 
-export default @injectSheet(styles) @observer class WebviewErrorHandler extends Component {
+@injectSheet(styles)
+@observer
+class WebviewErrorHandler extends Component {
   static propTypes = {
     name: PropTypes.string.isRequired,
     reload: PropTypes.func.isRequired,
@@ -40,30 +42,16 @@ export default @injectSheet(styles) @observer class WebviewErrorHandler extends
     classes: PropTypes.object.isRequired,
   };
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
   render() {
-    const {
-      name,
-      reload,
-      edit,
-      errorMessage,
-      classes,
-    } = this.props;
-    const { intl } = this.context;
+    const { name, reload, edit, errorMessage, classes } = this.props;
+    const { intl } = this.props;
 
     return (
       <div className={classes.component}>
         <h1>{intl.formatMessage(messages.headline)}</h1>
         <p>{intl.formatMessage(messages.text, { name })}</p>
         <p>
-          <strong>
-            {intl.formatMessage(messages.errorMessage)}
-            :
-          </strong>
-          {' '}
+          <strong>{intl.formatMessage(messages.errorMessage)}:</strong>{' '}
           {errorMessage}
         </p>
         <div className={classes.buttonContainer}>
@@ -82,3 +70,5 @@ export default @injectSheet(styles) @observer class WebviewErrorHandler extends
     );
   }
 }
+
+export default injectIntl(WebviewErrorHandler);
diff --git a/src/components/services/content/ServiceDisabled.js b/src/components/services/content/ServiceDisabled.js
index d0f12256e..e59ed58bd 100644
--- a/src/components/services/content/ServiceDisabled.js
+++ b/src/components/services/content/ServiceDisabled.js
@@ -1,38 +1,35 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 
 import Button from '../../ui/Button';
 
 const messages = defineMessages({
   headline: {
     id: 'service.disabledHandler.headline',
-    defaultMessage: '!!!{name} is disabled',
+    defaultMessage: '{name} is disabled',
   },
   action: {
     id: 'service.disabledHandler.action',
-    defaultMessage: '!!!Enable {name}',
+    defaultMessage: 'Enable {name}',
   },
 });
 
-export default @observer class ServiceDisabled extends Component {
+@observer
+class ServiceDisabled extends Component {
   static propTypes = {
     name: PropTypes.string.isRequired,
     enable: PropTypes.func.isRequired,
   };
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
   countdownInterval = null;
 
   countdownIntervalTimeout = 1000;
 
   render() {
     const { name, enable } = this.props;
-    const { intl } = this.context;
+    const { intl } = this.props;
 
     return (
       <div className="services__info-layer">
@@ -46,3 +43,5 @@ export default @observer class ServiceDisabled extends Component {
     );
   }
 }
+
+export default injectIntl(ServiceDisabled);
diff --git a/src/components/services/content/ServiceView.js b/src/components/services/content/ServiceView.js
index 3fc084ff0..fa866e153 100644
--- a/src/components/services/content/ServiceView.js
+++ b/src/components/services/content/ServiceView.js
@@ -15,7 +15,9 @@ import SettingsStore from '../../../stores/SettingsStore';
 import WebControlsScreen from '../../../features/webControls/containers/WebControlsScreen';
 import { CUSTOM_WEBSITE_RECIPE_ID } from '../../../config';
 
-export default @inject('stores', 'actions') @observer class ServiceView extends Component {
+@inject('stores', 'actions')
+@observer
+class ServiceView extends Component {
   static propTypes = {
     service: PropTypes.instanceOf(ServiceModel).isRequired,
     setWebviewReference: PropTypes.func.isRequired,
@@ -63,7 +65,7 @@ export default @inject('stores', 'actions') @observer class ServiceView extends
     clearTimeout(this.hibernationTimer);
   }
 
-  updateTargetUrl = (event) => {
+  updateTargetUrl = event => {
     let visible = true;
     if (event.url === '' || event.url === '#') {
       visible = false;
@@ -86,11 +88,12 @@ export default @inject('stores', 'actions') @observer class ServiceView extends
       isSpellcheckerEnabled,
     } = this.props;
 
-    const {
-      navigationBarBehaviour,
-    } = stores.settings.app;
+    const { navigationBarBehaviour } = stores.settings.app;
 
-    const showNavBar = navigationBarBehaviour === 'always' || (navigationBarBehaviour === 'custom' && service.recipe.id === CUSTOM_WEBSITE_RECIPE_ID);
+    const showNavBar =
+      navigationBarBehaviour === 'always' ||
+      (navigationBarBehaviour === 'custom' &&
+        service.recipe.id === CUSTOM_WEBSITE_RECIPE_ID);
 
     const webviewClasses = classnames({
       services__webview: true,
@@ -101,9 +104,7 @@ export default @inject('stores', 'actions') @observer class ServiceView extends
 
     let statusBar = null;
     if (this.state.statusBarVisible) {
-      statusBar = (
-        <StatusBarTargetUrl text={this.state.targetUrl} />
-      );
+      statusBar = <StatusBarTargetUrl text={this.state.targetUrl} />;
     }
 
     return (
@@ -117,11 +118,11 @@ export default @inject('stores', 'actions') @observer class ServiceView extends
                 reload={reload}
               />
             )}
-            {service.isEnabled && service.isLoading && service.isFirstLoad && !service.isServiceAccessRestricted && (
-              <WebviewLoader
-                loaded={false}
-                name={service.name}
-              />
+            {service.isEnabled &&
+              service.isLoading &&
+              service.isFirstLoad &&
+              !service.isServiceAccessRestricted && (
+                <WebviewLoader loaded={false} name={service.name} />
             )}
             {service.isError && (
               <WebviewErrorHandler
@@ -147,9 +148,7 @@ export default @inject('stores', 'actions') @observer class ServiceView extends
           <>
             {!service.isHibernating ? (
               <>
-                {showNavBar && (
-                  <WebControlsScreen service={service} />
-                )}
+                {showNavBar && <WebControlsScreen service={service} />}
                 <ServiceWebview
                   service={service}
                   setWebviewReference={setWebviewReference}
@@ -159,9 +158,11 @@ export default @inject('stores', 'actions') @observer class ServiceView extends
               </>
             ) : (
               <div>
-                <span role="img" aria-label="Sleeping Emoji">😴</span>
-                {' '}
-                This service is currently hibernating. If this page doesn&#x27;t close soon, please try reloading Ferdi.
+                <span role="img" aria-label="Sleeping Emoji">
+                  😴
+                </span>{' '}
+                This service is currently hibernating. If this page doesn&#x27;t
+                close soon, please try reloading Ferdi.
               </div>
             )}
           </>
@@ -171,3 +172,5 @@ export default @inject('stores', 'actions') @observer class ServiceView extends
     );
   }
 }
+
+export default ServiceView;
diff --git a/src/components/services/content/Services.js b/src/components/services/content/Services.js
index bb93ff7d4..fb43fb816 100644
--- a/src/components/services/content/Services.js
+++ b/src/components/services/content/Services.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes, inject } from 'mobx-react';
 import { Link } from 'react-router';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 import Confetti from 'react-confetti';
 import ms from 'ms';
 import injectSheet from 'react-jss';
@@ -14,23 +14,24 @@ import serverlessLogin from '../../../helpers/serverless-helpers';
 const messages = defineMessages({
   welcome: {
     id: 'services.welcome',
-    defaultMessage: '!!!Welcome to Ferdi',
+    defaultMessage: 'Welcome to Ferdi',
   },
   getStarted: {
     id: 'services.getStarted',
-    defaultMessage: '!!!Get started',
+    defaultMessage: 'Get started',
   },
   login: {
     id: 'services.login',
-    defaultMessage: '!!!Please login to use Ferdi.',
+    defaultMessage: 'Please login to use Ferdi.',
   },
   serverless: {
     id: 'services.serverless',
-    defaultMessage: '!!!Use Ferdi without an Account',
+    defaultMessage: 'Use Ferdi without an Account',
   },
   serverInfo: {
     id: 'services.serverInfo',
-    defaultMessage: '!!!Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner. If you are switching over (from one of the hosted servers) to using Ferdi without an account, please be informed that you can export your data from that server and subsequently import it using the Help menu to resurrect all your workspaces and configured services!',
+    defaultMessage:
+      'Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner. If you are switching over (from one of the hosted servers) to using Ferdi without an account, please be informed that you can export your data from that server and subsequently import it using the Help menu to resurrect all your workspaces and configured services!',
   },
 });
 
@@ -43,7 +44,10 @@ const styles = {
   },
 };
 
-export default @injectSheet(styles) @inject('actions') @observer class Services extends Component {
+@injectSheet(styles)
+@inject('actions')
+@observer
+class Services extends Component {
   static propTypes = {
     services: MobxPropTypes.arrayOrObservableArray,
     setWebviewReference: PropTypes.func.isRequired,
@@ -63,10 +67,6 @@ export default @injectSheet(styles) @inject('actions') @observer class Services
     services: [],
   };
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
   state = {
     showConfetti: true,
   };
@@ -112,11 +112,9 @@ export default @injectSheet(styles) @inject('actions') @observer class Services
       isSpellcheckerEnabled,
     } = this.props;
 
-    const {
-      showConfetti,
-    } = this.state;
+    const { showConfetti } = this.state;
 
-    const { intl } = this.context;
+    const { intl } = this.props;
     const isLoggedIn = Boolean(localStorage.getItem('authToken'));
 
     return (
@@ -131,25 +129,28 @@ export default @injectSheet(styles) @inject('actions') @observer class Services
           </div>
         )}
         {services.length === 0 && (
-          <Appear
-            timeout={1500}
-            transitionName="slideUp"
-          >
+          <Appear timeout={1500} transitionName="slideUp">
             <div className="services__no-service">
-              <img src="./assets/images/logo.svg" alt="Logo" style={{ maxHeight: '50vh' }} />
+              <img
+                src="./assets/images/logo.svg"
+                alt="Logo"
+                style={{ maxHeight: '50vh' }}
+              />
               <h1>{intl.formatMessage(messages.welcome)}</h1>
-              { !isLoggedIn && (
+              {!isLoggedIn && (
                 <>
                   <p>{intl.formatMessage(messages.login)}</p>
                   <p>{intl.formatMessage(messages.serverInfo)}</p>
                 </>
-              ) }
-              <Appear
-                timeout={300}
-                transitionName="slideUp"
-              >
-                <Link to={isLoggedIn ? '/settings/recipes' : '/auth/welcome'} className="button">
-                  { isLoggedIn ? intl.formatMessage(messages.getStarted) : 'Login' }
+              )}
+              <Appear timeout={300} transitionName="slideUp">
+                <Link
+                  to={isLoggedIn ? '/settings/recipes' : '/auth/welcome'}
+                  className="button"
+                >
+                  {isLoggedIn
+                    ? intl.formatMessage(messages.getStarted)
+                    : 'Login'}
                 </Link>
                 {!isLoggedIn && (
                   <button
@@ -167,27 +168,33 @@ export default @injectSheet(styles) @inject('actions') @observer class Services
             </div>
           </Appear>
         )}
-        {services.filter((service) => !service.isTodosService).map((service) => (
-          <ServiceView
-            key={service.id}
-            service={service}
-            handleIPCMessage={handleIPCMessage}
-            setWebviewReference={setWebviewReference}
-            detachService={detachService}
-            openWindow={openWindow}
-            reload={() => reload({ serviceId: service.id })}
-            edit={() => openSettings({ path: `services/edit/${service.id}` })}
-            enable={() => update({
-              serviceId: service.id,
-              serviceData: {
-                isEnabled: true,
-              },
-              redirect: false,
-            })}
-            isSpellcheckerEnabled={isSpellcheckerEnabled}
-          />
-        ))}
+        {services
+          .filter(service => !service.isTodosService)
+          .map(service => (
+            <ServiceView
+              key={service.id}
+              service={service}
+              handleIPCMessage={handleIPCMessage}
+              setWebviewReference={setWebviewReference}
+              detachService={detachService}
+              openWindow={openWindow}
+              reload={() => reload({ serviceId: service.id })}
+              edit={() => openSettings({ path: `services/edit/${service.id}` })}
+              enable={() =>
+                update({
+                  serviceId: service.id,
+                  serviceData: {
+                    isEnabled: true,
+                  },
+                  redirect: false,
+                })
+              }
+              isSpellcheckerEnabled={isSpellcheckerEnabled}
+            />
+          ))}
       </div>
     );
   }
 }
+
+export default injectIntl(Services);
diff --git a/src/components/services/content/WebviewCrashHandler.js b/src/components/services/content/WebviewCrashHandler.js
index 10ff0bbbb..a332602be 100644
--- a/src/components/services/content/WebviewCrashHandler.js
+++ b/src/components/services/content/WebviewCrashHandler.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 import ms from 'ms';
 
 import Button from '../../ui/Button';
@@ -9,35 +9,33 @@ import Button from '../../ui/Button';
 const messages = defineMessages({
   headline: {
     id: 'service.crashHandler.headline',
-    defaultMessage: '!!!Oh no!',
+    defaultMessage: 'Oh no!',
   },
   text: {
     id: 'service.crashHandler.text',
-    defaultMessage: '!!!{name} has caused an error.',
+    defaultMessage: '{name} has caused an error.',
   },
   action: {
     id: 'service.crashHandler.action',
-    defaultMessage: '!!!Reload {name}',
+    defaultMessage: 'Reload {name}',
   },
   autoReload: {
     id: 'service.crashHandler.autoReload',
-    defaultMessage: '!!!Trying to automatically restore {name} in {seconds} seconds',
+    defaultMessage:
+      'Trying to automatically restore {name} in {seconds} seconds',
   },
 });
 
-export default @observer class WebviewCrashHandler extends Component {
+@observer
+class WebviewCrashHandler extends Component {
   static propTypes = {
     name: PropTypes.string.isRequired,
     reload: PropTypes.func.isRequired,
   };
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
   state = {
     countdown: ms('10s'),
-  }
+  };
 
   countdownInterval = null;
 
@@ -47,7 +45,7 @@ export default @observer class WebviewCrashHandler extends Component {
     const { reload } = this.props;
 
     this.countdownInterval = setInterval(() => {
-      this.setState((prevState) => ({
+      this.setState(prevState => ({
         countdown: prevState.countdown - this.countdownIntervalTimeout,
       }));
 
@@ -60,7 +58,7 @@ export default @observer class WebviewCrashHandler extends Component {
 
   render() {
     const { name, reload } = this.props;
-    const { intl } = this.context;
+    const { intl } = this.props;
 
     return (
       <div className="services__info-layer">
@@ -82,3 +80,5 @@ export default @observer class WebviewCrashHandler extends Component {
     );
   }
 }
+
+export default injectIntl(WebviewCrashHandler);