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

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 {

webapp/channels/src/components/channel_header_mobile/show_search_button/show_search_button.tsx

@@ -15,17 +15,16 @@ type Props = {
     actions: Actions;
 }
 
-export default class ShowSearchButton extends React.PureComponent<Props> {
+const ShowSearchButton = ({actions}: Props) => {
-    handleClick = () => {
+    const handleClick = () => {
-        this.props.actions.openRHSSearch();
+        actions.openRHSSearch();
     };
 
-    render() {
     return (
         <button
             type='button'
             className='navbar-toggle navbar-right__icon navbar-search pull-right'
-                onClick={this.handleClick}
+            onClick={handleClick}
             aria-label={localizeMessage('accessibility.button.Search', 'Search')}
         >
             <SearchIcon
@@ -34,5 +33,5 @@ export default class ShowSearchButton extends React.PureComponent<Props> {
             />
         </button>
     );
-    }
+};
-}
+export default React.memo(ShowSearchButton);