migrate notify counts component from class based to function based comp (#24794)

* migrate notify counts component to function comp

* comment resolved

* Update webapp/channels/src/components/notify_counts/notify_counts.tsx

* Fixing tests

* Removing unnecessary call

---------

Co-authored-by: Jesús Espino <jespinog@gmail.com>
Co-authored-by: Mattermost Build <build@mattermost.com>

webapp/channels/src/components/notify_counts/notify_counts.test.tsx

@@ -37,6 +37,6 @@ describe('components/notify_counts', () => {
         const {mountOptions} = mockStore();
         const wrapper = mount(<NotifyCounts/>, mountOptions);
 
-        expect(wrapper.isEmptyRender()).toBe(true);
+        expect(wrapper.html()).toBe('');
     });
 });

webapp/channels/src/components/notify_counts/notify_counts.tsx

@@ -4,15 +4,14 @@
 import React from 'react';
 
 import type {BasicUnreadMeta} from 'mattermost-redux/selectors/entities/channels';
-type Props = BasicUnreadMeta;
 
-export default class NotifyCounts extends React.PureComponent<Props> {
+const NotifyCounts = ({unreadMentionCount, isUnread}: BasicUnreadMeta) => {
-    render() {
+    if (unreadMentionCount) {
-        if (this.props.unreadMentionCount) {
+        return <span className='badge badge-notify'>{unreadMentionCount}</span>;
-            return <span className='badge badge-notify'>{this.props.unreadMentionCount}</span>;
+    } else if (isUnread) {
-        } else if (this.props.isUnread) {
+        return <span className='badge badge-notify'>{'•'}</span>;
-            return <span className='badge badge-notify'>{'•'}</span>;
-        }
-        return null;
     }
-}
+    return null;
+};
+
+export default React.memo(NotifyCounts);