fix(ui): rewrite ReloadNeeded component with hooks

ui/src/Components/Grid/ReloadNeeded/index.js

@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React, { useEffect } from "react";
 import PropTypes from "prop-types";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -7,42 +7,30 @@ import { faSpinner } from "@fortawesome/free-solid-svg-icons/faSpinner";
 
 import { CenteredMessage } from "Components/CenteredMessage";
 
-class ReloadNeeded extends Component {
-  static propTypes = {
-    reloadAfter: PropTypes.number.isRequired,
-  };
+const ReloadNeeded = ({ reloadAfter }) => {
+  useEffect(() => {
+    const timer = setTimeout(() => window.location.reload(), reloadAfter);
+    return () => clearTimeout(timer);
+  }, [reloadAfter]);
 
-  reloadApp = () => {
-    window.location.reload();
-  };
-
-  componentDidMount() {
-    const { reloadAfter } = this.props;
-    this.timer = setTimeout(this.reloadApp, reloadAfter);
-  }
-
-  componentWillUnmount() {
-    clearTimeout(this.timer);
-    this.timer = null;
-  }
-
-  render() {
-    return (
-      <CenteredMessage>
-        <div className="container-fluid text-center">
-          <FontAwesomeIcon
-            icon={faExclamationCircle}
-            className="screen-center-icon-big text-danger mb-4"
-          />
-          <p className="lead text-white bg-secondary p-3 rounded text-wrap text-break">
-            <FontAwesomeIcon className="mr-2" icon={faSpinner} spin />
-            All API connection attempts failed. This migth be caused by
-            authentication middleware, will try to reload.
-          </p>
-        </div>
-      </CenteredMessage>
-    );
-  }
-}
+  return (
+    <CenteredMessage>
+      <div className="container-fluid text-center">
+        <FontAwesomeIcon
+          icon={faExclamationCircle}
+          className="screen-center-icon-big text-danger mb-4"
+        />
+        <p className="lead text-white bg-secondary p-3 rounded text-wrap text-break">
+          <FontAwesomeIcon className="mr-2" icon={faSpinner} spin />
+          All API connection attempts failed. This migth be caused by
+          authentication middleware, will try to reload.
+        </p>
+      </div>
+    </CenteredMessage>
+  );
+};
+ReloadNeeded.propTypes = {
+  reloadAfter: PropTypes.number.isRequired,
+};
 
 export { ReloadNeeded };

ui/src/Components/Grid/ReloadNeeded/index.test.js

@@ -35,9 +35,13 @@ describe("<ReloadNeeded />", () => {
     expect(reloadSpy).toBeCalled();
   });
 
-  it("unmounts cleanly", () => {
+  it("stops calling window.location.reload after unmount", () => {
+    const reloadSpy = jest
+      .spyOn(global.window.location, "reload")
+      .mockImplementation(() => {});
     const tree = mount(<ReloadNeeded reloadAfter={100000000} />);
     tree.unmount();
     jest.runOnlyPendingTimers();
+    expect(reloadSpy).not.toBeCalled();
   });
 });