[MM-60075] Convert ./components/admin_console/team_channel_settings/group/group_members_modal.tsx from Class Component to Function Component (#27907)

* feat: convert group_members_modal to functional component

* fix: comment worked on and linting done

* fix: addressed comment

* fix: addressed comment

* fix: failing test

---------

Co-authored-by: Mattermost Build <build@mattermost.com>

webapp/channels/src/components/admin_console/team_channel_settings/group/__snapshots__/group_row.test.tsx.snap

@@ -28,7 +28,13 @@ exports[`admin_console/team_channel_settings/group/GroupRow should match snapsho
             },
           }
         }
-        dialogType={[Function]}
+        dialogType={
+          Object {
+            "$$typeof": Symbol(react.memo),
+            "compare": null,
+            "type": [Function],
+          }
+        }
         id="DNMembersToggle"
         modalId="group_members"
       >

webapp/channels/src/components/admin_console/team_channel_settings/group/group_members_modal.test.tsx

@@ -18,7 +18,7 @@ describe('admin_console/team_channel_settings/group/GroupList', () => {
                 onExited={jest.fn()}
             />,
         );
-        wrapper.setState({show: true});
+        expect(wrapper.find('Modal').prop('show')).toBe(true);
         expect(wrapper).toMatchSnapshot();
     });
 });

webapp/channels/src/components/admin_console/team_channel_settings/group/group_members_modal.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React from 'react';
+import React, {useState, useEffect, useCallback} from 'react';
 import {Modal} from 'react-bootstrap';
 import {FormattedMessage} from 'react-intl';
 
@@ -15,78 +15,66 @@ type Props = {
     onLoad?: () => void;
 }
 
-type State = {
+const GroupMembersModal: React.FC<Props> = ({
-    show: boolean;
+    group, onExited, onLoad,
-}
+}) => {
+    const [show, setShow] = useState(true);
 
-export default class GroupMembersModal extends React.PureComponent<Props, State> {
+    useEffect(() => {
-    constructor(props: Props) {
+        onLoad?.();
-        super(props);
+    }, []);
 
-        this.state = {
+    const handleHide = useCallback(() => {
-            show: true,
+        setShow(false);
-        };
+    }, []);
-    }
 
-    componentDidMount() {
+    const handleExit = useCallback(() => {
-        if (this.props.onLoad) {
+        onExited();
-            this.props.onLoad();
+    }, [onExited]);
-        }
-    }
 
-    handleHide = () => {
+    const button = (
-        this.setState({show: false});
+        <FormattedMessage
-    };
+            id='admin.team_channel_settings.groupMembers.close'
+            defaultMessage='Close'
+        />
+    );
 
-    handleExit = () => {
+    return (
-        this.props.onExited();
+        <Modal
-    };
+            dialogClassName='a11y__modal settings-modal'
+            show={show}
+            onHide={handleHide}
+            onExited={handleExit}
+            role='dialog'
+            aria-labelledby='groupMemberModalLabel'
+            id='groupMembersModal'
+        >
+            <Modal.Header closeButton={true}>
+                <Modal.Title
+                    componentClass='h1'
+                    id='groupMemberModalLabel'
+                >
+                    {group.display_name}
+                </Modal.Title>
+            </Modal.Header>
+            <Modal.Body>
+                <MemberListGroup
+                    groupID={group.id}
+                />
+            </Modal.Body>
+            <Modal.Footer>
+                <button
+                    autoFocus={true}
+                    type='button'
+                    className='btn btn-primary'
+                    onClick={handleHide}
+                    id='closeModalButton'
+                >
+                    {button}
+                </button>
+            </Modal.Footer>
+        </Modal>
+    );
+};
 
-    render() {
+export default React.memo(GroupMembersModal);
-        const {group} = this.props;
-
-        const button = (
-            <FormattedMessage
-                id='admin.team_channel_settings.groupMembers.close'
-                defaultMessage='Close'
-            />
-        );
-
-        return (
-            <Modal
-                dialogClassName='a11y__modal settings-modal'
-                show={this.state.show}
-                onHide={this.handleHide}
-                onExited={this.handleExit}
-                role='dialog'
-                aria-labelledby='groupMemberModalLabel'
-                id='groupMembersModal'
-            >
-                <Modal.Header closeButton={true}>
-                    <Modal.Title
-                        componentClass='h1'
-                        id='groupMemberModalLabel'
-                    >
-                        {group.display_name}
-                    </Modal.Title>
-                </Modal.Header>
-                <Modal.Body>
-                    <MemberListGroup
-                        groupID={group.id}
-                    />
-                </Modal.Body>
-                <Modal.Footer>
-                    <button
-                        autoFocus={true}
-                        type='button'
-                        className='btn btn-primary'
-                        onClick={this.handleHide}
-                        id='closeModalButton'
-                    >
-                        {button}
-                    </button>
-                </Modal.Footer>
-            </Modal>
-        );
-    }
-}