Extract device code into a separate view.

Convert more components from class components to functional.
Fix invalid finish state when client was auto approved

packages/app/components/ui/Panel.tsx

@@ -1,121 +1,91 @@
-import React from 'react';
+import React, { FC, PropsWithChildren, useState, useCallback } from 'react';
 import clsx from 'clsx';
-import { omit } from 'app/functions';
 
 import styles from './panel.scss';
 import icons from './icons.scss';
 
-export function Panel(props: { title?: string; icon?: string; children: React.ReactNode }) {
-    const { title: titleText, icon: iconType } = props;
-    let icon: React.ReactElement | undefined;
-    let title: React.ReactElement | undefined;
-
-    if (iconType) {
-        icon = (
-            <button className={styles.headerControl}>
-                <span className={icons[iconType]} />
-            </button>
-        );
-    }
-
-    if (titleText) {
-        title = (
-            <PanelHeader>
-                {icon}
-                {titleText}
-            </PanelHeader>
-        );
-    }
+interface PanelProps extends PropsWithChildren<any> {
+    title?: string;
+    icon?: string;
+}
 
+export const Panel: FC<PanelProps> = ({ title, icon, children }) => {
     return (
         <div className={styles.panel}>
-            {title}
+            {title && (
+                <PanelHeader>
+                    {icon && (
+                        <button className={styles.headerControl}>
+                            <span className={icons[icon]} />
+                        </button>
+                    )}
+                    {title}
+                </PanelHeader>
+            )}
 
-            {props.children}
+            {children}
         </div>
     );
-}
+};
 
-export function PanelHeader(props: { children: React.ReactNode }) {
+export const PanelHeader: FC<PropsWithChildren<any>> = ({ children }) => {
     return (
-        <div className={styles.header} {...props} data-testid="auth-header">
-            {props.children}
+        <div className={styles.header} data-testid="auth-header">
+            {children}
         </div>
     );
-}
+};
 
-export function PanelBody(props: { children: React.ReactNode }) {
+export const PanelBody: FC<PropsWithChildren<any>> = ({ children }) => {
     return (
-        <div className={styles.body} {...props} data-testid="auth-body">
-            {props.children}
+        <div className={styles.body} data-testid="auth-body">
+            {children}
         </div>
     );
-}
+};
 
-export function PanelFooter(props: { children: React.ReactNode }) {
+export const PanelFooter: FC<PropsWithChildren<any>> = ({ children }) => {
     return (
-        <div className={styles.footer} {...props} data-testid="auth-controls">
-            {props.children}
+        <div className={styles.footer} data-testid="auth-controls">
+            {children}
         </div>
     );
+};
+
+interface PanelBodyHeaderProps extends PropsWithChildren<any> {
+    type?: 'default' | 'error';
+    onClose?: () => void;
 }
 
-export class PanelBodyHeader extends React.Component<
-    {
-        type?: 'default' | 'error';
-        onClose?: () => void;
-        children: React.ReactNode;
-    },
-    {
-        isClosed: boolean;
-    }
-> {
-    state: {
-        isClosed: boolean;
-    } = {
-        isClosed: false,
-    };
+export const PanelBodyHeader: FC<PanelBodyHeaderProps> = ({ type = 'default', onClose, children }) => {
+    const [isClosed, setIsClosed] = useState<boolean>(false);
+    const handleCloseClick = useCallback(() => {
+        setIsClosed(true);
+        onClose?.();
+    }, [onClose]);
 
-    render() {
-        const { type = 'default', children } = this.props;
+    return (
+        <div
+            className={clsx({
+                [styles.defaultBodyHeader]: type === 'default',
+                [styles.errorBodyHeader]: type === 'error',
+                [styles.isClosed]: isClosed,
+            })}
+        >
+            {type === 'error' && <span className={styles.close} onClick={handleCloseClick} />}
+            {children}
+        </div>
+    );
+};
 
-        let close;
-
-        if (type === 'error') {
-            close = <span className={styles.close} onClick={this.onClose} />;
-        }
-
-        const className = clsx(styles[`${type}BodyHeader`], {
-            [styles.isClosed]: this.state.isClosed,
-        });
-
-        const extraProps = omit(this.props, ['type', 'onClose']);
-
-        return (
-            <div className={className} {...extraProps}>
-                {close}
-                {children}
-            </div>
-        );
-    }
-
-    onClose = (event: React.MouseEvent<HTMLElement>) => {
-        event.preventDefault();
-
-        const { onClose } = this.props;
-
-        this.setState({ isClosed: true });
-
-        if (onClose) {
-            onClose();
-        }
-    };
+interface PanelIconProps {
+    icon: string;
 }
 
-export function PanelIcon({ icon }: { icon: string }) {
+export const PanelIcon: FC<PanelIconProps> = ({ icon }) => {
     return (
         <div className={styles.panelIcon}>
             <span className={icons[icon]} />
         </div>
     );
-}
+};

packages/app/components/ui/form/Form.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import clsx from 'clsx';
 
 import logger from 'app/services/logger';
@@ -10,7 +10,8 @@ interface BaseProps {
     id: string;
     isLoading: boolean;
     onInvalid: (errors: Record<string, string>) => void;
-    children: React.ReactNode;
+    className?: string;
+    children?: ReactNode;
 }
 
 interface PropsWithoutForm extends BaseProps {
@@ -24,10 +25,6 @@ interface PropsWithForm extends BaseProps {
 
 type Props = PropsWithoutForm | PropsWithForm;
 
-function hasForm(props: Props): props is PropsWithForm {
-    return 'form' in props;
-}
-
 interface State {
     id: string; // just to track value for derived updates
     isTouched: boolean;
@@ -54,10 +51,7 @@ export default class Form extends React.Component<Props, State> {
     mounted = false;
 
     componentDidMount() {
-        if (hasForm(this.props)) {
-            this.props.form.addLoadingListener(this.onLoading);
-        }
-
+        (this.props as PropsWithForm).form?.addLoadingListener(this.onLoading);
         this.mounted = true;
     }
 
@@ -77,8 +71,8 @@ export default class Form extends React.Component<Props, State> {
     }
 
     componentDidUpdate(prevProps: Props) {
-        const nextForm = hasForm(this.props) ? this.props.form : undefined;
-        const prevForm = hasForm(prevProps) ? prevProps.form : undefined;
+        const nextForm = (this.props as PropsWithForm).form;
+        const prevForm = (prevProps as PropsWithForm).form;
 
         if (nextForm !== prevForm) {
             if (prevForm) {
@@ -92,10 +86,7 @@ export default class Form extends React.Component<Props, State> {
     }
 
     componentWillUnmount() {
-        if (hasForm(this.props)) {
-            this.props.form.removeLoadingListener(this.onLoading);
-        }
-
+        (this.props as PropsWithForm).form?.removeLoadingListener(this.onLoading);
         this.mounted = false;
     }
 
@@ -104,7 +95,7 @@ export default class Form extends React.Component<Props, State> {
 
         return (
             <form
-                className={clsx(styles.form, {
+                className={clsx(styles.form, this.props.className, {
                     [styles.isFormLoading]: isLoading,
                     [styles.formTouched]: this.state.isTouched,
                 })}
@@ -134,12 +125,10 @@ export default class Form extends React.Component<Props, State> {
             this.clearErrors();
             let result: Promise<void> | void;
 
-            if (hasForm(this.props)) {
-                // @ts-ignore this prop has default value
-                result = this.props.onSubmit(this.props.form);
+            if ((this.props as PropsWithForm).form) {
+                result = (this.props as PropsWithForm).onSubmit!((this.props as PropsWithForm).form);
             } else {
-                // @ts-ignore this prop has default value
-                result = this.props.onSubmit(new FormData(form));
+                result = (this.props as PropsWithoutForm).onSubmit!(new FormData(form));
             }
 
             if (result && result.then) {
@@ -181,14 +170,11 @@ export default class Form extends React.Component<Props, State> {
     }
 
     setErrors(errors: { [key: string]: string }) {
-        if (hasForm(this.props)) {
-            this.props.form.setErrors(errors);
-        }
-
+        (this.props as PropsWithForm).form?.setErrors(errors);
         this.props.onInvalid(errors);
     }
 
-    clearErrors = () => hasForm(this.props) && this.props.form.clearErrors();
+    clearErrors = () => (this.props as PropsWithForm).form?.clearErrors();
 
     onFormSubmit = (event: React.FormEvent<HTMLFormElement>) => {
         event.preventDefault();

packages/app/components/ui/panel.scss

@@ -76,6 +76,7 @@ $bodyTopBottomPadding: 15px;
     padding: 10px 20px;
     margin: (-$bodyTopBottomPadding) (-$bodyLeftRightPadding) 15px;
     max-height: 200px;
+    text-align: center;
 
     transition: 0.4s ease;
 }