[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,78 +1,63 @@
 // 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 {
+const reloadPage = () => {
-    buildHashOnAppLoad?: string;
+    window.location.reload();
-}
+};
 
-export default class VersionBar extends React.PureComponent <Props, State> {
+const VersionBar = ({
-    constructor(props: Props) {
+    buildHash,
-        super(props);
+}: Props) => {
+    const [buildHashOnAppLoad, setBuildHashOnAppLoad] = useState<string|undefined>(buildHash);
 
-        this.state = {
+    useEffect(() => {
-            buildHashOnAppLoad: props.buildHash,
+        if (!buildHashOnAppLoad && buildHash) {
-        };
+            setBuildHashOnAppLoad(buildHash);
-    }
-
-    static getDerivedStateFromProps(props: Props, state: State) {
-        if (!state.buildHashOnAppLoad && props.buildHash) {
-            return {
-                buildHashOnAppLoad: props.buildHash,
-            };
         }
+    }, [buildHash, buildHashOnAppLoad]);
 
+    if (!buildHashOnAppLoad || buildHashOnAppLoad === buildHash) {
         return null;
     }
 
-    reloadPage = () => {
+    if (buildHashOnAppLoad !== buildHash) {
-        window.location.reload();
+        return (
-    };
+            <AnnouncementBar
-
+                type={AnnouncementBarTypes.ANNOUNCEMENT}
-    render() {
+                message={
-        const {buildHashOnAppLoad} = this.state;
+                    <>
-        const {buildHash} = this.props;
+                        <FormattedMessage
-
+                            id='version_bar.new'
-        if (!buildHashOnAppLoad) {
+                            defaultMessage='A new version of Mattermost is available.'
-            return null;
+                        />
-        }
+                        <a
-
+                            onClick={reloadPage}
-        if (buildHashOnAppLoad !== buildHash) {
+                            style={{marginLeft: '.5rem'}}
-            return (
+                        >
-                <AnnouncementBar
-                    type={AnnouncementBarTypes.ANNOUNCEMENT}
-                    message={
-                        <React.Fragment>
                             <FormattedMessage
-                                id='version_bar.new'
+                                id='version_bar.refresh'
-                                defaultMessage='A new version of Mattermost is available.'
+                                defaultMessage='Refresh the app now'
                             />
-                            <a
+                        </a>
-                                onClick={this.reloadPage}
+                        {'.'}
-                                style={{marginLeft: '.5rem'}}
+                    </>
-                            >
+                }
-                                <FormattedMessage
+            />
-                                    id='version_bar.refresh'
+        );
-                                    defaultMessage='Refresh the app now'
-                                />
-                            </a>
-                            {'.'}
-                        </React.Fragment>
-                    }
-                />
-            );
-        }
-
-        return null;
     }
-}
+
+    return null;
+};
+
+export default React.memo(VersionBar);