[MM-55331] Convert ./components/channel_header_dropdown/menu_items/view_pinned_posts/view_pinned_posts.tsx from Class Component to Function Component (#25400)

* [MM-55331] Convert `./components/channel_header_dropdown/menu_items/view_pinned_posts/view_pinned_posts.tsx` from Class Component to Function Component

* refactor: Implement useCallback to avoid unwanted renders

* refactor: import mouse event type from react

* refactor: deprecate localizeMessage with intl

---------

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

webapp/channels/src/components/channel_header_dropdown/__snapshots__/channel_header_dropdown.test.tsx.snap

@@ -71,7 +71,7 @@ exports[`components/ChannelHeaderDropdown should match snapshot with no plugin i
       isFavorite={false}
       show={false}
     />
-    <Connect(ViewPinnedPosts)
+    <Connect(Component)
       channel={
         Object {
           "create_at": 0,
@@ -903,7 +903,7 @@ exports[`components/ChannelHeaderDropdown should match snapshot with plugins 1`]
       isFavorite={false}
       show={false}
     />
-    <Connect(ViewPinnedPosts)
+    <Connect(Component)
       channel={
         Object {
           "create_at": 0,

webapp/channels/src/components/channel_header_dropdown/menu_items/view_pinned_posts/view_pinned_posts.test.tsx

@@ -21,12 +21,12 @@ describe('components/ChannelHeaderDropdown/MenuItem.ViewPinnedPosts', () => {
     };
 
     it('should match snapshot', () => {
-        const wrapper = shallow<ViewPinnedPosts>(<ViewPinnedPosts {...baseProps}/>);
+        const wrapper = shallow(<ViewPinnedPosts {...baseProps}/>);
         expect(wrapper).toMatchSnapshot();
     });
 
     it('should runs closeRightHandSide function if has any pinned posts', () => {
-        const wrapper = shallow<ViewPinnedPosts>(<ViewPinnedPosts {...baseProps}/>);
+        const wrapper = shallow(<ViewPinnedPosts {...baseProps}/>);
 
         wrapper.find(Menu.ItemAction).simulate('click', {
             preventDefault: jest.fn(),
@@ -40,7 +40,7 @@ describe('components/ChannelHeaderDropdown/MenuItem.ViewPinnedPosts', () => {
             ...baseProps,
             hasPinnedPosts: false,
         };
-        const wrapper = shallow<ViewPinnedPosts>(<ViewPinnedPosts {...props}/>);
+        const wrapper = shallow(<ViewPinnedPosts {...props}/>);
 
         wrapper.find(Menu.ItemAction).simulate('click', {
             preventDefault: jest.fn(),

webapp/channels/src/components/channel_header_dropdown/menu_items/view_pinned_posts/view_pinned_posts.tsx

@@ -1,14 +1,14 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React from 'react';
+import React, {useCallback, memo} from 'react';
+import type {MouseEvent} from 'react';
+import {useIntl} from 'react-intl';
 
 import type {GetStateFunc, DispatchFunc} from 'mattermost-redux/types/actions';
 
 import Menu from 'components/widgets/menu/menu';
 
-import {localizeMessage} from 'utils/utils';
-
 type Props = {
     show?: boolean;
     channel: any;
@@ -19,33 +19,33 @@ type Props = {
     };
 }
 
-export default class ViewPinnedPosts extends React.PureComponent<Props> {
+const ViewPinnedPosts = ({
-    private handleClick = (e: React.MouseEvent) => {
+    channel,
+    hasPinnedPosts,
+    actions: {
+        closeRightHandSide,
+        showPinnedPosts,
+    },
+    show,
+}: Props) => {
+    const intl = useIntl();
+    const handleClick = useCallback((e: MouseEvent) => {
         e.preventDefault();
 
-        const {
-            channel,
-            hasPinnedPosts,
-            actions: {
-                closeRightHandSide,
-                showPinnedPosts,
-            },
-        } = this.props;
-
         if (hasPinnedPosts) {
             closeRightHandSide();
         } else {
             showPinnedPosts(channel.id);
         }
-    };
+    }, [channel.id, closeRightHandSide, showPinnedPosts, hasPinnedPosts]);
 
-    render() {
+    return (
-        return (
+        <Menu.ItemAction
-            <Menu.ItemAction
+            show={show}
-                show={this.props.show}
+            onClick={handleClick}
-                onClick={this.handleClick}
+            text={intl.formatMessage({id: 'navbar.viewPinnedPosts', defaultMessage: 'View Pinned Posts'})}
-                text={localizeMessage('navbar.viewPinnedPosts', 'View Pinned Posts')}
+        />
-            />
+    );
-        );
+};
-    }
+
-}
+export default memo(ViewPinnedPosts);