From 07bf343e469776673dfc376760355a58daeee375 Mon Sep 17 00:00:00 2001
From: Aditi Patel <aditipatelpro@gmail.com>
Date: Tue, 12 Dec 2023 04:17:25 -0600
Subject: [PATCH] Migrate
 `./components/channel_header_mobile/show_search_button/show_search_button.tsx`
 from Class component to  functional component (#25636)

* chore: migrate show_search_button.tsx to functional component

* chore: styled show_search_button to match the pattern

* test: updated snapshots
---
 .../channel_header_mobile.test.tsx.snap       |  8 ++--
 .../show_search_button/show_search_button.tsx | 37 +++++++++----------
 2 files changed, 22 insertions(+), 23 deletions(-)

diff --git a/webapp/channels/src/components/channel_header_mobile/__snapshots__/channel_header_mobile.test.tsx.snap b/webapp/channels/src/components/channel_header_mobile/__snapshots__/channel_header_mobile.test.tsx.snap
index f14ba48bf5..123a9d3f5b 100644
--- a/webapp/channels/src/components/channel_header_mobile/__snapshots__/channel_header_mobile.test.tsx.snap
+++ b/webapp/channels/src/components/channel_header_mobile/__snapshots__/channel_header_mobile.test.tsx.snap
@@ -42,7 +42,7 @@ exports[`components/ChannelHeaderMobile/ChannelHeaderMobile should match snapsho
           }
         }
       />
-      <Connect(ShowSearchButton) />
+      <Connect(Component) />
       <Connect(injectIntl(MobileChannelHeaderPlug))
         channel={
           Object {
@@ -113,7 +113,7 @@ exports[`components/ChannelHeaderMobile/ChannelHeaderMobile should match snapsho
           }
         }
       />
-      <Connect(ShowSearchButton) />
+      <Connect(Component) />
       <Connect(injectIntl(MobileChannelHeaderPlug))
         channel={
           Object {
@@ -184,7 +184,7 @@ exports[`components/ChannelHeaderMobile/ChannelHeaderMobile should match snapsho
           }
         }
       />
-      <Connect(ShowSearchButton) />
+      <Connect(Component) />
       <Connect(injectIntl(MobileChannelHeaderPlug))
         channel={
           Object {
@@ -255,7 +255,7 @@ exports[`components/ChannelHeaderMobile/ChannelHeaderMobile should match snapsho
           }
         }
       />
-      <Connect(ShowSearchButton) />
+      <Connect(Component) />
       <Connect(injectIntl(MobileChannelHeaderPlug))
         channel={
           Object {
diff --git a/webapp/channels/src/components/channel_header_mobile/show_search_button/show_search_button.tsx b/webapp/channels/src/components/channel_header_mobile/show_search_button/show_search_button.tsx
index 833286f401..5eb349efeb 100644
--- a/webapp/channels/src/components/channel_header_mobile/show_search_button/show_search_button.tsx
+++ b/webapp/channels/src/components/channel_header_mobile/show_search_button/show_search_button.tsx
@@ -15,24 +15,23 @@ type Props = {
     actions: Actions;
 }
 
-export default class ShowSearchButton extends React.PureComponent<Props> {
-    handleClick = () => {
-        this.props.actions.openRHSSearch();
+const ShowSearchButton = ({actions}: Props) => {
+    const handleClick = () => {
+        actions.openRHSSearch();
     };
 
-    render() {
-        return (
-            <button
-                type='button'
-                className='navbar-toggle navbar-right__icon navbar-search pull-right'
-                onClick={this.handleClick}
-                aria-label={localizeMessage('accessibility.button.Search', 'Search')}
-            >
-                <SearchIcon
-                    className='icon icon__search'
-                    aria-hidden='true'
-                />
-            </button>
-        );
-    }
-}
+    return (
+        <button
+            type='button'
+            className='navbar-toggle navbar-right__icon navbar-search pull-right'
+            onClick={handleClick}
+            aria-label={localizeMessage('accessibility.button.Search', 'Search')}
+        >
+            <SearchIcon
+                className='icon icon__search'
+                aria-hidden='true'
+            />
+        </button>
+    );
+};
+export default React.memo(ShowSearchButton);