[MM-60067] Convert ./components/mfa/confirm.tsx from Class Component to Function Component (#27916)

* fix: convert component to function component

* update test snapshot

* fix: removed the unused props for confirm component

* fix: removed the unused props for confirm component
moved submit and onKeyPress functions outside the component

* fix: removed unused variable and fixed lint

* fix: fix prop type for 'confirm' test file

webapp/channels/src/components/mfa/__snapshots__/confirm.test.tsx.snap

@@ -8,7 +8,7 @@ exports[`components/mfa/components/Confirm should match snapshot 1`] = `
     onSubmit={[Function]}
   >
     <p>
-      <FormattedMarkdownMessage
+      <MemoizedFormattedMessage
         defaultMessage="**Set up complete!**"
         id="mfa.confirm.complete"
       />

webapp/channels/src/components/mfa/confirm.test.tsx

@@ -18,24 +18,17 @@ jest.mock('actions/global_actions', () => ({
 describe('components/mfa/components/Confirm', () => {
     const originalAddEventListener = document.body.addEventListener;
 
-    const defaultProps = {
-        updateParent: jest.fn(),
-        state: {
-            enforceMultifactorAuthentication: true,
-        },
-    };
-
     afterAll(() => {
         document.body.addEventListener = originalAddEventListener;
     });
 
     test('should match snapshot', () => {
-        const wrapper = shallow(<Confirm {...defaultProps}/>);
+        const wrapper = shallow(<Confirm/>);
         expect(wrapper).toMatchSnapshot();
     });
 
     test('should submit on form submit', () => {
-        const wrapper = mountWithIntl(<Confirm {...defaultProps}/>);
+        const wrapper = mountWithIntl(<Confirm/>);
         wrapper.find('form').simulate('submit');
 
         expect(redirectUserToDefaultTeam).toHaveBeenCalled();
@@ -49,7 +42,7 @@ describe('components/mfa/components/Confirm', () => {
             map[event] = callback;
         });
 
-        mountWithIntl(<Confirm {...defaultProps}/>);
+        mountWithIntl(<Confirm/>);
 
         const event = {
             preventDefault: jest.fn(),

webapp/channels/src/components/mfa/confirm.tsx

@@ -1,86 +1,65 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React from 'react';
+import React, {useEffect} from 'react';
 import {FormattedMessage} from 'react-intl';
 
 import {redirectUserToDefaultTeam} from 'actions/global_actions';
 
-import FormattedMarkdownMessage from 'components/formatted_markdown_message';
-
 import Constants from 'utils/constants';
 import {isKeyPressed} from 'utils/keyboard';
 
 const KeyCodes = Constants.KeyCodes;
 
-type MFAControllerState = {
+const submit = (e: KeyboardEvent | React.FormEvent<HTMLFormElement>): void => {
-    enforceMultifactorAuthentication: boolean;
+    e.preventDefault();
+    redirectUserToDefaultTeam();
 };
 
-type Props = {
+const onKeyPress = (e: React.KeyboardEvent<HTMLFormElement>| KeyboardEvent) => {
-
+    if (isKeyPressed(e as KeyboardEvent, KeyCodes.ENTER)) {
-    /*
+        submit(e);
-     * Object containing enforceMultifactorAuthentication
-     */
-    state: MFAControllerState;
-
-    /*
-     * Function that updates parent component with state props
-     */
-    updateParent: (state: MFAControllerState) => void;
-}
-
-export default class Confirm extends React.PureComponent<Props> {
-    public componentDidMount(): void {
-        document.body.addEventListener('keydown', this.onKeyPress);
     }
+};
 
-    public componentWillUnmount(): void {
+export default function Confirm() {
-        document.body.removeEventListener('keydown', this.onKeyPress);
+    useEffect(() => {
-    }
+        document.body.addEventListener('keydown', onKeyPress);
 
-    submit = (e: KeyboardEvent | React.FormEvent<HTMLFormElement>): void => {
+        return () => {
-        e.preventDefault();
+            document.body.removeEventListener('keydown', onKeyPress);
-        redirectUserToDefaultTeam();
+        };
-    };
+    }, []);
 
-    onKeyPress = (e: KeyboardEvent | React.FormEvent<HTMLFormElement>): void => {
+    return (
-        if (isKeyPressed(e as KeyboardEvent, KeyCodes.ENTER)) {
+        <div>
-            this.submit(e);
+            <form
-        }
+                onSubmit={submit}
-    };
+                onKeyPress={onKeyPress}
-
+                className='form-group'
-    public render(): JSX.Element {
+            >
-        return (
+                <p>
-            <div>
+                    <FormattedMessage
-                <form
+                        id='mfa.confirm.complete'
-                    onSubmit={this.submit}
+                        defaultMessage='**Set up complete!**'
-                    onKeyPress={this.onKeyPress}
+                    />
-                    className='form-group'
+                </p>
+                <p>
+                    <FormattedMessage
+                        id='mfa.confirm.secure'
+                        defaultMessage='Your account is now secure. Next time you sign in, you will be asked to enter a code from the Google Authenticator app on your phone.'
+                    />
+                </p>
+                <button
+                    type='submit'
+                    className='btn btn-primary'
                 >
-                    <p>
+                    <FormattedMessage
-                        <FormattedMarkdownMessage
+                        id='mfa.confirm.okay'
-                            id='mfa.confirm.complete'
+                        defaultMessage='Okay'
-                            defaultMessage='**Set up complete!**'
+                    />
-                        />
+                </button>
-                    </p>
+            </form>
-                    <p>
+        </div>
-                        <FormattedMessage
+    );
-                            id='mfa.confirm.secure'
-                            defaultMessage='Your account is now secure. Next time you sign in, you will be asked to enter a code from the Google Authenticator app on your phone.'
-                        />
-                    </p>
-                    <button
-                        type='submit'
-                        className='btn btn-primary'
-                    >
-                        <FormattedMessage
-                            id='mfa.confirm.okay'
-                            defaultMessage='Okay'
-                        />
-                    </button>
-                </form>
-            </div>
-        );
-    }
 }

webapp/channels/src/components/mfa/mfa_controller/mfa_controller.tsx

@@ -122,12 +122,8 @@ export default class MFAController extends React.PureComponent<Props & RouteComp
                                         />
                                         <Route
                                             path={`${this.props.match.url}/confirm`}
-                                            render={(props) => (
+                                            render={() => (
-                                                <Confirm
+                                                <Confirm/>
-                                                    state={this.state}
-                                                    updateParent={this.updateParent}
-                                                    {...props}
-                                                />
                                             )}
                                         />
                                     </Switch>