From 7480fcfdf73fd8a95392996672d8c74188081405 Mon Sep 17 00:00:00 2001
From: Atharva Joshi <atharvaj2160@gmail.com>
Date: Mon, 30 Oct 2023 21:17:31 +0530
Subject: [PATCH] [MM-54800] Convert "close_channel.tsx" from Class Component
 to Function Component (#25079)

* ISSUE#24764 | Convert close_channel/close_channel.tsx from Class Component to Function Component

* add type to tests

* remove unecasarry type assertion

* Convert localizeMessage to intl

* remove unnecassary function

* revert back from interface to type

* lint fix

* lint fix

* lint fix

* Fix failing tests
---
 .../channel_header_dropdown.test.tsx.snap     |  4 +--
 .../__snapshots__/close_channel.test.tsx.snap |  4 +--
 .../close_channel/close_channel.test.tsx      |  6 ++--
 .../close_channel/close_channel.tsx           | 35 ++++++++++---------
 4 files changed, 26 insertions(+), 23 deletions(-)

diff --git a/webapp/channels/src/components/channel_header_dropdown/__snapshots__/channel_header_dropdown.test.tsx.snap b/webapp/channels/src/components/channel_header_dropdown/__snapshots__/channel_header_dropdown.test.tsx.snap
index 2bbb90f3bd..7017d5f504 100644
--- a/webapp/channels/src/components/channel_header_dropdown/__snapshots__/channel_header_dropdown.test.tsx.snap
+++ b/webapp/channels/src/components/channel_header_dropdown/__snapshots__/channel_header_dropdown.test.tsx.snap
@@ -774,7 +774,7 @@ exports[`components/ChannelHeaderDropdown should match snapshot with no plugin i
       }
       id="channelCloseMessage"
     />
-    <Connect(CloseChannel)
+    <Connect(Component)
       isArchived={false}
     />
   </MenuGroup>
@@ -1603,7 +1603,7 @@ exports[`components/ChannelHeaderDropdown should match snapshot with plugins 1`]
       }
       id="channelCloseMessage"
     />
-    <Connect(CloseChannel)
+    <Connect(Component)
       isArchived={false}
     />
   </MenuGroup>
diff --git a/webapp/channels/src/components/channel_header_dropdown/menu_items/close_channel/__snapshots__/close_channel.test.tsx.snap b/webapp/channels/src/components/channel_header_dropdown/menu_items/close_channel/__snapshots__/close_channel.test.tsx.snap
index 92568edb13..8645e597a9 100644
--- a/webapp/channels/src/components/channel_header_dropdown/menu_items/close_channel/__snapshots__/close_channel.test.tsx.snap
+++ b/webapp/channels/src/components/channel_header_dropdown/menu_items/close_channel/__snapshots__/close_channel.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`components/ChannelHeaderDropdown/MenuItem.CloseChannel shoud be hidden if the channel is not archived 1`] = `
 <MenuItemAction
-  onClick={[Function]}
+  onClick={[MockFunction]}
   show={false}
   text="Close Channel"
 />
@@ -10,7 +10,7 @@ exports[`components/ChannelHeaderDropdown/MenuItem.CloseChannel shoud be hidden
 
 exports[`components/ChannelHeaderDropdown/MenuItem.CloseChannel should match snapshot 1`] = `
 <MenuItemAction
-  onClick={[Function]}
+  onClick={[MockFunction]}
   show={true}
   text="Close Channel"
 />
diff --git a/webapp/channels/src/components/channel_header_dropdown/menu_items/close_channel/close_channel.test.tsx b/webapp/channels/src/components/channel_header_dropdown/menu_items/close_channel/close_channel.test.tsx
index 034295e4c4..a6eec64adf 100644
--- a/webapp/channels/src/components/channel_header_dropdown/menu_items/close_channel/close_channel.test.tsx
+++ b/webapp/channels/src/components/channel_header_dropdown/menu_items/close_channel/close_channel.test.tsx
@@ -17,7 +17,7 @@ describe('components/ChannelHeaderDropdown/MenuItem.CloseChannel', () => {
     };
 
     it('should match snapshot', () => {
-        const wrapper = shallow<CloseChannel>(<CloseChannel {...baseProps}/>);
+        const wrapper = shallow(<CloseChannel {...baseProps}/>);
         expect(wrapper).toMatchSnapshot();
     });
 
@@ -26,7 +26,7 @@ describe('components/ChannelHeaderDropdown/MenuItem.CloseChannel', () => {
             ...baseProps,
             isArchived: false,
         };
-        const wrapper = shallow<CloseChannel>(<CloseChannel {...props}/>);
+        const wrapper = shallow(<CloseChannel {...props}/>);
         expect(wrapper).toMatchSnapshot();
     });
 
@@ -38,7 +38,7 @@ describe('components/ChannelHeaderDropdown/MenuItem.CloseChannel', () => {
                 goToLastViewedChannel: jest.fn(),
             },
         };
-        const wrapper = shallow<CloseChannel>(<CloseChannel {...props}/>);
+        const wrapper = shallow(<CloseChannel {...props}/>);
         wrapper.find(Menu.ItemAction).simulate('click');
         expect(props.actions.goToLastViewedChannel).toHaveBeenCalled();
     });
diff --git a/webapp/channels/src/components/channel_header_dropdown/menu_items/close_channel/close_channel.tsx b/webapp/channels/src/components/channel_header_dropdown/menu_items/close_channel/close_channel.tsx
index 331c47c670..847b34b208 100644
--- a/webapp/channels/src/components/channel_header_dropdown/menu_items/close_channel/close_channel.tsx
+++ b/webapp/channels/src/components/channel_header_dropdown/menu_items/close_channel/close_channel.tsx
@@ -2,11 +2,10 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
+import {useIntl} from 'react-intl';
 
 import Menu from 'components/widgets/menu/menu';
 
-import {localizeMessage} from 'utils/utils';
-
 type Props = {
     isArchived: boolean;
     actions: {
@@ -14,18 +13,22 @@ type Props = {
     };
 }
 
-export default class CloseChannel extends React.PureComponent<Props> {
-    private handleClose = () => {
-        this.props.actions.goToLastViewedChannel();
-    };
+const CloseChannel = ({
+    isArchived,
+    actions,
+}: Props): JSX.Element => {
+    const intl = useIntl();
 
-    render() {
-        return (
-            <Menu.ItemAction
-                show={this.props.isArchived}
-                onClick={this.handleClose}
-                text={localizeMessage('center_panel.archived.closeChannel', 'Close Channel')}
-            />
-        );
-    }
-}
+    return (
+        <Menu.ItemAction
+            show={isArchived}
+            onClick={actions.goToLastViewedChannel}
+            text={intl.formatMessage({
+                id: 'center_panel.archived.closeChannel',
+                defaultMessage: 'Close Channel',
+            })}
+        />
+    );
+};
+
+export default React.memo(CloseChannel);