[MM-57714] Convert ./components/announcement_bar/version_bar/version_bar.tsx from Class Component to Function Component (#27966)

* fix: convert from class to function component

* fix: move 'reloadPage' function out of the component

webapp/channels/src/components/announcement_bar/version_bar/version_bar.tsx

@@ -1,49 +1,33 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React from 'react';
+import React, {useEffect, useState} from 'react';
 import {FormattedMessage} from 'react-intl';
 
 import {AnnouncementBarTypes} from 'utils/constants';
 
 import AnnouncementBar from '../default_announcement_bar';
 
-interface Props {
+type Props = {
     buildHash?: string;
 }
 
-interface State {
-    buildHashOnAppLoad?: string;
-}
-
-export default class VersionBar extends React.PureComponent <Props, State> {
-    constructor(props: Props) {
-        super(props);
-
-        this.state = {
-            buildHashOnAppLoad: props.buildHash,
-        };
-    }
-
-    static getDerivedStateFromProps(props: Props, state: State) {
-        if (!state.buildHashOnAppLoad && props.buildHash) {
-            return {
-                buildHashOnAppLoad: props.buildHash,
-            };
-        }
-
-        return null;
-    }
-
-    reloadPage = () => {
+const reloadPage = () => {
     window.location.reload();
-    };
+};
 
-    render() {
-        const {buildHashOnAppLoad} = this.state;
-        const {buildHash} = this.props;
+const VersionBar = ({
+    buildHash,
+}: Props) => {
+    const [buildHashOnAppLoad, setBuildHashOnAppLoad] = useState<string|undefined>(buildHash);
 
-        if (!buildHashOnAppLoad) {
+    useEffect(() => {
+        if (!buildHashOnAppLoad && buildHash) {
+            setBuildHashOnAppLoad(buildHash);
+        }
+    }, [buildHash, buildHashOnAppLoad]);
+
+    if (!buildHashOnAppLoad || buildHashOnAppLoad === buildHash) {
         return null;
     }
 
@@ -52,13 +36,13 @@ export default class VersionBar extends React.PureComponent <Props, State> {
             <AnnouncementBar
                 type={AnnouncementBarTypes.ANNOUNCEMENT}
                 message={
-                        <React.Fragment>
+                    <>
                         <FormattedMessage
                             id='version_bar.new'
                             defaultMessage='A new version of Mattermost is available.'
                         />
                         <a
-                                onClick={this.reloadPage}
+                            onClick={reloadPage}
                             style={{marginLeft: '.5rem'}}
                         >
                             <FormattedMessage
@@ -67,12 +51,13 @@ export default class VersionBar extends React.PureComponent <Props, State> {
                             />
                         </a>
                         {'.'}
-                        </React.Fragment>
+                    </>
                 }
             />
         );
     }
 
     return null;
-    }
-}
+};
+
+export default React.memo(VersionBar);