Aufgrund eines Security Updates wird GitLab heute zwischen 14:30 und 15:00 Uhr kurzzeitig nicht zur Verfügung stehen. / Due to a security update GitLab will be temporarily unavailable between 2:30 and 3 today.

Commit e8806892 authored by Sonja Happ's avatar Sonja Happ

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

parents 0dc1365a 6f4604c7
This diff is collapsed.
...@@ -3,51 +3,54 @@ ...@@ -3,51 +3,54 @@
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"dependencies": { "dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.19", "@fortawesome/fontawesome-svg-core": "^1.2.26",
"@fortawesome/free-solid-svg-icons": "^5.9.0", "@fortawesome/free-solid-svg-icons": "^5.12.0",
"@fortawesome/react-fontawesome": "^0.1.4", "@fortawesome/react-fontawesome": "^0.1.8",
"babel-runtime": "^6.26.0", "babel-runtime": "^6.26.0",
"bootstrap": "^4.3.1", "bootstrap": "^4.4.1",
"classnames": "^2.2.6", "classnames": "^2.2.6",
"d3-array": "^2.2.0", "d3-array": "^2.4.0",
"d3-axis": "^1.0.12", "d3-axis": "^1.0.12",
"d3-scale": "^3.0.0", "d3-scale": "^3.2.1",
"d3-scale-chromatic": "^1.3.3", "d3-scale-chromatic": "^1.5.0",
"d3-selection": "^1.4.0", "d3-selection": "^1.4.1",
"d3-shape": "^1.3.5", "d3-shape": "^1.3.7",
"d3-time-format": "^2.1.3", "d3-time-format": "^2.2.3",
"es6-promise": "^4.2.8", "es6-promise": "^4.2.8",
"fibers": "^4.0.2",
"file-saver": "^2.0.2", "file-saver": "^2.0.2",
"flux": "^3.1.3", "flux": "^3.1.3",
"frontend-collective-react-dnd-scrollzone": "^1.0.2", "frontend-collective-react-dnd-scrollzone": "^1.0.2",
"gaugeJS": "^1.3.7", "gaugeJS": "^1.3.7",
"handlebars": "^4.5.1", "handlebars": "^4.7.1",
"immutable": "^4.0.0-rc.12", "immutable": "^4.0.0-rc.12",
"jquery": "^3.4.1", "jquery": "^3.4.1",
"jszip": "^3.2.2", "jszip": "^3.2.2",
"libcimsvg": "git+https://git.rwth-aachen.de/acs/public/cim/pintura-npm-package.git", "libcimsvg": "git+https://git.rwth-aachen.de/acs/public/cim/pintura-npm-package.git",
"lodash": "^4.17.15", "lodash": "^4.17.15",
"node-sass": "^4.13.0",
"prop-types": "^15.7.2", "prop-types": "^15.7.2",
"rc-slider": "^8.6.13", "rc-slider": "^8.7.1",
"react": "^16.8.6", "react": "^16.12.0",
"react-bootstrap": "^1.0.0-beta.9", "react-bootstrap": "^1.0.0-beta.16",
"react-contexify": "^4.1.1", "react-contexify": "^4.1.1",
"react-d3": "^0.4.0", "react-d3": "^0.4.0",
"react-dnd": "^9.3.2", "react-dnd": "^9.5.1",
"react-dnd-html5-backend": "^9.3.2", "react-dnd-html5-backend": "^9.5.1",
"react-dom": "^16.8.6", "react-dom": "^16.12.0",
"react-fullscreenable": "^2.5.1-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-json-view": "^1.19.1",
"react-notification-system": "^0.2.17", "react-notification-system": "^0.2.17",
"react-rnd": "^10.0.0", "react-rnd": "^10.1.4",
"react-router": "^5.0.1", "react-router": "^5.1.2",
"react-router-dom": "^5.0.1", "react-router-dom": "^5.1.2",
"react-scripts": "^3.0.1", "react-scripts": "^3.3.0",
"react-sortable-tree": "^2.6.2", "react-sortable-tree": "^2.7.1",
"react-svg-pan-zoom": "^3.1.0", "react-svg-pan-zoom": "^3.8.0",
"superagent": "^5.1.0", "sass": "^1.24.4",
"typescript": "^3.5.3", "superagent": "^5.2.1",
"typescript": "^3.7.4",
"validator": "^11.1.0" "validator": "^11.1.0"
}, },
"devDependencies": { "devDependencies": {
......
...@@ -68,7 +68,9 @@ class App extends React.Component { ...@@ -68,7 +68,9 @@ class App extends React.Component {
}; };
} }
componentWillMount() { componentDidMount() {
NotificationsDataManager.setSystem(this.refs.notificationSystem);
// if token stored locally, request user // if token stored locally, request user
let token = localStorage.getItem("token"); let token = localStorage.getItem("token");
let currentUser = JSON.parse(localStorage.getItem("currentUser")); let currentUser = JSON.parse(localStorage.getItem("currentUser"));
...@@ -79,9 +81,7 @@ class App extends React.Component { ...@@ -79,9 +81,7 @@ class App extends React.Component {
currentUser: currentUser currentUser: currentUser
}); });
} }
}
componentDidMount() {
// load all simulators and scenarios to fetch data // load all simulators and scenarios to fetch data
// AppDispatcher.dispatch({ // AppDispatcher.dispatch({
// type: 'simulators/start-load', // type: 'simulators/start-load',
...@@ -93,7 +93,7 @@ class App extends React.Component { ...@@ -93,7 +93,7 @@ class App extends React.Component {
// token: this.state.token // token: this.state.token
// }); // });
NotificationsDataManager.setSystem(this.refs.notificationSystem);
} }
showSidebarMenu = () => { showSidebarMenu = () => {
......
...@@ -36,8 +36,10 @@ class EditableHeader extends React.Component { ...@@ -36,8 +36,10 @@ class EditableHeader extends React.Component {
}; };
} }
componentWillReceiveProps(nextProps) { static getDerivedStateFromProps(props, state){
this.setState({ title: nextProps.title }); return {
title: props.title
};
} }
edit = () => { edit = () => {
......
...@@ -45,12 +45,6 @@ class Home extends React.Component { ...@@ -45,12 +45,6 @@ class Home extends React.Component {
return '?'; return '?';
} }
componentWillMount() {
//RestAPI.get('/api/v1/counts').then(response => {
// this.setState({ counts: response });
//});
}
render() { render() {
return ( return (
<div className="home-container"> <div className="home-container">
......
...@@ -32,7 +32,7 @@ class CustomTable extends Component { ...@@ -32,7 +32,7 @@ class CustomTable extends Component {
this.activeInput = null; this.activeInput = null;
this.state = { this.state = {
rows: this.getRows(props), rows: CustomTable.getRows(props),
editCell: [ -1, -1 ] editCell: [ -1, -1 ]
}; };
} }
...@@ -45,7 +45,7 @@ class CustomTable extends Component { ...@@ -45,7 +45,7 @@ class CustomTable extends Component {
this.setState({ editCell: [ column, row ]}); // x, y this.setState({ editCell: [ column, row ]}); // x, y
} }
addCell(data, index, child) { static addCell(data, index, child) {
// add data to cell // add data to cell
let content = null; let content = null;
...@@ -112,7 +112,7 @@ class CustomTable extends Component { ...@@ -112,7 +112,7 @@ class CustomTable extends Component {
} }
if (child.props.checkbox) { 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)} />); 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 { ...@@ -122,12 +122,12 @@ class CustomTable extends Component {
} }
return cell; return cell;
} } // addCell
componentWillReceiveProps(nextProps) { static getDerivedStateFromProps(props, state){
const rows = this.getRows(nextProps); const rows = CustomTable.getRows(props);
this.setState({ rows }); return { rows };
} }
componentDidUpdate() { componentDidUpdate() {
...@@ -147,7 +147,7 @@ class CustomTable extends Component { ...@@ -147,7 +147,7 @@ class CustomTable extends Component {
this.setState({ editCell: [ -1, -1 ] }); this.setState({ editCell: [ -1, -1 ] });
} }
getRows(props) { static getRows(props) {
if (props.data == null) { if (props.data == null) {
return []; return [];
} }
...@@ -156,13 +156,13 @@ class CustomTable extends Component { ...@@ -156,13 +156,13 @@ class CustomTable extends Component {
// check if multiple columns // check if multiple columns
if (Array.isArray(props.children) === false) { if (Array.isArray(props.children) === false) {
// table only has a single column // table only has a single column
return [ this.addCell(data, index, props.children) ]; return [ CustomTable.addCell(data, index, props.children) ];
} }
const row = []; const row = [];
for (let child of props.children) { for (let child of props.children) {
row.push(this.addCell(data, index, child)); row.push(CustomTable.addCell(data, index, child));
} }
return row; return row;
......
...@@ -50,21 +50,21 @@ class SelectFile extends React.Component { ...@@ -50,21 +50,21 @@ class SelectFile extends React.Component {
}); });
} }
componentWillReceiveProps(nextProps) { static getDerivedStateFromProps(props, state){
if (nextProps.value === this.state.selectedSimulator) { if (props.value === state.selectedSimulator) {
return; return null;
} }
let selectedSimulator = nextProps.value; let selectedSimulator = props.value;
if (selectedSimulator == null) { if (selectedSimulator == null) {
if (this.state.simulators.length > 0) { if (state.simulators.length > 0) {
selectedSimulator = this.state.simulators[0]._id; selectedSimulator = state.simulators[0]._id;
} else { } else {
selectedSimulator = ''; selectedSimulator = '';
} }
} }
this.setState({ selectedSimulator }); return {selectedSimulator};
} }
handleChange = event => { handleChange = event => {
...@@ -76,11 +76,11 @@ class SelectFile extends React.Component { ...@@ -76,11 +76,11 @@ class SelectFile extends React.Component {
this.props.onChange(file); this.props.onChange(file);
} }
} };
selectUploadFile = event => { selectUploadFile = event => {
this.setState({ uploadFile: event.target.files[0] }); this.setState({ uploadFile: event.target.files[0] });
} };
startFileUpload = () => { startFileUpload = () => {
// upload file // upload file
...@@ -94,17 +94,17 @@ class SelectFile extends React.Component { ...@@ -94,17 +94,17 @@ class SelectFile extends React.Component {
progressCallback: this.updateUploadProgress, progressCallback: this.updateUploadProgress,
finishedCallback: this.clearProgress finishedCallback: this.clearProgress
}); });
} };
updateUploadProgress = event => { updateUploadProgress = event => {
this.setState({ uploadProgress: parseInt(event.percent.toFixed(), 10) }); this.setState({ uploadProgress: parseInt(event.percent.toFixed(), 10) });
} };
clearProgress = () => { clearProgress = () => {
// select uploaded file // select uploaded file
const selectedFile = this.state.files[this.state.files.length - 1]._id; const selectedFile = this.state.files[this.state.files.length - 1]._id;
this.setState({ selectedFile, uploadProgress: 0 }); this.setState({ selectedFile, uploadProgress: 0 });
} };
render() { render() {
const fileOptions = this.state.files.map(f => const fileOptions = this.state.files.map(f =>
......
...@@ -41,12 +41,15 @@ class SignalMapping extends React.Component { ...@@ -41,12 +41,15 @@ class SignalMapping extends React.Component {
}; };
} }
componentWillReceiveProps(nextProps) { static getDerivedStateFromProps(props, state){
if (nextProps.length === this.state.length && nextProps.signals === this.state.signals) { if (props.length === state.length && props.signals === state.signals) {
return; return null
} }
this.setState({ length: nextProps.length, signals: nextProps.signals }); return{
length: props.length,
signals: props.signals
};
} }
validateLength(){ validateLength(){
......
...@@ -47,7 +47,7 @@ class SimulationModel extends React.Component { ...@@ -47,7 +47,7 @@ class SimulationModel extends React.Component {
}; };
} }
componentWillMount() { componentDidMount() {
AppDispatcher.dispatch({ AppDispatcher.dispatch({
type: 'simulationModels/start-load', type: 'simulationModels/start-load',
data: this.props.match.params.simulationModel, data: this.props.match.params.simulationModel,
......
...@@ -38,21 +38,23 @@ class SelectSimulator extends React.Component { ...@@ -38,21 +38,23 @@ class SelectSimulator extends React.Component {
}; };
} }
componentWillReceiveProps(nextProps) { static getDerivedStateFromProps(props, state){
if (nextProps.value === this.state.selectedSimulator) { if (props.value === state.selectedSimulator) {
return; return null; // no change
} }
let selectedSimulator = nextProps.value; let selectedSimulator = props.value;
if (selectedSimulator == null) { if (selectedSimulator == null) {
if (this.state.simulators.length > 0) { if (state.simulators.length > 0) {
selectedSimulator = this.state.simulators[0].id; selectedSimulator = state.simulators[0].id;
} else { } else {
selectedSimulator = ''; selectedSimulator = '';
} }
} }
this.setState({ selectedSimulator }); return {
selectedSimulator
};
} }
handleChange = event => { handleChange = event => {
...@@ -64,7 +66,7 @@ class SelectSimulator extends React.Component { ...@@ -64,7 +66,7 @@ class SelectSimulator extends React.Component {
this.props.onChange(simulator); this.props.onChange(simulator);
} }
} };
render() { render() {
const simulatorOptions = this.state.simulators.map(s => const simulatorOptions = this.state.simulators.map(s =>
......
...@@ -31,12 +31,15 @@ class SimulatorAction extends React.Component { ...@@ -31,12 +31,15 @@ class SimulatorAction extends React.Component {
}; };
} }
componentWillReceiveProps(nextProps) { static getDerivedStateFromProps(props, state){
if (this.state.selectedAction == null) { if (state.selectedAction == null) {
if (nextProps.actions != null && nextProps.actions.length > 0) { if (props.actions != null && props.actions.length > 0) {
this.setState({ selectedAction: nextProps.actions[0] }); return{
selectedAction: props.actions[0]
};
} }
} }
return null
} }
setAction = id => { setAction = id => {
...@@ -46,7 +49,7 @@ class SimulatorAction extends React.Component { ...@@ -46,7 +49,7 @@ class SimulatorAction extends React.Component {
this.setState({ selectedAction: action }); this.setState({ selectedAction: action });
} }
} }
} };
render() { render() {
const actionList = this.props.actions.map(action => ( const actionList = this.props.actions.map(action => (
......
...@@ -87,7 +87,7 @@ class Simulators extends Component { ...@@ -87,7 +87,7 @@ class Simulators extends Component {
}; };
} }
componentWillMount() { componentDidMount() {
AppDispatcher.dispatch({ AppDispatcher.dispatch({
type: 'simulators/start-load', type: 'simulators/start-load',
token: this.state.sessionToken, token: this.state.sessionToken,
......
...@@ -50,13 +50,14 @@ class Login extends Component { ...@@ -50,13 +50,14 @@ class Login extends Component {
NotificationsDataManager.setSystem(this.refs.notificationSystem); 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 token stored locally, request user
if (nextState.token == null) { if (this.state.token == null) {
const token = localStorage.getItem('token'); const token = localStorage.getItem('token');
const currentUser = localStorage.getItem('currentUser'); const currentUser = localStorage.getItem('currentUser');
if (token != null && token !== '' && nextState.currentUser == null) { if (token != null && token !== '' && this.state.currentUser == null) {
AppDispatcher.dispatch({ AppDispatcher.dispatch({
type: 'users/logged-in', type: 'users/logged-in',
token: token, token: token,
...@@ -65,12 +66,13 @@ class Login extends Component { ...@@ -65,12 +66,13 @@ class Login extends Component {
} }
} else { } else {
// check if logged in // check if logged in
if (nextState.currentUser != null) { if (this.state.currentUser != null) {
// save login in local storage // save login in local storage
localStorage.setItem('token', nextState.token); localStorage.setItem('token', this.state.token);
localStorage.setItem('currentUser', JSON.stringify(nextState.currentUser)); localStorage.setItem('currentUser', JSON.stringify(this.state.currentUser));
} }
} }
} }
render() { render() {
......
...@@ -25,7 +25,7 @@ import { Redirect } from 'react-router-dom'; ...@@ -25,7 +25,7 @@ import { Redirect } from 'react-router-dom';
import AppDispatcher from '../common/app-dispatcher'; import AppDispatcher from '../common/app-dispatcher';
class Logout extends React.Component { class Logout extends React.Component {
componentWillMount() { componentDidMount() {
AppDispatcher.dispatch({ AppDispatcher.dispatch({
type: 'users/logout' type: 'users/logout'
}); });
......
...@@ -35,8 +35,10 @@ class EditWidgetAspectControl extends React.Component { ...@@ -35,8 +35,10 @@ class EditWidgetAspectControl extends React.Component {
}; };
} }
componentWillReceiveProps(nextProps) { static getDerivedStateFromProps(props, state){
this.setState({ widget: nextProps.widget }); return{
widget: props.widget
};
} }
render() { render() {
......
...@@ -35,8 +35,10 @@ class EditWidgetCheckboxControl extends React.Component { ...@@ -35,8 +35,10 @@ class EditWidgetCheckboxControl extends React.Component {
}; };
} }
componentWillReceiveProps(nextProps) { static getDerivedStateFromProps(props, state){
this.setState({ widget: nextProps.widget }); return{
widget: props.widget
};
} }
render() { render() {
......
...@@ -49,9 +49,10 @@ class EditWidgetColorControl extends Component { ...@@ -49,9 +49,10 @@ class EditWidgetColorControl extends Component {
}; };
} }
componentWillReceiveProps(nextProps) { static getDerivedStateFromProps(props, state){
// Update state's widget with props return {
this.setState({ widget: nextProps.widget }); widget: props.widget
};
} }
render() { render() {
......
...@@ -41,8 +41,10 @@ class EditWidgetColorZonesControl extends React.Component { ...@@ -41,8 +41,10 @@ class EditWidgetColorZonesControl extends React.Component {
}; };
} }
componentWillReceiveProps(nextProps) { static getDerivedStateFromProps(props, state){
this.setState({ widget: nextProps.widget }); return {
widget: props.widget
};