From 4eb30f517c38f56b9673972a90f7c8b39e76dea1 Mon Sep 17 00:00:00 2001
From: Tanmay Vardhaman Thole <72058456+tanmaythole@users.noreply.github.com>
Date: Thu, 19 Oct 2023 14:15:14 +0530
Subject: [PATCH] migrate notify counts component from class based to function
 based comp (#24794)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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>
---
 .../notify_counts/notify_counts.test.tsx      |  2 +-
 .../notify_counts/notify_counts.tsx           | 19 +++++++++----------
 2 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/webapp/channels/src/components/notify_counts/notify_counts.test.tsx b/webapp/channels/src/components/notify_counts/notify_counts.test.tsx
index 80e819b018..b9de5f58a3 100644
--- a/webapp/channels/src/components/notify_counts/notify_counts.test.tsx
+++ b/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('');
     });
 });
diff --git a/webapp/channels/src/components/notify_counts/notify_counts.tsx b/webapp/channels/src/components/notify_counts/notify_counts.tsx
index 3b63884980..7632d4f707 100644
--- a/webapp/channels/src/components/notify_counts/notify_counts.tsx
+++ b/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> {
-    render() {
-        if (this.props.unreadMentionCount) {
-            return <span className='badge badge-notify'>{this.props.unreadMentionCount}</span>;
-        } else if (this.props.isUnread) {
-            return <span className='badge badge-notify'>{'•'}</span>;
-        }
-        return null;
+const NotifyCounts = ({unreadMentionCount, isUnread}: BasicUnreadMeta) => {
+    if (unreadMentionCount) {
+        return <span className='badge badge-notify'>{unreadMentionCount}</span>;
+    } else if (isUnread) {
+        return <span className='badge badge-notify'>{'•'}</span>;
     }
-}
+    return null;
+};
+
+export default React.memo(NotifyCounts);