chore: update eslint deps to latest (#2213)

- update eslint deps to latest
- disable new react/function-component-definition rule
- fix/disable newly reported issues

11 files changed, 38 insertions, 77 deletions

diff --git a/src/components/auth/Invite.js b/src/components/auth/Invite.js
index f23417870..dd71c2450 100644
--- a/src/components/auth/Invite.js
+++ b/src/components/auth/Invite.js
@@ -125,8 +125,8 @@ class Invite extends Component {
       .some(emailValue => emailValue.trim() !== '');
 
     const sendButtonClassName = classnames({
-      'auth__button': true,
-      'invite__embed--button': embed
+      auth__button: true,
+      'invite__embed--button': embed,
     });
 
     const renderForm = (
diff --git a/src/components/auth/Login.js b/src/components/auth/Login.js
index 956205258..0c327d67e 100644
--- a/src/components/auth/Login.js
+++ b/src/components/auth/Login.js
@@ -105,8 +105,6 @@ class Login extends Component {
     this.props.intl,
   );
 
-  emailField = null;
-
   submit(e) {
     e.preventDefault();
     this.form.submit({
@@ -155,13 +153,7 @@ class Login extends Component {
               {intl.formatMessage(messages.serverLogout)}
             </p>
           )}
-          <Input
-            field={form.$('email')}
-            ref={element => {
-              this.emailField = element;
-            }}
-            focus
-          />
+          <Input field={form.$('email')} focus />
           <Input field={form.$('password')} showPasswordToggle />
           {error.code === 'invalid-credentials' && (
             <>
diff --git a/src/components/services/content/ConnectionLostBanner.js b/src/components/services/content/ConnectionLostBanner.js
index 5111a081a..b9e7eca53 100644
--- a/src/components/services/content/ConnectionLostBanner.js
+++ b/src/components/services/content/ConnectionLostBanner.js
@@ -1,4 +1,4 @@
-import { createRef, Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import injectSheet from 'react-jss';
@@ -77,8 +77,6 @@ class ConnectionLostBanner extends Component {
     reload: PropTypes.func.isRequired,
   };
 
-  inputRef = createRef();
-
   render() {
     const { classes, name, reload } = this.props;
 
diff --git a/src/components/services/content/ServiceDisabled.js b/src/components/services/content/ServiceDisabled.js
index 476b23235..f60d4bca6 100644
--- a/src/components/services/content/ServiceDisabled.js
+++ b/src/components/services/content/ServiceDisabled.js
@@ -23,10 +23,6 @@ class ServiceDisabled extends Component {
     enable: PropTypes.func.isRequired,
   };
 
-  countdownInterval = null;
-
-  countdownIntervalTimeout = 1000;
-
   render() {
     const { name, enable } = this.props;
     const { intl } = this.props;
diff --git a/src/components/services/content/ServiceView.js b/src/components/services/content/ServiceView.js
index 1bc1fbf5f..1ffdd2153 100644
--- a/src/components/services/content/ServiceView.js
+++ b/src/components/services/content/ServiceView.js
@@ -1,3 +1,4 @@
+/* eslint-disable react/jsx-no-useless-fragment */
 import { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { autorun } from 'mobx';
@@ -65,17 +66,6 @@ class ServiceView extends Component {
     clearTimeout(this.hibernationTimer);
   }
 
-  updateTargetUrl = event => {
-    let visible = true;
-    if (event.url === '' || event.url === '#') {
-      visible = false;
-    }
-    this.setState({
-      targetUrl: event.url,
-      statusBarVisible: visible,
-    });
-  };
-
   render() {
     const {
       detachService,
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index 7e86ea79a..9e8fb3cf5 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -412,10 +412,8 @@ class EditSettingsForm extends Component {
 
                 <Hr />
 
-                <>
-                  <Toggle field={form.$('keepAllWorkspacesLoaded')} />
-                  <Hr />
-                </>
+                <Toggle field={form.$('keepAllWorkspacesLoaded')} />
+                <Hr />
 
                 {!hasAddedTodosAsService && (
                   <>
diff --git a/src/components/settings/team/TeamDashboard.js b/src/components/settings/team/TeamDashboard.js
index 4a1a02571..38d124266 100644
--- a/src/components/settings/team/TeamDashboard.js
+++ b/src/components/settings/team/TeamDashboard.js
@@ -136,40 +136,34 @@ class TeamDashboard extends Component {
               </Infobox>
             )}
 
-            {!userInfoRequestFailed && (
+            {!userInfoRequestFailed && !isLoading && (
               <>
-                {!isLoading && (
-                  <>
-                    <>
-                      <h1
-                        className={classnames({
-                          [classes.headline]: true,
-                          [classes.headlineWithSpacing]: true,
-                        })}
-                      >
-                        {intl.formatMessage(messages.contentHeadline)}
-                      </h1>
-                      <div className={classes.container}>
-                        <div className={classes.content}>
-                          <p>{intl.formatMessage(messages.intro)}</p>
-                          <p>{intl.formatMessage(messages.copy)}</p>
-                        </div>
-                        <img
-                          className={classes.image}
-                          src="https://cdn.franzinfra.com/announcements/assets/teams.png"
-                          alt="Ferdi for Teams"
-                        />
-                      </div>
-                      <div className={classes.buttonContainer}>
-                        <Button
-                          label={intl.formatMessage(messages.manageButton)}
-                          onClick={openTeamManagement}
-                          className={classes.cta}
-                        />
-                      </div>
-                    </>
-                  </>
-                )}
+                <h1
+                  className={classnames({
+                    [classes.headline]: true,
+                    [classes.headlineWithSpacing]: true,
+                  })}
+                >
+                  {intl.formatMessage(messages.contentHeadline)}
+                </h1>
+                <div className={classes.container}>
+                  <div className={classes.content}>
+                    <p>{intl.formatMessage(messages.intro)}</p>
+                    <p>{intl.formatMessage(messages.copy)}</p>
+                  </div>
+                  <img
+                    className={classes.image}
+                    src="https://cdn.franzinfra.com/announcements/assets/teams.png"
+                    alt="Ferdi for Teams"
+                  />
+                </div>
+                <div className={classes.buttonContainer}>
+                  <Button
+                    label={intl.formatMessage(messages.manageButton)}
+                    onClick={openTeamManagement}
+                    className={classes.cta}
+                  />
+                </div>
               </>
             )}
           </div>
diff --git a/src/components/ui/Button.js b/src/components/ui/Button.js
index 67c801d98..d90a8d62d 100644
--- a/src/components/ui/Button.js
+++ b/src/components/ui/Button.js
@@ -35,8 +35,6 @@ class Button extends Component {
     htmlForm: '',
   };
 
-  element = null;
-
   render() {
     const {
       label,
diff --git a/src/components/ui/FAB.tsx b/src/components/ui/FAB.tsx
index 583c9d556..0d871e948 100644
--- a/src/components/ui/FAB.tsx
+++ b/src/components/ui/FAB.tsx
@@ -23,8 +23,6 @@ class Button extends Component<Props> {
     htmlForm: '',
   };
 
-  element = null;
-
   render() {
     const { className, disabled, onClick, type, children, htmlForm } =
       this.props;
diff --git a/src/components/ui/ImageUpload.tsx b/src/components/ui/ImageUpload.tsx
index 118e6b206..52c097ef0 100644
--- a/src/components/ui/ImageUpload.tsx
+++ b/src/components/ui/ImageUpload.tsx
@@ -2,7 +2,7 @@ import { Component } from 'react';
 import { observer } from 'mobx-react';
 import { Field } from 'mobx-react-form';
 import classnames from 'classnames';
-import Dropzone, { DropzoneRef } from 'react-dropzone';
+import Dropzone from 'react-dropzone';
 import { mdiDelete, mdiFileImage } from '@mdi/js';
 import { isWindows } from '../../environment';
 import { Icon } from './icon';
@@ -25,8 +25,6 @@ class ImageUpload extends Component<Props> {
     path: null,
   };
 
-  dropzoneRef: DropzoneRef | null = null;
-
   onDrop(acceptedFiles) {
     const { field } = this.props;
 
@@ -85,9 +83,6 @@ class ImageUpload extends Component<Props> {
             </>
           ) : (
             <Dropzone
-              ref={node => {
-                this.dropzoneRef = node;
-              }}
               onDrop={this.onDrop.bind(this)}
               multiple={multiple}
               accept="image/jpeg, image/png, image/svg+xml"
diff --git a/src/components/ui/Tabs/TabItem.tsx b/src/components/ui/Tabs/TabItem.tsx
index 9fcc3c41e..81ea0ea2b 100644
--- a/src/components/ui/Tabs/TabItem.tsx
+++ b/src/components/ui/Tabs/TabItem.tsx
@@ -1 +1,3 @@
-export const TabItem = ({ children }) => <>{children}</>;
+export const TabItem = ({ children }) => {
+  children;
+};