[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,44 +2,44 @@
 // 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 iconStyle = 'post-menu__item post-menu__item--wide';
-        if (this.props.commentCount > 0) {
+    if (commentCount > 0) {
         iconStyle += ' post-menu__item--show';
         commentCountSpan = (
             <span className='post-menu__comment-count'>
-                    {this.props.commentCount}
+                {commentCount}
             </span>
         );
-        } else if (this.props.searchStyle !== '') {
+    } else if (searchStyle !== '') {
-            iconStyle = iconStyle + ' ' + this.props.searchStyle;
+        iconStyle = `${iconStyle} ${searchStyle}`;
     }
 
     const tooltip = (
@@ -61,10 +61,10 @@ export default class CommentIcon extends React.PureComponent<Props> {
             overlay={tooltip}
         >
             <button
-                    id={`${this.props.location}_commentIcon_${this.props.postId}`}
+                id={`${location}_commentIcon_${postId}`}
-                    aria-label={localizeMessage('post_info.comment_icon.tooltip.reply', 'Reply').toLowerCase()}
+                aria-label={intl.formatMessage({id: 'post_info.comment_icon.tooltip.reply', defaultMessage: 'Reply'}).toLowerCase()}
-                    className={iconStyle + ' ' + this.props.extraClass}
+                className={`${iconStyle} ${extraClass}`}
-                    onClick={this.props.handleCommentClick}
+                onClick={handleCommentClick}
             >
                 <span className='d-flex align-items-center'>
                     <ReplyIcon className='icon icon--small'/>
@@ -73,6 +73,6 @@ export default class CommentIcon extends React.PureComponent<Props> {
             </button>
         </OverlayTrigger>
     );
-    }
+};
-}
 
+export default CommentIcon;