OSB-35: fixed bug with img ref (use closure)

LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/AntennaErrorDetails.js

@@ -24,32 +24,27 @@ import {connect} from "react-redux";
 
 
 class ModalPicture extends Component {
-    constructor(props){
-        super(props)
-        this.state = {
-            modal: false,
-            modalUrl: ''
-        };
-        this.img = React.createRef();
-        this.toggleModal = this.toggleModal.bind(this);
-        this.onImgError = this.onImgError.bind(this);
+
+    state = {
+        modal: false,
+        modalUrl: ''
     }
 
-    toggleModal(e){
+    toggleModal = (e) => {
         this.setState({
             modal: !this.state.modal,
             modalUrl: e.currentTarget.src
         });
     }
 
-    onImgError(e){
+    onImgError = (e) => {
         const img = e.currentTarget;
         img.alt = 'Reloading in 2 sec..';
         // let the window figure out if the timeout id is still valid
         if(this.timeout){
             clearTimeout(this.timeout);
         }
-        this.timeout = setTimeout(() => { this.img.current.src = this.img.current.src; }, 2000 );
+        this.timeout = setTimeout(() => { img.src = img.src; }, 2000 );
     }
 
     clearTimeouts() {
@@ -61,7 +56,7 @@ class ModalPicture extends Component {
         this.clearTimeouts();
         return (
             <React.Fragment>
-        <img ref={this.img} src={this.props.url} onClick={this.toggleModal} onError={this.onImgError} title="Click to enlarge" alt="Not present"/>
+        <img src={this.props.url} onClick={this.toggleModal} onError={this.onImgError} title="Click to enlarge" alt="Not present"/>
         <Modal isOpen={this.state.modal} fade={false} size="lg" toggle={this.toggle} className={this.props.className}>
           <ModalHeader toggle={this.toggleModal}></ModalHeader>
           <ModalBody>

LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/AntennaView.js

@@ -15,20 +15,14 @@ import {renderDateRange} from '../utils/utils';
 import './StationTestView.css';
 
 class GenericStatusC extends Component {
-    constructor(props) {
-        super(props);
 
-        this.mouseOver = this.mouseOver.bind(this);
-        this.mouseOut = this.mouseOut.bind(this);
-    }
-
-    mouseOver() {
+    mouseOver = () => {
         if (this.props.data !== undefined && this.props.isPinned === false) {
             this.props.selectAntennaError(this.props.data);
         }
     }
 
-    mouseOut() {
+    mouseOut = () => {
         if (this.props.data !== undefined && this.props.isPinned === false) {
             this.props.selectAntennaError({});
         }
@@ -78,23 +72,25 @@ class GenericStatusC extends Component {
         }
     }
 
-    mouseClick(e) {
+    mouseClick = (e) => {
         this.props.selectAntennaError(this.props.data);
         this.props.pinAntennaError(!this.props.isPinned);
     }
 
+    onContextMenu = (e) => {
+        e.preventDefault();
+    };
+
     render() {
 
         const color = this.props.isGood ? "so-good" : "so-serious";
         const label = this.props.isGood ? "" : this.renderError();
         return (
             <td className={"stv-component-status " + color}
+                onContextMenu={this.onContextMenu}
                 onMouseOver={this.mouseOver}
                 onMouseOut={this.mouseOut}
-                onClick={e => {
-                    this.mouseClick(e)
-                }}>
-
+                onClick={this.mouseClick} >
                 {label}
             </td>);
     }
@@ -113,11 +109,9 @@ const GenericStatus = connect(state => {
 
 
 class AntennaErrorLineC extends Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            isCollapsed: true
-        }
+
+    state = {
+        isCollapsed: true
     }
 
     static composeHeaderLine(data) {