From 7ea88ff4c6e159507a5de3ef6e930429040ee5f2 Mon Sep 17 00:00:00 2001
From: Kritik Jiyaviya <kritikjiyaviya07@gmail.com>
Date: Mon, 30 Oct 2023 16:48:57 +0530
Subject: [PATCH] [MM-54803] Convert
 ./components/channel_header_dropdown/mobile_channel_header_dropdown_animation.tsx
 from Class to Functional component (#24949)

* Convert ./components/channel_header_dropdown/mobile_channel_header_dropdown_animation.tsx from Class to Functional component

* enhancement

---------

Co-authored-by: Mattermost Build <build@mattermost.com>
---
 ...bile_channel_header_dropdown_animation.tsx | 43 ++++++++++---------
 1 file changed, 22 insertions(+), 21 deletions(-)

diff --git a/webapp/channels/src/components/channel_header_dropdown/mobile_channel_header_dropdown_animation.tsx b/webapp/channels/src/components/channel_header_dropdown/mobile_channel_header_dropdown_animation.tsx
index 77d22b76b2..fa8bd74a2d 100644
--- a/webapp/channels/src/components/channel_header_dropdown/mobile_channel_header_dropdown_animation.tsx
+++ b/webapp/channels/src/components/channel_header_dropdown/mobile_channel_header_dropdown_animation.tsx
@@ -10,26 +10,27 @@ const ANIMATION_DURATION = 350;
 type Props = {
     children?: ReactNode;
     show: boolean;
-}
+};
 
-export default class MobileChannelHeaderDropdownAnimation extends React.PureComponent<Props> {
-    render() {
-        return (
-            <CSSTransition
-                in={this.props.show}
-                classNames='mobile-channel-header-dropdown'
-                enter={true}
-                exit={true}
-                mountOnEnter={true}
-                unmountOnExit={true}
-                timeout={{
-                    enter: ANIMATION_DURATION,
-                    exit: ANIMATION_DURATION,
-                }}
-            >
-                {this.props.children}
-            </CSSTransition>
-        );
-    }
-}
+const timeout = {
+    enter: ANIMATION_DURATION,
+    exit: ANIMATION_DURATION,
+};
 
+const MobileChannelHeaderDropdownAnimation = ({show, children}: Props) => {
+    return (
+        <CSSTransition
+            in={show}
+            classNames='mobile-channel-header-dropdown'
+            enter={true}
+            exit={true}
+            mountOnEnter={true}
+            unmountOnExit={true}
+            timeout={timeout}
+        >
+            {children}
+        </CSSTransition>
+    );
+};
+
+export default React.memo(MobileChannelHeaderDropdownAnimation);