Merge branch 'fix-react-lifecycles' into example-dashboard

package.json

@@ -3,51 +3,54 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.19",
-    "@fortawesome/free-solid-svg-icons": "^5.9.0",
-    "@fortawesome/react-fontawesome": "^0.1.4",
+    "@fortawesome/fontawesome-svg-core": "^1.2.26",
+    "@fortawesome/free-solid-svg-icons": "^5.12.0",
+    "@fortawesome/react-fontawesome": "^0.1.8",
     "babel-runtime": "^6.26.0",
-    "bootstrap": "^4.3.1",
+    "bootstrap": "^4.4.1",
     "classnames": "^2.2.6",
-    "d3-array": "^2.2.0",
+    "d3-array": "^2.4.0",
     "d3-axis": "^1.0.12",
-    "d3-scale": "^3.0.0",
-    "d3-scale-chromatic": "^1.3.3",
-    "d3-selection": "^1.4.0",
-    "d3-shape": "^1.3.5",
-    "d3-time-format": "^2.1.3",
+    "d3-scale": "^3.2.1",
+    "d3-scale-chromatic": "^1.5.0",
+    "d3-selection": "^1.4.1",
+    "d3-shape": "^1.3.7",
+    "d3-time-format": "^2.2.3",
     "es6-promise": "^4.2.8",
+    "fibers": "^4.0.2",
     "file-saver": "^2.0.2",
     "flux": "^3.1.3",
     "frontend-collective-react-dnd-scrollzone": "^1.0.2",
     "gaugeJS": "^1.3.7",
-    "handlebars": "^4.5.1",
+    "handlebars": "^4.7.1",
     "immutable": "^4.0.0-rc.12",
     "jquery": "^3.4.1",
     "jszip": "^3.2.2",
     "libcimsvg": "git+https://git.rwth-aachen.de/acs/public/cim/pintura-npm-package.git",
     "lodash": "^4.17.15",
+    "node-sass": "^4.13.0",
     "prop-types": "^15.7.2",
-    "rc-slider": "^8.6.13",
-    "react": "^16.8.6",
-    "react-bootstrap": "^1.0.0-beta.9",
+    "rc-slider": "^8.7.1",
+    "react": "^16.12.0",
+    "react-bootstrap": "^1.0.0-beta.16",
     "react-contexify": "^4.1.1",
     "react-d3": "^0.4.0",
-    "react-dnd": "^9.3.2",
-    "react-dnd-html5-backend": "^9.3.2",
-    "react-dom": "^16.8.6",
+    "react-dnd": "^9.5.1",
+    "react-dnd-html5-backend": "^9.5.1",
+    "react-dom": "^16.12.0",
     "react-fullscreenable": "^2.5.1-0",
-    "react-grid-system": "^4.4.10",
+    "react-grid-system": "^4.4.11",
     "react-json-view": "^1.19.1",
     "react-notification-system": "^0.2.17",
-    "react-rnd": "^10.0.0",
-    "react-router": "^5.0.1",
-    "react-router-dom": "^5.0.1",
-    "react-scripts": "^3.0.1",
-    "react-sortable-tree": "^2.6.2",
-    "react-svg-pan-zoom": "^3.1.0",
-    "superagent": "^5.1.0",
-    "typescript": "^3.5.3",
+    "react-rnd": "^10.1.4",
+    "react-router": "^5.1.2",
+    "react-router-dom": "^5.1.2",
+    "react-scripts": "^3.3.0",
+    "react-sortable-tree": "^2.7.1",
+    "react-svg-pan-zoom": "^3.8.0",
+    "sass": "^1.24.4",
+    "superagent": "^5.2.1",
+    "typescript": "^3.7.4",
     "validator": "^11.1.0"
   },
   "devDependencies": {

src/app.js

@@ -68,7 +68,9 @@ class App extends React.Component {
     };
   }
 
-  componentWillMount() {
+  componentDidMount() {
+    NotificationsDataManager.setSystem(this.refs.notificationSystem);
+
     // if token stored locally, request user
     let token = localStorage.getItem("token");
     let currentUser = JSON.parse(localStorage.getItem("currentUser"));
@@ -79,9 +81,7 @@ class App extends React.Component {
         currentUser: currentUser
       });
     }
-  }
 
-  componentDidMount() {
     // load all simulators and scenarios to fetch data
     // AppDispatcher.dispatch({
     //   type: 'simulators/start-load',
@@ -93,7 +93,7 @@ class App extends React.Component {
     //   token: this.state.token
     // });
 
-    NotificationsDataManager.setSystem(this.refs.notificationSystem);
+
   }
 
   showSidebarMenu = () => {

src/common/editable-header.js

@@ -36,8 +36,10 @@ class EditableHeader extends React.Component {
         };
     }
 
-    componentWillReceiveProps(nextProps) {
-        this.setState({ title: nextProps.title });
+    static getDerivedStateFromProps(props, state){
+      return {
+        title: props.title
+      };
     }
 
     edit = () => {

src/common/home.js

@@ -45,12 +45,6 @@ class Home extends React.Component {
       return '?';
   }
 
-  componentWillMount() {
-    //RestAPI.get('/api/v1/counts').then(response => {
-    //  this.setState({ counts: response });
-    //});
-  }
-
   render() {
     return (
       <div className="home-container">

src/common/table.js

@@ -32,7 +32,7 @@ class CustomTable extends Component {
     this.activeInput = null;
 
     this.state = {
-      rows: this.getRows(props),
+      rows: CustomTable.getRows(props),
       editCell: [ -1, -1 ]
     };
   }
@@ -45,7 +45,7 @@ class CustomTable extends Component {
     this.setState({ editCell: [ column, row ]});  // x, y
   }
 
-  addCell(data, index, child) {
+  static addCell(data, index, child) {
     // add data to cell
     let content = null;
 
@@ -112,7 +112,7 @@ class CustomTable extends Component {
     }
 
     if (child.props.checkbox) {
-      const checkboxKey = this.props.checkboxKey;
+      const checkboxKey = child.props.checkboxKey;
 
       cell.push(<FormCheck className="table-control-checkbox" inline checked={checkboxKey ? data[checkboxKey] : null} onChange={e => child.props.onChecked(index, e)} />);
     }
@@ -122,12 +122,12 @@ class CustomTable extends Component {
     }
 
     return cell;
-  }
+  } // addCell
 
-  componentWillReceiveProps(nextProps) {
-    const rows = this.getRows(nextProps);
+  static getDerivedStateFromProps(props, state){
+    const rows = CustomTable.getRows(props);
 
-    this.setState({ rows });
+    return { rows };
   }
 
   componentDidUpdate() {
@@ -147,7 +147,7 @@ class CustomTable extends Component {
     this.setState({ editCell: [ -1, -1 ] });
   }
 
-  getRows(props) {
+  static getRows(props) {
     if (props.data == null) {
       return [];
     }
@@ -156,13 +156,13 @@ class CustomTable extends Component {
       // check if multiple columns
       if (Array.isArray(props.children) === false) {
         // table only has a single column
-        return [ this.addCell(data, index, props.children) ];
+        return [ CustomTable.addCell(data, index, props.children) ];
       }
 
       const row = [];
 
       for (let child of props.children) {
-        row.push(this.addCell(data, index, child));
+        row.push(CustomTable.addCell(data, index, child));
       }
 
       return row;

src/file/select-file.js

@@ -29,123 +29,123 @@ import LoginStore from '../user/login-store';
 import AppDispatcher from '../common/app-dispatcher';
 
 class SelectFile extends React.Component {
-    static getStores() {
-        return [ FileStore, LoginStore ];
+  static getStores() {
+      return [ FileStore, LoginStore ];
+  }
+
+  static calculateState() {
+      return {
+          files: FileStore.getState(),
+          sessionToken: LoginStore.getState().token,
+          selectedFile: '',
+          uploadFile: null,
+          uploadProgress: 0
+      };
+  }
+
+  componentDidMount() {
+      AppDispatcher.dispatch({
+          type: 'files/start-load',
+          token: this.state.sessionToken
+      });
+  }
+
+  static getDerivedStateFromProps(props, state){
+    if (props.value === state.selectedSimulator) {
+      return null;
     }
 
-    static calculateState() {
-        return {
-            files: FileStore.getState(),
-            sessionToken: LoginStore.getState().token,
-            selectedFile: '',
-            uploadFile: null,
-            uploadProgress: 0
-        };
+    let selectedSimulator = props.value;
+    if (selectedSimulator == null) {
+      if (state.simulators.length > 0) {
+        selectedSimulator = state.simulators[0]._id;
+      } else {
+        selectedSimulator = '';
+      }
     }
 
-    componentDidMount() {
-        AppDispatcher.dispatch({
-            type: 'files/start-load',
-            token: this.state.sessionToken
-        });
-    }
-
-    componentWillReceiveProps(nextProps) {
-        if (nextProps.value === this.state.selectedSimulator) {
-            return;
-        }
-
-        let selectedSimulator = nextProps.value;
-        if (selectedSimulator == null) {
-            if (this.state.simulators.length > 0) {
-                selectedSimulator = this.state.simulators[0]._id;
-            } else {
-                selectedSimulator = '';
-            }
-        }
-
-        this.setState({ selectedSimulator });
-    }
-
-    handleChange = event => {
-        this.setState({ selectedFile: event.target.value });
-
-        // send file to callback
-        if (this.props.onChange != null) {
-            const file = this.state.files.find(f => f._id === event.target.value);
-
-            this.props.onChange(file);
-        }
-    }
-
-    selectUploadFile = event => {
-        this.setState({ uploadFile: event.target.files[0] });
-    }
-
-    startFileUpload = () => {
-        // upload file
-        const formData = new FormData();
-        formData.append(0, this.state.uploadFile);
-
-        AppDispatcher.dispatch({
-            type: 'files/start-upload',
-            data: formData,
-            token: this.state.sessionToken,
-            progressCallback: this.updateUploadProgress,
-            finishedCallback: this.clearProgress
-        });
-    }
-
-    updateUploadProgress = event => {
-        this.setState({ uploadProgress: parseInt(event.percent.toFixed(), 10) });
-    }
-
-    clearProgress = () => {
-        // select uploaded file
-        const selectedFile = this.state.files[this.state.files.length - 1]._id;
-        this.setState({ selectedFile, uploadProgress: 0 });
-    }
-
-    render() {
-        const fileOptions = this.state.files.map(f =>
-            <option key={f._id} value={f._id}>{f.name}</option>
-        );
-
-        const progressBarStyle = {
-            marginLeft: '100px',
-            marginTop: '-25px'
-        };
-
-        return <div>
-            <FormGroup>
-                <Col componentClass={FormLabel} sm={3} md={2}>
-                    {this.props.name}
-                </Col>
-
-                <Col sm={9} md={10}>
-                    <FormControl disabled={this.props.disabled} componentClass='select' placeholder='Select file' onChange={this.handleChange}>
-                        {fileOptions}
-                    </FormControl>
-                </Col>
-            </FormGroup>
-
-            <FormGroup>
-                <Col sm={9} md={10} smOffset={3} mdOffset={2}>
-                    <FormControl disabled={this.props.disabled} type='file' onChange={this.selectUploadFile} />
-                </Col>
-            </FormGroup>
-
-            <FormGroup>
-                <Col sm={9} md={10} smOffset={3} mdOffset={2}>
-                    <Button disabled={this.props.disabled} bsSize='small' onClick={this.startFileUpload}>
-                        Upload file
-                    </Button>
-
-                    <ProgressBar striped active now={this.state.uploadProgress} label={this.state.uploadProgress + '%'} style={progressBarStyle} />
-                </Col>
-            </FormGroup>
-        </div>;
-    }
+    return {selectedSimulator};
+  }
+
+  handleChange = event => {
+      this.setState({ selectedFile: event.target.value });
+
+      // send file to callback
+      if (this.props.onChange != null) {
+          const file = this.state.files.find(f => f._id === event.target.value);
+
+          this.props.onChange(file);
+      }
+  };
+
+  selectUploadFile = event => {
+      this.setState({ uploadFile: event.target.files[0] });
+  };
+
+  startFileUpload = () => {
+      // upload file
+      const formData = new FormData();
+      formData.append(0, this.state.uploadFile);
+
+      AppDispatcher.dispatch({
+          type: 'files/start-upload',
+          data: formData,
+          token: this.state.sessionToken,
+          progressCallback: this.updateUploadProgress,
+          finishedCallback: this.clearProgress
+      });
+  };
+
+  updateUploadProgress = event => {
+      this.setState({ uploadProgress: parseInt(event.percent.toFixed(), 10) });
+  };
+
+  clearProgress = () => {
+      // select uploaded file
+      const selectedFile = this.state.files[this.state.files.length - 1]._id;
+      this.setState({ selectedFile, uploadProgress: 0 });
+  };
+
+  render() {
+      const fileOptions = this.state.files.map(f =>
+          <option key={f._id} value={f._id}>{f.name}</option>
+      );
+
+      const progressBarStyle = {
+          marginLeft: '100px',
+          marginTop: '-25px'
+      };
+
+      return <div>
+          <FormGroup>
+              <Col componentClass={FormLabel} sm={3} md={2}>
+                  {this.props.name}
+              </Col>
+
+              <Col sm={9} md={10}>
+                  <FormControl disabled={this.props.disabled} componentClass='select' placeholder='Select file' onChange={this.handleChange}>
+                      {fileOptions}
+                  </FormControl>
+              </Col>
+          </FormGroup>
+
+          <FormGroup>
+              <Col sm={9} md={10} smOffset={3} mdOffset={2}>
+                  <FormControl disabled={this.props.disabled} type='file' onChange={this.selectUploadFile} />
+              </Col>
+          </FormGroup>
+
+          <FormGroup>
+              <Col sm={9} md={10} smOffset={3} mdOffset={2}>
+                  <Button disabled={this.props.disabled} bsSize='small' onClick={this.startFileUpload}>
+                      Upload file
+                  </Button>
+
+                  <ProgressBar striped active now={this.state.uploadProgress} label={this.state.uploadProgress + '%'} style={progressBarStyle} />
+              </Col>
+          </FormGroup>
+      </div>;
+  }
 }
 
 let fluxContainerConverter = require('../common/FluxContainerConverter');

src/simulationmodel/signal-mapping.js

@@ -41,12 +41,15 @@ class SignalMapping extends React.Component {
         };
     }
 
-    componentWillReceiveProps(nextProps) {
-        if (nextProps.length === this.state.length && nextProps.signals === this.state.signals) {
-            return;
-        }
-
-        this.setState({ length: nextProps.length, signals: nextProps.signals });
+    static getDerivedStateFromProps(props, state){
+      if (props.length === state.length && props.signals === state.signals) {
+        return null
+      }
+
+      return{
+        length: props.length,
+        signals: props.signals
+      };
     }
 
     validateLength(){

src/simulationmodel/simulation-model.js

@@ -47,7 +47,7 @@ class SimulationModel extends React.Component {
         };
     }
 
-    componentWillMount() {
+    componentDidMount() {
         AppDispatcher.dispatch({
             type: 'simulationModels/start-load',
             data: this.props.match.params.simulationModel,

src/simulator/select-simulator.js

@@ -38,21 +38,23 @@ class SelectSimulator extends React.Component {
         };
     }
 
-    componentWillReceiveProps(nextProps) {
-        if (nextProps.value === this.state.selectedSimulator) {
-            return;
-        }
+    static getDerivedStateFromProps(props, state){
+      if (props.value === state.selectedSimulator) {
+        return null; // no change
+      }
 
-        let selectedSimulator = nextProps.value;
-        if (selectedSimulator == null) {
-            if (this.state.simulators.length > 0) {
-                selectedSimulator = this.state.simulators[0].id;
-            } else {
-                selectedSimulator = '';
-            }
+      let selectedSimulator = props.value;
+      if (selectedSimulator == null) {
+        if (state.simulators.length > 0) {
+          selectedSimulator = state.simulators[0].id;
+        } else {
+          selectedSimulator = '';
         }
+      }
 
-        this.setState({ selectedSimulator });
+      return {
+        selectedSimulator
+      };
     }
 
     handleChange = event => {
@@ -64,7 +66,7 @@ class SelectSimulator extends React.Component {
 
             this.props.onChange(simulator);
         }
-    }
+    };
 
     render() {
         const simulatorOptions = this.state.simulators.map(s =>

src/simulator/simulator-action.js

@@ -31,12 +31,15 @@ class SimulatorAction extends React.Component {
         };
     }
 
-    componentWillReceiveProps(nextProps) {
-        if (this.state.selectedAction == null) {
-            if (nextProps.actions != null && nextProps.actions.length > 0) {
-                this.setState({ selectedAction: nextProps.actions[0] });
-            }
+    static getDerivedStateFromProps(props, state){
+      if (state.selectedAction == null) {
+        if (props.actions != null && props.actions.length > 0) {
+          return{
+            selectedAction: props.actions[0]
+          };
         }
+      }
+      return null
     }
 
     setAction = id => {
@@ -46,7 +49,7 @@ class SimulatorAction extends React.Component {
                 this.setState({ selectedAction: action });
             }
         }
-    }
+    };
 
     render() {
         const actionList = this.props.actions.map(action => (

src/simulator/simulators.js

@@ -87,7 +87,7 @@ class Simulators extends Component {
     };
   }
 
-  componentWillMount() {
+  componentDidMount() {
     AppDispatcher.dispatch({
       type: 'simulators/start-load',
       token: this.state.sessionToken,

src/user/login.js

@@ -50,13 +50,14 @@ class Login extends Component {
     NotificationsDataManager.setSystem(this.refs.notificationSystem);
   }
 
-  componentWillUpdate(nextProps, nextState) {
+  componentDidUpdate(prevProps: Readonly<P>, prevState: Readonly<S>, snapshot: SS): void {
+
     // if token stored locally, request user
-    if (nextState.token == null) {
+    if (this.state.token == null) {
       const token = localStorage.getItem('token');
       const currentUser = localStorage.getItem('currentUser');
 
-      if (token != null && token !== '' && nextState.currentUser == null) {
+      if (token != null && token !== '' && this.state.currentUser == null) {
         AppDispatcher.dispatch({
           type: 'users/logged-in',
           token: token,
@@ -65,12 +66,13 @@ class Login extends Component {
       }
     } else {
       // check if logged in
-      if (nextState.currentUser != null) {
+      if (this.state.currentUser != null) {
         // save login in local storage
-        localStorage.setItem('token', nextState.token);
-        localStorage.setItem('currentUser', JSON.stringify(nextState.currentUser));
+        localStorage.setItem('token', this.state.token);
+        localStorage.setItem('currentUser', JSON.stringify(this.state.currentUser));
       }
     }
+
   }
 
   render() {

src/user/logout.js

@@ -25,7 +25,7 @@ import { Redirect } from 'react-router-dom';
 import AppDispatcher from '../common/app-dispatcher';
 
 class Logout extends React.Component {
-  componentWillMount() {
+  componentDidMount() {
     AppDispatcher.dispatch({
       type: 'users/logout'
     });

src/widget/edit-widget-aspect-control.js

@@ -35,8 +35,10 @@ class EditWidgetAspectControl extends React.Component {
     };
   }
 
-  componentWillReceiveProps(nextProps) {
-    this.setState({ widget: nextProps.widget });
+  static getDerivedStateFromProps(props, state){
+    return{
+      widget: props.widget
+    };
   }
 
   render() {

src/widget/edit-widget-checkbox-control.js

@@ -35,8 +35,10 @@ class EditWidgetCheckboxControl extends React.Component {
     };
   }
 
-  componentWillReceiveProps(nextProps) {
-    this.setState({ widget: nextProps.widget });
+  static getDerivedStateFromProps(props, state){
+    return{
+      widget: props.widget
+    };
   }
 
   render() {

src/widget/edit-widget-color-control.js

@@ -49,9 +49,10 @@ class EditWidgetColorControl extends Component {
     };
   }
 
-  componentWillReceiveProps(nextProps) {
-      // Update state's widget with props
-    this.setState({ widget: nextProps.widget });
+  static getDerivedStateFromProps(props, state){
+    return {
+      widget: props.widget
+    };
   }
 
   render() {

src/widget/edit-widget-color-zones-control.js

@@ -41,8 +41,10 @@ class EditWidgetColorZonesControl extends React.Component {
     };
   }
 
-  componentWillReceiveProps(nextProps) {
-    this.setState({ widget: nextProps.widget });
+  static getDerivedStateFromProps(props, state){
+    return {
+      widget: props.widget
+    };
   }
 
   addZone = () => {

src/widget/edit-widget-html-content.js

@@ -36,9 +36,10 @@ class EditWidgetHTMLContent extends React.Component {
   event.stopPropagation();
   }
 
-  componentWillReceiveProps(nextProps) {
-    // Update state's widget with props
-    this.setState({ widget: nextProps.widget });
+  static getDerivedStateFromProps(props, state){
+    return {
+      widget: props.widget
+    };
   }
 
   render() {

src/widget/edit-widget-image-control.js

@@ -39,8 +39,10 @@ class EditImageWidgetControl extends React.Component {
     };
   }
 
-  componen