[MM-56007] Convert ./components/get_public_link_modal/get_public_link_modal.tsx from Class Component to Function Component (#25672)

* [MM-56007] Convert `./components/get_public_link_modal/get_public_link_modal.tsx` from Class Component to Function Component

* refactor: improve code based on suggestions

---------

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

webapp/channels/src/components/get_public_link_modal/get_public_link_modal.test.tsx

@@ -3,10 +3,13 @@
 
 import {shallow} from 'enzyme';
 import React from 'react';
+import {act} from 'react-dom/test-utils';
 
 import GetLinkModal from 'components/get_link_modal';
 import GetPublicLinkModal from 'components/get_public_link_modal/get_public_link_modal';
 
+import {mountWithIntl} from 'tests/helpers/intl-test-helper';
+
 describe('components/GetPublicLinkModal', () => {
     const baseProps = {
         link: 'http://mattermost.com/files/n5bnoaz3e7g93nyipzo1bixdwr/public?h=atw9qQHI1nUPnxo1e48tPspo1Qvwd3kHtJZjysmI5zs',
@@ -23,7 +26,7 @@ describe('components/GetPublicLinkModal', () => {
             link: '',
         };
 
-        const wrapper = shallow<GetPublicLinkModal>(
+        const wrapper = shallow(
             <GetPublicLinkModal {...props}/>,
         );
 
@@ -31,7 +34,7 @@ describe('components/GetPublicLinkModal', () => {
     });
 
     test('should match snapshot when link is not empty', () => {
-        const wrapper = shallow<GetPublicLinkModal>(
+        const wrapper = shallow(
             <GetPublicLinkModal {...baseProps}/>,
         );
 
@@ -39,31 +42,29 @@ describe('components/GetPublicLinkModal', () => {
     });
 
     test('should call getFilePublicLink on GetPublicLinkModal\'s show', () => {
-        const wrapper = shallow<GetPublicLinkModal>(
+        mountWithIntl(<GetPublicLinkModal {...baseProps}/>);
-            <GetPublicLinkModal {...baseProps}/>,
-        );
 
-        wrapper.setState({show: true});
         expect(baseProps.actions.getFilePublicLink).toHaveBeenCalledTimes(1);
         expect(baseProps.actions.getFilePublicLink).toHaveBeenCalledWith(baseProps.fileId);
     });
 
     test('should not call getFilePublicLink on GetLinkModal\'s onHide', () => {
-        const wrapper = shallow<GetPublicLinkModal>(
+        const wrapper = shallow(
             <GetPublicLinkModal {...baseProps}/>,
         );
 
-        wrapper.setState({show: true});
         baseProps.actions.getFilePublicLink.mockClear();
         wrapper.find(GetLinkModal).first().props().onHide();
         expect(baseProps.actions.getFilePublicLink).not.toHaveBeenCalled();
     });
 
     test('should call handleToggle on GetLinkModal\'s onHide', () => {
-        const wrapper = shallow<GetPublicLinkModal>(
+        const wrapper = mountWithIntl(<GetPublicLinkModal {...baseProps}/>);
-            <GetPublicLinkModal {...baseProps}/>);
 
-        wrapper.find(GetLinkModal).first().props().onHide();
+        act(() => {
-        expect(wrapper.state('show')).toBe(false);
+            wrapper.find(GetLinkModal).first().props().onHide();
+        });
+        wrapper.update();
+        expect(wrapper.find(GetLinkModal).first().props().show).toBe(false);
     });
 });

webapp/channels/src/components/get_public_link_modal/get_public_link_modal.tsx

@@ -1,12 +1,11 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React from 'react';
+import React, {memo, useCallback, useEffect, useState} from 'react';
+import {useIntl} from 'react-intl';
 
 import GetLinkModal from 'components/get_link_modal';
 
-import * as Utils from 'utils/utils';
-
 import type {PropsFromRedux} from './index';
 
 interface Props extends PropsFromRedux {
@@ -14,43 +13,31 @@ interface Props extends PropsFromRedux {
     fileId: string;
 }
 
-type State = {
+const GetPublicLinkModal = ({
-    show: boolean;
+    actions,
-}
+    fileId,
+    onExited,
+    link = '',
+}: Props) => {
+    const intl = useIntl();
+    const [show, setShow] = useState<boolean>(true);
 
-export default class GetPublicLinkModal extends React.PureComponent<Props, State> {
+    useEffect(() => {
-    public static defaultProps: Partial<Props> = {
+        actions.getFilePublicLink(fileId);
-        link: '',
+    }, []);
-    };
 
-    public constructor(props: Props) {
+    const onHide = useCallback(() => setShow(false), []);
-        super(props);
 
-        this.state = {
+    return (
-            show: true,
+        <GetLinkModal
-        };
+            show={show}
-    }
+            onHide={onHide}
+            onExited={onExited}
+            title={intl.formatMessage({id: 'get_public_link_modal.title', defaultMessage: 'Copy Public Link'})}
+            helpText={intl.formatMessage({id: 'get_public_link_modal.help', defaultMessage: 'The link below allows anyone to see this file without being registered on this server.'})}
+            link={link}
+        />
+    );
+};
 
-    public componentDidMount() {
+export default memo(GetPublicLinkModal);
-        this.props.actions.getFilePublicLink(this.props.fileId);
-    }
-
-    public onHide = () => {
-        this.setState({
-            show: false,
-        });
-    };
-
-    public render() {
-        return (
-            <GetLinkModal
-                show={this.state.show}
-                onHide={this.onHide}
-                onExited={this.props.onExited}
-                title={Utils.localizeMessage('get_public_link_modal.title', 'Copy Public Link')}
-                helpText={Utils.localizeMessage('get_public_link_modal.help', 'The link below allows anyone to see this file without being registered on this server.')}
-                link={this.props.link}
-            />
-        );
-    }
-}