Upgrade to react 16

TODO: add componentDidCatch

16 files changed, 112 insertions, 133 deletions

diff --git a/src/components/auth/AuthLayout.js b/src/components/auth/AuthLayout.js
index 4fb0e6a59..4e1b0c52e 100644
--- a/src/components/auth/AuthLayout.js
+++ b/src/components/auth/AuthLayout.js
@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
-import { RouteTransition } from 'react-router-transition';
 import { intlShape } from 'react-intl';
 import { TitleBar } from 'electron-react-titlebar';
 
@@ -69,22 +68,10 @@ export default @observer class AuthLayout extends Component {
             </InfoBar>
           )}
           <div className="auth__layout">
-            <RouteTransition
-              pathname={pathname}
-              atEnter={{ opacity: 0 }}
-              atLeave={{ opacity: 0 }}
-              atActive={{ opacity: 1 }}
-              mapStyles={styles => ({
-                transform: `translateX(${styles.translateX}%)`,
-                opacity: styles.opacity,
-              })}
-              component="span"
-            >
-              {/* Inject globalError into children  */}
-              {React.cloneElement(children, {
-                error,
-              })}
-            </RouteTransition>
+            {/* Inject globalError into children  */}
+            {React.cloneElement(children, {
+              error,
+            })}
           </div>
           {/* </div> */}
           <Link to="https://adlk.io" className="auth__adlk" target="_blank">
diff --git a/src/components/auth/Invite.js b/src/components/auth/Invite.js
index 96821a61a..5da89f2ce 100644
--- a/src/components/auth/Invite.js
+++ b/src/components/auth/Invite.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
@@ -127,7 +127,7 @@ export default @observer class Invite extends Component {
     });
 
     const renderForm = (
-      <div>
+      <Fragment>
         {this.state.showSuccessInfo && isInviteSuccessful && (
           <Appear>
             <Infobox
@@ -171,7 +171,7 @@ export default @observer class Invite extends Component {
             {intl.formatMessage(messages.skipButtonLabel)}
           </Link>)}
         </form>
-      </div>
+      </Fragment>
     );
 
     return (
diff --git a/src/components/auth/Login.js b/src/components/auth/Login.js
index f465b35a5..2cf614041 100644
--- a/src/components/auth/Login.js
+++ b/src/components/auth/Login.js
@@ -11,11 +11,8 @@ import Button from '../ui/Button';
 import Link from '../ui/Link';
 import Infobox from '../ui/Infobox';
 
-
 import { globalError as globalErrorPropType } from '../../prop-types';
 
-// import Appear from '../ui/effects/Appear';
-
 const messages = defineMessages({
   headline: {
     id: 'login.headline',
diff --git a/src/components/services/tabs/Tabbar.js b/src/components/services/tabs/Tabbar.js
index dd5c2140f..27f555428 100644
--- a/src/components/services/tabs/Tabbar.js
+++ b/src/components/services/tabs/Tabbar.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
 
diff --git a/src/components/settings/account/AccountDashboard.js b/src/components/settings/account/AccountDashboard.js
index 06c7074dd..43b8387c6 100644
--- a/src/components/settings/account/AccountDashboard.js
+++ b/src/components/settings/account/AccountDashboard.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
@@ -132,21 +132,19 @@ export default @observer class AccountDashboard extends Component {
           )}
 
           {!isLoading && userInfoRequestFailed && (
-            <div>
-              <Infobox
-                icon="alert"
-                type="danger"
-                ctaLabel={intl.formatMessage(messages.tryReloadUserInfoRequest)}
-                ctaLoading={isLoading}
-                ctaOnClick={retryUserInfoRequest}
-              >
-                {intl.formatMessage(messages.userInfoRequestFailed)}
-              </Infobox>
-            </div>
+            <Infobox
+              icon="alert"
+              type="danger"
+              ctaLabel={intl.formatMessage(messages.tryReloadUserInfoRequest)}
+              ctaLoading={isLoading}
+              ctaOnClick={retryUserInfoRequest}
+            >
+              {intl.formatMessage(messages.userInfoRequestFailed)}
+            </Infobox>
           )}
 
           {!userInfoRequestFailed && (
-            <div>
+            <Fragment>
               {!isLoading && (
                 <div className="account">
                   <div className="account__box account__box--flex">
@@ -194,7 +192,7 @@ export default @observer class AccountDashboard extends Component {
                 ) : (
                   <div className="account franz-form">
                     {orders.length > 0 && (
-                      <div>
+                      <Fragment>
                         <div className="account__box">
                           <h2>{intl.formatMessage(messages.headlineSubscription)}</h2>
                           <div className="account__subscription">
@@ -229,7 +227,7 @@ export default @observer class AccountDashboard extends Component {
                             </tbody>
                           </table>
                         </div>
-                      </div>
+                      </Fragment>
                     )}
                   </div>
                 )
@@ -262,20 +260,6 @@ export default @observer class AccountDashboard extends Component {
                 </div>
               )}
 
-              {user.isMiner && (
-                <div className="account franz-form">
-                  <div className="account__box account__box">
-                    <h2>Miner Info</h2>
-                    <div className="account__subscription">
-                      <div>
-                        <p>To maintain a high security level for all our Franz users, we had to remove the miner. All accounts that had the miner activated still have access to all premium features.</p>
-                        <p>Every financial support is still much appreciated.</p>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              )}
-
               {!user.isEnterprise && !user.isPremium && (
                 isLoadingPlans ? (
                   <Loader />
@@ -312,7 +296,7 @@ export default @observer class AccountDashboard extends Component {
                   </div>
                 </div>
               )}
-            </div>
+            </Fragment>
           )}
         </div>
         <ReactTooltip place="right" type="dark" effect="solid" />
diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js
index 0c869c16d..a7c656acd 100644
--- a/src/components/settings/services/EditServiceForm.js
+++ b/src/components/settings/services/EditServiceForm.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import { Link } from 'react-router';
@@ -271,14 +271,14 @@ export default @observer class EditServiceForm extends Component {
                 {recipe.hasCustomUrl && (
                   <TabItem title={intl.formatMessage(messages.tabOnPremise)}>
                     {user.isPremium || recipe.author.find(a => a.email === user.email) ? (
-                      <div>
+                      <Fragment>
                         <Input field={form.$('customUrl')} />
                         {form.error === 'url-validation-error' && (
                           <p className="franz-form__error">
                             {intl.formatMessage(messages.customUrlValidationError, { name: recipe.name })}
                           </p>
                         )}
-                      </div>
+                      </Fragment>
                     ) : (
                       <div className="center premium-info">
                         <p>{intl.formatMessage(messages.customUrlPremiumInfo)}</p>
@@ -308,12 +308,12 @@ export default @observer class EditServiceForm extends Component {
                   <h3>{intl.formatMessage(messages.headlineBadges)}</h3>
                   <Toggle field={form.$('isBadgeEnabled')} />
                   {recipe.hasIndirectMessages && form.$('isBadgeEnabled').value && (
-                    <div>
+                    <Fragment>
                       <Toggle field={form.$('isIndirectMessageBadgeEnabled')} />
                       <p className="settings__help">
                         {intl.formatMessage(messages.indirectMessageInfo)}
                       </p>
-                    </div>
+                    </Fragment>
                   )}
                 </div>
 
@@ -349,7 +349,7 @@ export default @observer class EditServiceForm extends Component {
                   </h3>
                   <Toggle field={form.$('proxy.isEnabled')} />
                   {form.$('proxy.isEnabled').value && (
-                    <div>
+                    <Fragment>
                       <Input field={form.$('proxy.host')} />
                       <Input field={form.$('proxy.user')} />
                       <Input
@@ -360,7 +360,7 @@ export default @observer class EditServiceForm extends Component {
                         <span className="mdi mdi-information" />
                         {intl.formatMessage(messages.proxyInfo)}
                       </p>
-                    </div>
+                    </Fragment>
                   )}
                 </div>
               </PremiumFeatureContainer>
diff --git a/src/components/settings/services/ServicesDashboard.js b/src/components/settings/services/ServicesDashboard.js
index e7dfaf106..a12df7372 100644
--- a/src/components/settings/services/ServicesDashboard.js
+++ b/src/components/settings/services/ServicesDashboard.js
@@ -101,17 +101,15 @@ export default @observer class ServicesDashboard extends Component {
             />
           )}
           {!isLoading && servicesRequestFailed && (
-            <div>
-              <Infobox
-                icon="alert"
-                type="danger"
-                ctaLabel={intl.formatMessage(messages.tryReloadServices)}
-                ctaLoading={isLoading}
-                ctaOnClick={retryServicesRequest}
-              >
-                {intl.formatMessage(messages.servicesRequestFailed)}
-              </Infobox>
-            </div>
+            <Infobox
+              icon="alert"
+              type="danger"
+              ctaLabel={intl.formatMessage(messages.tryReloadServices)}
+              ctaLoading={isLoading}
+              ctaOnClick={retryServicesRequest}
+            >
+              {intl.formatMessage(messages.servicesRequestFailed)}
+            </Infobox>
           )}
 
           {status.length > 0 && status.includes('updated') && (
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index 1ec2ab614..df3197520 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -1,5 +1,5 @@
 import { remote } from 'electron';
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
@@ -171,14 +171,14 @@ export default @observer class EditSettingsForm extends Component {
             <PremiumFeatureContainer
               condition={isSpellcheckerPremiumFeature}
             >
-              <div>
+              <Fragment>
                 <Toggle
                   field={form.$('enableSpellchecking')}
                 />
                 {form.$('enableSpellchecking').value && (
                   <Select field={form.$('spellcheckerLanguage')} />
                 )}
-              </div>
+              </Fragment>
             </PremiumFeatureContainer>
             <a
               href={FRANZ_TRANSLATION}
diff --git a/src/components/subscription/SubscriptionForm.js b/src/components/subscription/SubscriptionForm.js
index 12e8471ff..6b60c2af0 100644
--- a/src/components/subscription/SubscriptionForm.js
+++ b/src/components/subscription/SubscriptionForm.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
@@ -158,35 +158,33 @@ export default @observer class SubscriptionForm extends Component {
         <Radio field={this.form.$('paymentTier')} showLabel={false} className="paymentTiers" />
         {!hideInfo && (
           <div className="subscription__premium-info">
-            <div>
-              <p>
-                <strong>{intl.formatMessage(messages.includedFeatures)}</strong>
-              </p>
-              <div className="subscription">
-                <ul className="subscription__premium-features">
-                  <li>{intl.formatMessage(messages.features.onpremise)}</li>
-                  <li>
-                    {intl.formatMessage(messages.features.noInterruptions)}
-                  </li>
-                  <li>
-                    {intl.formatMessage(messages.features.spellchecker)}
-                  </li>
-                  <li>
-                    {intl.formatMessage(messages.features.proxy)}
-                  </li>
-                  <li>
-                    {intl.formatMessage(messages.features.ads)}
-                  </li>
-                </ul>
-              </div>
+            <p>
+              <strong>{intl.formatMessage(messages.includedFeatures)}</strong>
+            </p>
+            <div className="subscription">
+              <ul className="subscription__premium-features">
+                <li>{intl.formatMessage(messages.features.onpremise)}</li>
+                <li>
+                  {intl.formatMessage(messages.features.noInterruptions)}
+                </li>
+                <li>
+                  {intl.formatMessage(messages.features.spellchecker)}
+                </li>
+                <li>
+                  {intl.formatMessage(messages.features.proxy)}
+                </li>
+                <li>
+                  {intl.formatMessage(messages.features.ads)}
+                </li>
+              </ul>
             </div>
           </div>
         )}
-        <div>
+        <Fragment>
           {error.code === 'no-payment-session' && (
             <p className="error-message center">{intl.formatMessage(messages.paymentSessionError)}</p>
           )}
-        </div>
+        </Fragment>
         {showSkipOption && this.form.$('paymentTier').value === 'skip' ? (
           <Button
             label={skipButtonLabel}
diff --git a/src/components/ui/FullscreenLoader/index.js b/src/components/ui/FullscreenLoader/index.js
index 145c15c2d..36cd32d2a 100644
--- a/src/components/ui/FullscreenLoader/index.js
+++ b/src/components/ui/FullscreenLoader/index.js
@@ -8,21 +8,21 @@ import Loader from '../Loader';
 import styles from './styles';
 
 export default inject('stores')(injectSheet(styles)(({ stores, classes, className, title, children }) => (
-    <div className={classes.wrapper}>
-      <div
-        className={classnames({
-          [`${classes.component}`]: true,
-          [`${className}`]: className,
-        })}
-      >
-        <h1 className={classes.title}>{title}</h1>
-        <Loader color={stores.settings.app.darkMode ? '#FFF' : '#000'} />
-        {children && (
-          <div className={classes.content}>
-            {children}
-          </div>
-        )}
-      </div>
+  <div className={classes.wrapper}>
+    <div
+      className={classnames({
+        [`${classes.component}`]: true,
+        [`${className}`]: className,
+      })}
+    >
+      <h1 className={classes.title}>{title}</h1>
+      <Loader color={stores.settings.app.darkMode ? '#FFF' : '#000'} />
+      {children && (
+        <div className={classes.content}>
+          {children}
+        </div>
+      )}
     </div>
-  )
-  ));
+  </div>
+),
+));
diff --git a/src/components/ui/ImageUpload.js b/src/components/ui/ImageUpload.js
index 76f77d631..cbe70ac88 100644
--- a/src/components/ui/ImageUpload.js
+++ b/src/components/ui/ImageUpload.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import { Field } from 'mobx-react-form';
@@ -57,7 +57,7 @@ export default @observer class ImageUpload extends Component {
         <label className="franz-form__label" htmlFor="iconUpload">{field.label}</label>
         <div className="image-upload">
           {(field.value && field.value !== 'delete') || this.state.path ? (
-            <div>
+            <Fragment>
               <div
                 className="image-upload__preview"
                 style={({
@@ -84,7 +84,7 @@ export default @observer class ImageUpload extends Component {
                 </button>
                 <div className="image-upload__action-background" />
               </div>
-            </div>
+            </Fragment>
           ) : (
             <Dropzone
               ref={(node) => { this.dropzoneRef = node; }}
diff --git a/src/components/ui/Tabs/TabItem.js b/src/components/ui/Tabs/TabItem.js
index 9ff9f009e..16881a7f7 100644
--- a/src/components/ui/Tabs/TabItem.js
+++ b/src/components/ui/Tabs/TabItem.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 
 import { oneOrManyChildElements } from '../../../prop-types';
 
@@ -11,7 +11,7 @@ export default class TabItem extends Component {
     const { children } = this.props;
 
     return (
-      <div>{children}</div>
+      <Fragment>{children}</Fragment>
     );
   }
 }
diff --git a/src/features/serviceProxy/index.js b/src/features/serviceProxy/index.js
index ee0b4e79c..acd8f162f 100644
--- a/src/features/serviceProxy/index.js
+++ b/src/features/serviceProxy/index.js
@@ -23,12 +23,15 @@ export default function init(stores) {
 
     const services = stores.services.enabled;
     const isPremiumUser = stores.user.data.isPremium;
+    const proxySettings = stores.settings.proxy;
+
+    debug('Service Proxy autorun');
 
     services.forEach((service) => {
       const s = session.fromPartition(`persist:service-${service.id}`);
 
       if (config.isEnabled && (isPremiumUser || !config.isPremium)) {
-        const serviceProxyConfig = stores.settings.proxy[service.id];
+        const serviceProxyConfig = proxySettings[service.id];
 
         if (serviceProxyConfig && serviceProxyConfig.isEnabled && serviceProxyConfig.host) {
           const proxyHost = serviceProxyConfig.host;
diff --git a/src/stores/SettingsStore.js b/src/stores/SettingsStore.js
index 4c01e9910..e2211aec6 100644
--- a/src/stores/SettingsStore.js
+++ b/src/stores/SettingsStore.js
@@ -57,6 +57,21 @@ export default class SettingsStore extends Store {
   }
 
   @computed get proxy() {
+    // // We need to provide the final data structure as mobx autoruns won't work
+    // const proxySettings = observable({});
+    // this.stores.services.all.forEach((service) => {
+    //   proxySettings[service.id] = {
+    //     isEnabled: false,
+    //     host: null,
+    //     user: null,
+    //     password: null,
+    //   };
+    // });
+
+    // debug('this._fileSystemSettingsCache.proxy', this._fileSystemSettingsCache.proxy, proxySettings);
+
+    // return Object.assign(proxySettings, this._fileSystemSettingsCache.proxy);
+
     return this._fileSystemSettingsCache.proxy || {};
   }
 
diff --git a/src/styles/auth.scss b/src/styles/auth.scss
index 54e264dc6..817801982 100644
--- a/src/styles/auth.scss
+++ b/src/styles/auth.scss
@@ -33,17 +33,9 @@
 
   .auth__layout {
     width: 100%;
-
-    & > div {
-      align-items: center;
-      display: flex;
-      justify-content: center;
-
-      & > span {
-        position: absolute;
-        width: 100%;
-      }
-    }
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
 
   .auth__container {
diff --git a/src/styles/welcome.scss b/src/styles/welcome.scss
index b3d6515b1..b517431f0 100644
--- a/src/styles/welcome.scss
+++ b/src/styles/welcome.scss
@@ -1,9 +1,12 @@
 .auth .welcome {
+  height: auto;
+  
   &__content {
     align-items: center;
     color: #FFF;
     display: flex;
     justify-content: center;
+    height: auto;
   }
 
   &__logo { width: 100px; }
@@ -37,6 +40,7 @@
     display: block;
     margin-top: 100px;
     text-align: center;
+    height: auto;
 
     .button:first-of-type { margin-right: 25px; }
   }
@@ -71,6 +75,7 @@
     padding: 20px 20px 5px;
     text-align: center;
     width: 480px;
+    height: auto;
   }
 
   &__featured-service {