Cleanup/improve Connection Lost Dialog

Author: jbflo

ui/src/containers/ConnectionLostDialog.jsx

@@ -1,88 +1,26 @@
-/* eslint-disable react/jsx-handler-names */
-/* eslint-disable react/no-string-refs */
 import React from 'react';
-import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
+import { useSelector } from 'react-redux';
 import { Modal, Button } from 'react-bootstrap';
-import { showConnectionLostDialog } from '../actions/general';
 
-export class ConnectionLostDialog extends React.Component {
-  constructor(props) {
-    super(props);
-    this.accept = this.accept.bind(this);
-    this.reject = this.reject.bind(this);
-    this.intervalCb = this.intervalCb.bind(this);
-    this.seconds = 60;
-    this.timerid = undefined;
-  }
-
-  intervalCb() {
-    this.seconds--;
-
-    if (this.refs.countdown) {
-      this.refs.countdown.innerHTML = this.seconds;
-    }
-
-    if (this.seconds < 1) {
-      this.seconds = 0;
-      this.accept();
-    }
-  }
-
-  accept() {
-    this.forceUpdate();
-  }
-
-  reject() {
-    this.props.hide();
-  }
-
-  render() {
-    this.seconds = 60;
-
-    if (this.timerid) {
-      clearInterval(this.timerid);
-    }
-
-    this.timerid = setInterval(this.intervalCb, 1000);
-    setTimeout(() => {
-      clearInterval(this.timerid);
-    }, this.seconds * 1000);
-
-    return (
-      <Modal show={this.props.show} onHide={this.props.hide}>
-        <Modal.Header>
-          <Modal.Title>Connection lost</Modal.Title>
-        </Modal.Header>
-        <Modal.Body>
-          Ooops ! There seems to be a problem with the internet connection, the
-          connection to the server was lost. Trying to reconnect in{' '}
-          <span ref="countdown">{this.seconds}</span> s
-        </Modal.Body>
-        <Modal.Footer>
-          <Button onClick={this.accept}> Try again </Button>
-        </Modal.Footer>
-      </Modal>
-    );
-  }
-}
-
-function mapStateToProps(state) {
-  return {
-    show: state.general.showConnectionLostDialog,
-  };
-}
-
-function mapDispatchToProps(dispatch) {
-  return {
-    hide: bindActionCreators(
-      showConnectionLostDialog.bind(null, false),
-      dispatch,
-    ),
-  };
+export function ConnectionLostDialog() {
+  const show = useSelector((state) => state.general.showConnectionLostDialog);
+
+  return (
+    <Modal show={show}>
+      <Modal.Header>
+        <Modal.Title>Connection lost</Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        Trying to reconnect now...
+        <br />
+        If the issue persists, please check your Internet connection or reload
+        the page.
+      </Modal.Body>
+      <Modal.Footer>
+        <Button onClick={() => window.location.reload(true)}> Reload </Button>
+      </Modal.Footer>
+    </Modal>
+  );
 }
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps,
-)(ConnectionLostDialog);
+export default ConnectionLostDialog;