Upgrade various dependencies to latest part 2 (#1557)

* Upgrade various dependencies to latest, remove unnecessary electron-hunspell
  - upgrade eslint and friends to latest
  - remove deprecated 'node-sass' in favor of 'sass'
  - disable new rules from 'eslint-config-airbnb' that are conflicting with current code style
  - add workspace config for 'vscode' that silences 'experimentalDecorator' warning and forces 'prettier' to single quote
* Run yarn lint to autofix with new ruleset and worked down lint issues to zero

4 files changed, 108 insertions, 86 deletions

diff --git a/src/components/auth/Import.js b/src/components/auth/Import.js
index 3e34c3162..3073cad73 100644
--- a/src/components/auth/Import.js
+++ b/src/components/auth/Import.js
@@ -28,7 +28,9 @@ const messages = defineMessages({
   },
 });
 
-export default @observer class Import extends Component {
+export default
+@observer
+class Import extends Component {
   static propTypes = {
     services: MobxPropTypes.arrayOrObservableArray.isRequired,
     onSubmit: PropTypes.func.isRequired,
@@ -40,17 +42,21 @@ export default @observer class Import extends Component {
     intl: intlShape,
   };
 
-  componentWillMount() {
+  componentDidMount() {
     const config = {
       fields: {
-        import: [...this.props.services.filter(s => s.recipe).map(s => ({
-          fields: {
-            add: {
-              default: true,
-              options: s,
-            },
-          },
-        }))],
+        import: [
+          ...this.props.services
+            .filter((s) => s.recipe)
+            .map((s) => ({
+              fields: {
+                add: {
+                  default: true,
+                  options: s,
+                },
+              },
+            })),
+        ],
       },
     };
 
@@ -62,9 +68,12 @@ export default @observer class Import extends Component {
     e.preventDefault();
     this.form.submit({
       onSuccess: (form) => {
-        const servicesImport = form.values().import
-          .map((value, i) => !value.add || services.filter(s => s.recipe)[i])
-          .filter(s => typeof s !== 'boolean');
+        const servicesImport = form
+          .values()
+          .import.map(
+            (value, i) => !value.add || services.filter((s) => s.recipe)[i],
+          )
+          .filter((s) => typeof s !== 'boolean');
 
         this.props.onSubmit({ services: servicesImport });
       },
@@ -76,37 +85,31 @@ export default @observer class Import extends Component {
     const { intl } = this.context;
     const { services, isSubmitting, inviteRoute } = this.props;
 
-    const availableServices = services.filter(s => s.recipe);
-    const unavailableServices = services.filter(s => !s.recipe);
+    const availableServices = services.filter((s) => s.recipe);
+    const unavailableServices = services.filter((s) => !s.recipe);
 
     return (
       <div className="auth__scroll-container">
         <div className="auth__container auth__container--signup">
-          <form className="franz-form auth__form" onSubmit={e => this.submit(e)}>
-            <img
-              src="./assets/images/logo.svg"
-              className="auth__logo"
-              alt=""
-            />
-            <h1>
-              {intl.formatMessage(messages.headline)}
-            </h1>
+          <form
+            className="franz-form auth__form"
+            onSubmit={(e) => this.submit(e)}
+          >
+            <img src="./assets/images/logo.svg" className="auth__logo" alt="" />
+            <h1>{intl.formatMessage(messages.headline)}</h1>
             <table className="service-table available-services">
               <tbody>
                 {this.form.$('import').map((service, i) => (
-                  <tr
-                    key={service.id}
-                    className="service-table__row"
-                  >
+                  <tr key={service.id} className="service-table__row">
                     <td className="service-table__toggle">
-                      <Toggle
-                        field={service.$('add')}
-                        showLabel={false}
-                      />
+                      <Toggle field={service.$('add')} showLabel={false} />
                     </td>
                     <td className="service-table__column-icon">
                       <img
-                        src={availableServices[i].custom_icon || availableServices[i].recipe.icons.svg}
+                        src={
+                          availableServices[i].custom_icon
+                          || availableServices[i].recipe.icons.svg
+                        }
                         className={classnames({
                           'service-table__icon': true,
                           'has-custom-icon': availableServices[i].custom_icon,
@@ -125,14 +128,18 @@ export default @observer class Import extends Component {
             </table>
             {unavailableServices.length > 0 && (
               <div className="unavailable-services">
-                <strong>{intl.formatMessage(messages.notSupportedHeadline)}</strong>
+                <strong>
+                  {intl.formatMessage(messages.notSupportedHeadline)}
+                </strong>
                 <p>
-                  {services.filter(s => !s.recipe).map((service, i) => (
-                    <span key={service.id}>
-                      {service.name !== '' ? service.name : service.service}
-                      {unavailableServices.length > i + 1 ? ', ' : ''}
-                    </span>
-                  ))}
+                  {services
+                    .filter((s) => !s.recipe)
+                    .map((service, i) => (
+                      <span key={service.id}>
+                        {service.name !== '' ? service.name : service.service}
+                        {unavailableServices.length > i + 1 ? ', ' : ''}
+                      </span>
+                    ))}
                 </p>
               </div>
             )}
diff --git a/src/components/auth/Invite.js b/src/components/auth/Invite.js
index fd957ee73..4b4d63a6b 100644
--- a/src/components/auth/Invite.js
+++ b/src/components/auth/Invite.js
@@ -43,7 +43,9 @@ const messages = defineMessages({
   },
 });
 
-export default @observer class Invite extends Component {
+export default
+@observer
+class Invite extends Component {
   static propTypes = {
     onSubmit: PropTypes.func.isRequired,
     embed: PropTypes.bool,
@@ -63,36 +65,41 @@ export default @observer class Invite extends Component {
 
   state = { showSuccessInfo: false };
 
-  componentWillMount() {
-    const handlers = {
-      onChange: () => {
-        this.setState({ showSuccessInfo: false });
-      },
-    };
-
-    this.form = new Form({
-      fields: {
-        invite: [...Array(3).fill({
-          fields: {
-            name: {
-              label: this.context.intl.formatMessage(messages.nameLabel),
-              placeholder: this.context.intl.formatMessage(messages.nameLabel),
-              handlers,
-              // related: ['invite.0.email'], // path accepted but does not work
-            },
-            email: {
-              label: this.context.intl.formatMessage(messages.emailLabel),
-              placeholder: this.context.intl.formatMessage(messages.emailLabel),
-              handlers,
-              validators: [email],
-            },
-          },
-        })],
+  componentDidMount() {
+    this.form = new Form(
+      {
+        fields: {
+          invite: [
+            ...Array(3).fill({
+              fields: {
+                name: {
+                  label: this.context.intl.formatMessage(messages.nameLabel),
+                  placeholder: this.context.intl.formatMessage(
+                    messages.nameLabel,
+                  ),
+                  onChange: () => {
+                    this.setState({ showSuccessInfo: false });
+                  },
+                  // related: ['invite.0.email'], // path accepted but does not work
+                },
+                email: {
+                  label: this.context.intl.formatMessage(messages.emailLabel),
+                  placeholder: this.context.intl.formatMessage(
+                    messages.emailLabel,
+                  ),
+                  onChange: () => {
+                    this.setState({ showSuccessInfo: false });
+                  },
+                  validators: [email],
+                },
+              },
+            }),
+          ],
+        },
       },
-    }, this.context.intl);
-  }
+      this.context.intl,
+    );
 
-  componentDidMount() {
     document.querySelector('input:first-child').focus();
   }
 
@@ -117,9 +124,10 @@ export default @observer class Invite extends Component {
     const { intl } = this.context;
     const { embed, isInviteSuccessful, isLoadingInvite } = this.props;
 
-    const atLeastOneEmailAddress = form.$('invite')
-      .map(invite => invite.$('email').value)
-      .some(emailValue => emailValue.trim() !== '');
+    const atLeastOneEmailAddress = form
+      .$('invite')
+      .map((invite) => invite.$('email').value)
+      .some((emailValue) => emailValue.trim() !== '');
 
     const sendButtonClassName = classnames({
       auth__button: true,
@@ -127,7 +135,7 @@ export default @observer class Invite extends Component {
     });
 
     const renderForm = (
-      <Fragment>
+      <>
         {this.state.showSuccessInfo && isInviteSuccessful && (
           <Appear>
             <Infobox
@@ -140,18 +148,17 @@ export default @observer class Invite extends Component {
           </Appear>
         )}
 
-        <form className="franz-form auth__form" onSubmit={e => this.submit(e)}>
+        <form
+          className="franz-form auth__form"
+          onSubmit={(e) => this.submit(e)}
+        >
           {!embed && (
-            <img
-              src="./assets/images/logo.svg"
-              className="auth__logo"
-              alt=""
-            />
+            <img src="./assets/images/logo.svg" className="auth__logo" alt="" />
           )}
           <h1 className={embed && 'invite__embed'}>
             {intl.formatMessage(messages.headline)}
           </h1>
-          {form.$('invite').map(invite => (
+          {form.$('invite').map((invite) => (
             <div className="grid" key={invite.key}>
               <div className="grid__row">
                 <Input field={invite.$('name')} showLabel={false} />
@@ -175,17 +182,27 @@ export default @observer class Invite extends Component {
             </Link>
           )}
         </form>
-      </Fragment>
+      </>
     );
 
     return (
-      <div className={!embed ? 'auth__container auth__container--signup' : 'settings__main'}>
+      <div
+        className={
+          !embed ? 'auth__container auth__container--signup' : 'settings__main'
+        }
+      >
         {embed && (
           <div className="settings__header">
-            <h1>{this.context.intl.formatMessage(messages.settingsHeadline)}</h1>
+            <h1>
+              {this.context.intl.formatMessage(messages.settingsHeadline)}
+            </h1>
           </div>
         )}
-        {!embed ? <div>{renderForm}</div> : <div className="settings__body invite__form">{renderForm}</div>}
+        {!embed ? (
+          <div>{renderForm}</div>
+        ) : (
+          <div className="settings__body invite__form">{renderForm}</div>
+        )}
       </div>
     );
   }
diff --git a/src/components/auth/Pricing.js b/src/components/auth/Pricing.js
index fecc6ba56..2fcabe54d 100644
--- a/src/components/auth/Pricing.js
+++ b/src/components/auth/Pricing.js
@@ -10,7 +10,6 @@ import { Button } from '@meetfranz/forms';
 import { FeatureItem } from '../ui/FeatureItem';
 import { FeatureList } from '../ui/FeatureList';
 
-
 const messages = defineMessages({
   headline: {
     id: 'pricing.trial.headline.pro',
diff --git a/src/components/auth/Welcome.js b/src/components/auth/Welcome.js
index 6e742e0c1..5f2fac64b 100644
--- a/src/components/auth/Welcome.js
+++ b/src/components/auth/Welcome.js
@@ -72,7 +72,6 @@ export default @inject('actions') @observer class Login extends Component {
           <br />
           <br />
 
-
           <Link to={changeServerRoute}>
             <span style={{
               textAlign: 'center',