Convert ./components/post_view/scroll_to_bottom_arrows.tsx to functional component (#24801)

* Convert ./components/post_view/scroll_to_bottom_arrows.tsx from Class Component to Function Component

* update scroll_to_bottom_arrows component

* enhancement: scroll_to_bottom_arrows component

* update scroll_to_bottom_arrows component

---------

Co-authored-by: Mattermost Build <build@mattermost.com>

webapp/channels/src/components/post_view/scroll_to_bottom_arrows.tsx

@@ -1,35 +1,33 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
+import classNames from 'classnames';
 import React from 'react';
 
 import ScrollToBottomIcon from 'components/widgets/icons/scroll_to_bottom_icon';
 
-interface Props {
+type Props = {
     isScrolling: boolean;
     atBottom?: boolean;
     onClick: () => void;
-}
+};
 
-export default class ScrollToBottomArrows extends React.PureComponent<Props> {
+const ScrollToBottomArrows = ({isScrolling, atBottom, onClick}: Props) => {
-    render() {
+    // only show on mobile
-        // only show on mobile
+    if (window.innerWidth > 768) {
-        if (window.innerWidth > 768) {
+        return null;
-            return null;
-        }
-
-        let className = 'post-list__arrows';
-        if (this.props.isScrolling && this.props.atBottom === false) {
-            className += ' scrolling';
-        }
-
-        return (
-            <div
-                className={className}
-                onClick={this.props.onClick}
-            >
-                <ScrollToBottomIcon/>
-            </div>
-        );
     }
-}
+
+    return (
+        <div
+            className={classNames('post-list__arrows', {
+                scrolling: isScrolling && atBottom === false,
+            })}
+            onClick={onClick}
+        >
+            <ScrollToBottomIcon/>
+        </div>
+    );
+};
+
+export default ScrollToBottomArrows;