frontend: convert wait-dialog into functional component

Author: shonsirsha

frontends/web/src/components/wait-dialog/wait-dialog.tsx

@@ -1,6 +1,6 @@
 /**
  * Copyright 2018 Shift Devices AG
- * Copyright 2021-2024 Shift Crypto AG
+ * Copyright 2021-2025 Shift Crypto AG
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -15,45 +15,27 @@
  * limitations under the License.
  */
 
-import React, { Component, createRef, ReactNode } from 'react';
-import { translate, TranslateProps } from '@/decorators/translate';
+import React, { useEffect, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
 import { UseDisableBackButton } from '@/hooks/backbutton';
 import style from '@/components/dialog/dialog.module.css';
 
-
-interface WaitDialogProps {
+type Props = {
     includeDefault?: boolean;
     title?: string;
-    children?: ReactNode;
+    children?: React.ReactNode;
 }
 
-type Props = WaitDialogProps & TranslateProps;
-
-interface State {
-    active: boolean;
-}
-
-class WaitDialog extends Component<Props, State> {
-  private overlay = createRef<HTMLDivElement>();
-  private modal = createRef<HTMLDivElement>();
-
-  public readonly state: State = {
-    active: false,
-  };
-
-  public UNSAFE_componentWillMount() {
-    document.body.addEventListener('keydown', this.handleKeyDown);
-  }
-
-  public componentDidMount() {
-    setTimeout(this.activate, 10);
-  }
-
-  public componentWillUnmount() {
-    document.body.removeEventListener('keydown', this.handleKeyDown);
-  }
+export const WaitDialog = ({
+  includeDefault,
+  title,
+  children,
+}: Props) => {
+  const { t } = useTranslation();
+  const overlay = useRef<HTMLDivElement>(null);
+  const modal = useRef<HTMLDivElement>(null);
 
-  private handleKeyDown = (e: KeyboardEvent) => {
+  const handleKeyDown = (e: KeyboardEvent) => {
     const activeElement = document.activeElement;
     if (activeElement && activeElement instanceof HTMLElement) {
       activeElement.blur();
@@ -62,59 +44,56 @@ class WaitDialog extends Component<Props, State> {
     e.stopPropagation();
   };
 
-  private activate = () => {
-    this.setState({ active: true }, () => {
-      if (!this.overlay.current || !this.modal.current) {
-        return;
-      }
-      this.overlay.current.classList.add(style.activeOverlay);
-      this.modal.current.classList.add(style.activeModal);
-    });
+  const activate = () => {
+    if (!overlay.current || !modal.current) {
+      return;
+    }
+    overlay.current.classList.add(style.activeOverlay);
+    modal.current.classList.add(style.activeModal);
   };
 
-  public render() {
-    const {
-      t,
-      includeDefault,
-      title,
-      children,
-    } = this.props;
-    const defaultContent = (
-      <div>
-        <p className={style.confirmationLabel}>{t('confirm.info')}</p>
-      </div>
-    );
+  useEffect(() => {
+    document.body.addEventListener('keydown', handleKeyDown);
+    activate();
 
-    const hasChildren = React.Children.toArray(children).length > 0;
-    return (
-      <div
-        className={style.overlay}
-        ref={this.overlay}
-        style={{ zIndex: 10001 }}>
-        <UseDisableBackButton />
-        <div className={[style.modal, style.open].join(' ')} ref={this.modal}>
-          {
-            title && (
-              <div className={style.header}>
-                <h3 className={style.title}>{title}</h3>
-              </div>
-            )
-          }
-          <div className={style.contentContainer}>
-            <div className={style.content}>
-              { (hasChildren && includeDefault) ? defaultContent : null }
-              { hasChildren ? (
-                <div className="flex flex-column flex-start">
-                  {children}
-                </div>
-              ) : defaultContent }
+    return () => {
+      document.body.removeEventListener('keydown', handleKeyDown);
+    };
+  }, []);
+
+  const defaultContent = (
+    <div>
+      <p className={style.confirmationLabel}>{t('confirm.info')}</p>
+    </div>
+  );
+
+  const hasChildren = React.Children.toArray(children).length > 0;
+
+  return (
+    <div
+      className={style.overlay}
+      ref={overlay}
+      style={{ zIndex: 10001 }}>
+      <UseDisableBackButton />
+      <div className={[style.modal, style.open].join(' ')} ref={modal}>
+        {
+          title && (
+            <div className={style.header}>
+              <h3 className={style.title}>{title}</h3>
             </div>
+          )
+        }
+        <div className={style.contentContainer}>
+          <div className={style.content}>
+            { (hasChildren && includeDefault) ? defaultContent : null }
+            { hasChildren ? (
+              <div className="flex flex-column flex-start">
+                {children}
+              </div>
+            ) : defaultContent }
           </div>
         </div>
       </div>
-    );
-  }
-}
-
-const TranslatedWaitDialog = translate()(WaitDialog);
-export { TranslatedWaitDialog as WaitDialog };
+    </div>
+  );
+};