refactor: bring down eslint warnings to zero (#1714)

- install `@eslint-react/eslint-plugin` dependency
- configure `@eslint-react/eslint-plugin` in eslint config
- modernize `lint` command in `package.json`
- disable or fix various reported lint issues
- fix `div` being nested in `p` for settings
- replace deprecated `event.keyCode` with `event.key`
- update isEscKeyPress method and unit tests which used deprecated `event.keyCode`
- allow `eslint` v8 as peer dependency for `@eslint-react/eslint-plugin`

16 files changed, 60 insertions, 47 deletions

diff --git a/src/components/auth/AuthLayout.tsx b/src/components/auth/AuthLayout.tsx
index 67e898318..3952045b2 100644
--- a/src/components/auth/AuthLayout.tsx
+++ b/src/components/auth/AuthLayout.tsx
@@ -106,6 +106,7 @@ class AuthLayout extends Component<IProps, IState> {
           )}
           <div className="auth__layout">
             {/* Inject globalError into children  */}
+            {/* eslint-disable-next-line @eslint-react/no-clone-element */}
             {cloneElement(children, { error })}
           </div>
           {/* </div> */}
diff --git a/src/components/downloadManager/DownloadManagerDashboard.tsx b/src/components/downloadManager/DownloadManagerDashboard.tsx
index 490be269d..aeaa94634 100644
--- a/src/components/downloadManager/DownloadManagerDashboard.tsx
+++ b/src/components/downloadManager/DownloadManagerDashboard.tsx
@@ -47,7 +47,6 @@ interface IState {
   data: string;
 }
 
-// eslint-disable-next-line react/prefer-stateless-function
 class DownloadManagerDashboard extends Component<IProps, IState> {
   render() {
     const { intl, stores, actions } = this.props;
diff --git a/src/components/downloadManager/DownloadManagerLayout.tsx b/src/components/downloadManager/DownloadManagerLayout.tsx
index 08c0ace1e..43670355c 100644
--- a/src/components/downloadManager/DownloadManagerLayout.tsx
+++ b/src/components/downloadManager/DownloadManagerLayout.tsx
@@ -44,8 +44,8 @@ class DownloadManagerLayout extends Component<IProps> {
     );
   }
 
-  handleKeyDown(e) {
-    if (isEscKeyPress(e.keyCode)) {
+  handleKeyDown(e: KeyboardEvent) {
+    if (isEscKeyPress(e.key)) {
       this.props.actions!.ui.closeSettings();
     }
   }
diff --git a/src/components/settings/SettingsLayout.tsx b/src/components/settings/SettingsLayout.tsx
index 17f8c3e33..a5fa13d71 100644
--- a/src/components/settings/SettingsLayout.tsx
+++ b/src/components/settings/SettingsLayout.tsx
@@ -41,7 +41,7 @@ class SettingsLayout extends Component<PropsWithChildren<IProps>> {
   }
 
   handleKeyDown(e: KeyboardEvent): void {
-    if (isEscKeyPress(e.keyCode)) {
+    if (isEscKeyPress(e.key)) {
       this.props.closeSettings();
     }
   }
diff --git a/src/components/settings/releaseNotes/ReleaseNotesDashboard.tsx b/src/components/settings/releaseNotes/ReleaseNotesDashboard.tsx
index e874b4469..e2867ab8e 100644
--- a/src/components/settings/releaseNotes/ReleaseNotesDashboard.tsx
+++ b/src/components/settings/releaseNotes/ReleaseNotesDashboard.tsx
@@ -49,6 +49,7 @@ class ReleaseNotesDashboard extends Component<IProps, IState> {
       intl,
     );
 
+    // eslint-disable-next-line @eslint-react/no-set-state-in-component-did-mount
     this.setState({
       data,
     });
diff --git a/src/components/settings/releaseNotes/ReleaseNotesLayout.tsx b/src/components/settings/releaseNotes/ReleaseNotesLayout.tsx
index 23db7141e..4fb31d053 100644
--- a/src/components/settings/releaseNotes/ReleaseNotesLayout.tsx
+++ b/src/components/settings/releaseNotes/ReleaseNotesLayout.tsx
@@ -43,8 +43,8 @@ class ReleaseNotesLayout extends Component<IProps> {
     );
   }
 
-  handleKeyDown(e) {
-    if (isEscKeyPress(e.keyCode)) {
+  handleKeyDown(e: KeyboardEvent) {
+    if (isEscKeyPress(e.key)) {
       this.props.actions!.ui.closeSettings();
     }
   }
diff --git a/src/components/settings/settings/EditSettingsForm.tsx b/src/components/settings/settings/EditSettingsForm.tsx
index 84057091d..c3e8d46a0 100644
--- a/src/components/settings/settings/EditSettingsForm.tsx
+++ b/src/components/settings/settings/EditSettingsForm.tsx
@@ -1087,34 +1087,34 @@ class EditSettingsForm extends Component<IProps, IState> {
                   <H3>
                     {intl.formatMessage(messages.subheadlineFerdiumProfile)}
                   </H3>
-                  <p>
-                    <div className="settings__open-settings-file-container">
-                      <Button
-                        buttonType="secondary"
-                        label={intl.formatMessage(
-                          messages.buttonOpenFerdiumProfileFolder,
-                        )}
-                        className="settings__open-settings-file-button"
-                        onClick={() => openPath(profileFolder)}
-                      />
-                      <Button
-                        buttonType="secondary"
-                        label={intl.formatMessage(
-                          messages.buttonOpenFerdiumServiceRecipesFolder,
-                        )}
-                        className="settings__open-settings-file-button"
-                        onClick={() => openPath(recipeFolder)}
-                      />
-                      <Button
-                        buttonType="secondary"
-                        label={intl.formatMessage(
-                          messages.buttonOpenImportExport,
-                        )}
-                        className="settings__open-settings-file-button"
-                        onClick={() => openExternalUrl(serverURL, true)}
-                      />
-                    </div>
-                  </p>
+
+                  <div className="settings__open-settings-file-container">
+                    <Button
+                      buttonType="secondary"
+                      label={intl.formatMessage(
+                        messages.buttonOpenFerdiumProfileFolder,
+                      )}
+                      className="settings__open-settings-file-button"
+                      onClick={() => openPath(profileFolder)}
+                    />
+                    <Button
+                      buttonType="secondary"
+                      label={intl.formatMessage(
+                        messages.buttonOpenFerdiumServiceRecipesFolder,
+                      )}
+                      className="settings__open-settings-file-button"
+                      onClick={() => openPath(recipeFolder)}
+                    />
+                    <Button
+                      buttonType="secondary"
+                      label={intl.formatMessage(
+                        messages.buttonOpenImportExport,
+                      )}
+                      className="settings__open-settings-file-button"
+                      onClick={() => openExternalUrl(serverURL, true)}
+                    />
+                  </div>
+
                   <p className="settings__help">
                     {intl.formatMessage(messages.serverHelp, {
                       serverURL,
diff --git a/src/components/settings/supportFerdium/SupportFerdiumDashboard.tsx b/src/components/settings/supportFerdium/SupportFerdiumDashboard.tsx
index 065690fb5..3a4592666 100644
--- a/src/components/settings/supportFerdium/SupportFerdiumDashboard.tsx
+++ b/src/components/settings/supportFerdium/SupportFerdiumDashboard.tsx
@@ -33,7 +33,7 @@ const SupportFerdiumDashboard = () => {
             <a
               href="https://twitter.com/ferdiumteam/"
               target="_blank"
-              rel="noreferrer"
+              rel="noreferrer noopener"
             >
               <img
                 alt="Twitter Follow"
@@ -43,14 +43,18 @@ const SupportFerdiumDashboard = () => {
             <a
               href="https://github.com/ferdium/ferdium-app"
               target="_blank"
-              rel="noreferrer"
+              rel="noreferrer noopener"
             >
               <img
                 alt="GitHub Stars"
                 src="https://img.shields.io/github/stars/ferdium/ferdium-app?style=social"
               />
             </a>
-            <a target="_blank" href={FERDIUM_TRANSLATION} rel="noreferrer">
+            <a
+              target="_blank"
+              href={FERDIUM_TRANSLATION}
+              rel="noreferrer noopener"
+            >
               <img
                 src="https://badges.crowdin.net/ferdium-app/localized.svg"
                 alt="Crowdin"
@@ -59,7 +63,7 @@ const SupportFerdiumDashboard = () => {
             <a
               href="https://opencollective.com/ferdium#section-contributors"
               target="_blank"
-              rel="noreferrer"
+              rel="noreferrer noopener"
             >
               <img
                 alt="Open Collective backers"
@@ -72,7 +76,7 @@ const SupportFerdiumDashboard = () => {
             <a
               href="https://github.com/ferdium/ferdium-app#contributors-"
               target="_blank"
-              rel="noreferrer"
+              rel="noreferrer noopener"
             >
               <img
                 alt="GitHub contributors (non-exhaustive)"
diff --git a/src/components/ui/FAB.tsx b/src/components/ui/FAB.tsx
index b4eeace8b..1e9ff9022 100644
--- a/src/components/ui/FAB.tsx
+++ b/src/components/ui/FAB.tsx
@@ -36,6 +36,7 @@ class Button extends Component<IProps> {
     };
 
     return (
+      // eslint-disable-next-line @eslint-react/dom/no-missing-button-type
       <button {...buttonProps} type="button">
         {children}
       </button>
diff --git a/src/components/ui/SearchInput.tsx b/src/components/ui/SearchInput.tsx
index 2e70d1b35..d31463010 100644
--- a/src/components/ui/SearchInput.tsx
+++ b/src/components/ui/SearchInput.tsx
@@ -98,6 +98,7 @@ class SearchInput extends Component<IProps, IState> {
           />
         </label>
         {value.length > 0 && (
+          // eslint-disable-next-line jsx-a11y/no-static-element-interactions
           <span onClick={() => this.reset()} onKeyDown={noop}>
             <Icon icon={mdiCloseCircleOutline} />
           </span>
diff --git a/src/components/ui/Tabs/Tabs.tsx b/src/components/ui/Tabs/Tabs.tsx
index a5ec148aa..d1e397122 100644
--- a/src/components/ui/Tabs/Tabs.tsx
+++ b/src/components/ui/Tabs/Tabs.tsx
@@ -35,6 +35,7 @@ class Tab extends Component<IProps, IState> {
 
   render(): ReactElement {
     const { children: childElements } = this.props;
+    // eslint-disable-next-line @eslint-react/no-children-to-array
     const children = Children.toArray(childElements); // removes all null values
 
     if (children.length === 1) {
@@ -44,9 +45,10 @@ class Tab extends Component<IProps, IState> {
     return (
       <div className="content-tabs">
         <div className="content-tabs__tabs">
+          {/* eslint-disable-next-line @eslint-react/no-children-map */}
           {Children.map(children, (child, i) => (
             <button
-              // eslint-disable-next-line react/no-array-index-key
+              // eslint-disable-next-line react/no-array-index-key, @eslint-react/no-array-index-key
               key={i}
               className={classnames({
                 'content-tabs__item': true,
@@ -60,9 +62,10 @@ class Tab extends Component<IProps, IState> {
           ))}
         </div>
         <div className="content-tabs__content">
+          {/* eslint-disable-next-line @eslint-react/no-children-map */}
           {Children.map(children, (child, i) => (
             <div
-              // eslint-disable-next-line react/no-array-index-key
+              // eslint-disable-next-line react/no-array-index-key, @eslint-react/no-array-index-key
               key={i}
               className={classnames({
                 'content-tabs__item': true,
diff --git a/src/components/ui/button/index.tsx b/src/components/ui/button/index.tsx
index 5c606f274..ba4353dae 100644
--- a/src/components/ui/button/index.tsx
+++ b/src/components/ui/button/index.tsx
@@ -223,7 +223,7 @@ class ButtonComponent extends Component<IProps, IState> {
     ) : (
       <button
         id={id}
-        // eslint-disable-next-line react/button-has-type
+        // eslint-disable-next-line react/button-has-type, @eslint-react/dom/no-missing-button-type
         type={type}
         onClick={onClick}
         className={classnames({
diff --git a/src/components/ui/imageUpload/index.tsx b/src/components/ui/imageUpload/index.tsx
index 876572484..092271ab0 100644
--- a/src/components/ui/imageUpload/index.tsx
+++ b/src/components/ui/imageUpload/index.tsx
@@ -129,7 +129,9 @@ class ImageUpload extends Component<IProps, IState> {
             </>
           ) : (
             <Dropzone
+              // eslint-disable-next-line react/jsx-no-bind
               onDropAccepted={this.onDropAccepted.bind(this)}
+              // eslint-disable-next-line react/jsx-no-bind
               onDropRejected={this.onDropRejected.bind(this)}
               multiple={multiple}
               accept={{
diff --git a/src/components/ui/input/index.tsx b/src/components/ui/input/index.tsx
index c61efe570..225517ba8 100644
--- a/src/components/ui/input/index.tsx
+++ b/src/components/ui/input/index.tsx
@@ -172,7 +172,7 @@ class Input extends Component<IProps, IState> {
             onFocus={onFocus}
             onBlur={onBlur}
             disabled={disabled}
-            onKeyPress={this.onInputKeyPress.bind(this)}
+            onKeyUp={this.onInputKeyPress.bind(this)}
             min={min}
             max={max}
             step={step}
diff --git a/src/components/ui/select/index.tsx b/src/components/ui/select/index.tsx
index 2716ebc2d..397fd97ed 100644
--- a/src/components/ui/select/index.tsx
+++ b/src/components/ui/select/index.tsx
@@ -197,6 +197,7 @@ class SelectComponent extends Component<IProps, IState> {
     this.arrowKeysHandler = this.arrowKeysHandler.bind(this);
   }
 
+  // eslint-disable-next-line @eslint-react/no-unsafe-component-will-mount
   UNSAFE_componentWillMount(): void {
     const { value } = this.props;
 
@@ -417,6 +418,7 @@ class SelectComponent extends Component<IProps, IState> {
               ref={this.scrollContainerRef}
             >
               {Object.keys(options!).map((key, i) => (
+                // eslint-disable-next-line jsx-a11y/no-static-element-interactions
                 <div
                   key={key}
                   onClick={() => this.select(key)}
diff --git a/src/components/ui/textarea/index.tsx b/src/components/ui/textarea/index.tsx
index 4a0e77afe..e332f7a47 100644
--- a/src/components/ui/textarea/index.tsx
+++ b/src/components/ui/textarea/index.tsx
@@ -40,10 +40,9 @@ class TextareaComponent extends Component<IProps> {
     const { data } = this.props;
 
     if (this.textareaRef?.current && data) {
-      Object.keys(data).map(
-        // biome-ignore lint/suspicious/noAssignInExpressions: <explanation>
-        key => (this.textareaRef.current!.dataset[key] = data[key]),
-      );
+      Object.keys(data).forEach(key => {
+        this.textareaRef.current!.dataset[key] = data[key];
+      });
     }
   }