From f8d191b7cba355367cbc9340140c8424622e32f2 Mon Sep 17 00:00:00 2001
From: Syed Ali Abbas Zaidi
 <88369802+Syed-Ali-Abbas-Zaidi@users.noreply.github.com>
Date: Wed, 13 Dec 2023 20:12:36 +0500
Subject: [PATCH] [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>
---
 .../get_public_link_modal.test.tsx            | 25 +++----
 .../get_public_link_modal.tsx                 | 65 ++++++++-----------
 2 files changed, 39 insertions(+), 51 deletions(-)

diff --git a/webapp/channels/src/components/get_public_link_modal/get_public_link_modal.test.tsx b/webapp/channels/src/components/get_public_link_modal/get_public_link_modal.test.tsx
index c450da1c99..12965e0adb 100644
--- a/webapp/channels/src/components/get_public_link_modal/get_public_link_modal.test.tsx
+++ b/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>(
-            <GetPublicLinkModal {...baseProps}/>,
-        );
+        mountWithIntl(<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>(
-            <GetPublicLinkModal {...baseProps}/>);
+        const wrapper = mountWithIntl(<GetPublicLinkModal {...baseProps}/>);
 
-        wrapper.find(GetLinkModal).first().props().onHide();
-        expect(wrapper.state('show')).toBe(false);
+        act(() => {
+            wrapper.find(GetLinkModal).first().props().onHide();
+        });
+        wrapper.update();
+        expect(wrapper.find(GetLinkModal).first().props().show).toBe(false);
     });
 });
diff --git a/webapp/channels/src/components/get_public_link_modal/get_public_link_modal.tsx b/webapp/channels/src/components/get_public_link_modal/get_public_link_modal.tsx
index c098fb8fc0..12a22a779c 100644
--- a/webapp/channels/src/components/get_public_link_modal/get_public_link_modal.tsx
+++ b/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 = {
-    show: boolean;
-}
+const GetPublicLinkModal = ({
+    actions,
+    fileId,
+    onExited,
+    link = '',
+}: Props) => {
+    const intl = useIntl();
+    const [show, setShow] = useState<boolean>(true);
 
-export default class GetPublicLinkModal extends React.PureComponent<Props, State> {
-    public static defaultProps: Partial<Props> = {
-        link: '',
-    };
+    useEffect(() => {
+        actions.getFilePublicLink(fileId);
+    }, []);
 
-    public constructor(props: Props) {
-        super(props);
+    const onHide = useCallback(() => setShow(false), []);
 
-        this.state = {
-            show: true,
-        };
-    }
+    return (
+        <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() {
-        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}
-            />
-        );
-    }
-}
+export default memo(GetPublicLinkModal);