[MM-57715] Convert ./components/common/comment_icon.tsx from Class Component to Function Component (#26727)

* [MM-57715] Convert `./components/common/comment_icon.tsx` from Class Component to Function Component

* :fix: failing types issue

webapp/channels/src/components/common/comment_icon.tsx

@@ -2,77 +2,77 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import {FormattedMessage} from 'react-intl';
+import {FormattedMessage, useIntl} from 'react-intl';
 
 import OverlayTrigger from 'components/overlay_trigger';
 import Tooltip from 'components/tooltip';
 import ReplyIcon from 'components/widgets/icons/reply_icon';
 
 import type {Locations} from 'utils/constants';
-import {localizeMessage} from 'utils/utils';
 
 type Props = {
-    location: keyof typeof Locations;
+    location?: keyof typeof Locations;
-    handleCommentClick: React.EventHandler<React.MouseEvent>;
+    handleCommentClick?: React.EventHandler<React.MouseEvent>;
-    searchStyle: string;
+    searchStyle?: string;
-    commentCount: number;
+    commentCount?: number;
     postId?: string;
     extraClass: string;
 }
 
-export default class CommentIcon extends React.PureComponent<Props> {
+const CommentIcon = ({
-    public static defaultProps: Partial<Props> = {
+    location = 'CENTER',
-        location: 'CENTER',
+    searchStyle = '',
-        searchStyle: '',
+    commentCount = 0,
-        commentCount: 0,
+    extraClass = '',
-        extraClass: '',
+    handleCommentClick,
-    };
+    postId,
+}: Props) => {
+    const intl = useIntl();
 
-    public render(): JSX.Element {
+    let commentCountSpan: JSX.Element | null = null;
-        let commentCountSpan: JSX.Element | null = null;
+    let iconStyle = 'post-menu__item post-menu__item--wide';
-        let iconStyle = 'post-menu__item post-menu__item--wide';
+    if (commentCount > 0) {
-        if (this.props.commentCount > 0) {
+        iconStyle += ' post-menu__item--show';
-            iconStyle += ' post-menu__item--show';
+        commentCountSpan = (
-            commentCountSpan = (
+            <span className='post-menu__comment-count'>
-                <span className='post-menu__comment-count'>
+                {commentCount}
-                    {this.props.commentCount}
+            </span>
-                </span>
-            );
-        } else if (this.props.searchStyle !== '') {
-            iconStyle = iconStyle + ' ' + this.props.searchStyle;
-        }
-
-        const tooltip = (
-            <Tooltip
-                id='comment-icon-tooltip'
-                className='hidden-xs'
-            >
-                <FormattedMessage
-                    id='post_info.comment_icon.tooltip.reply'
-                    defaultMessage='Reply'
-                />
-            </Tooltip>
-        );
-
-        return (
-            <OverlayTrigger
-                delayShow={500}
-                placement='top'
-                overlay={tooltip}
-            >
-                <button
-                    id={`${this.props.location}_commentIcon_${this.props.postId}`}
-                    aria-label={localizeMessage('post_info.comment_icon.tooltip.reply', 'Reply').toLowerCase()}
-                    className={iconStyle + ' ' + this.props.extraClass}
-                    onClick={this.props.handleCommentClick}
-                >
-                    <span className='d-flex align-items-center'>
-                        <ReplyIcon className='icon icon--small'/>
-                        {commentCountSpan}
-                    </span>
-                </button>
-            </OverlayTrigger>
         );
+    } else if (searchStyle !== '') {
+        iconStyle = `${iconStyle} ${searchStyle}`;
     }
-}
 
+    const tooltip = (
+        <Tooltip
+            id='comment-icon-tooltip'
+            className='hidden-xs'
+        >
+            <FormattedMessage
+                id='post_info.comment_icon.tooltip.reply'
+                defaultMessage='Reply'
+            />
+        </Tooltip>
+    );
+
+    return (
+        <OverlayTrigger
+            delayShow={500}
+            placement='top'
+            overlay={tooltip}
+        >
+            <button
+                id={`${location}_commentIcon_${postId}`}
+                aria-label={intl.formatMessage({id: 'post_info.comment_icon.tooltip.reply', defaultMessage: 'Reply'}).toLowerCase()}
+                className={`${iconStyle} ${extraClass}`}
+                onClick={handleCommentClick}
+            >
+                <span className='d-flex align-items-center'>
+                    <ReplyIcon className='icon icon--small'/>
+                    {commentCountSpan}
+                </span>
+            </button>
+        </OverlayTrigger>
+    );
+};
+
+export default CommentIcon;