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 @@
"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": {
......
......@@ -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 = () => {
......
......@@ -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 = () => {
......
......@@ -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">
......
......@@ -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;
......
......@@ -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');
......
......@@ -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(){
......
......@@ -47,7 +47,7 @@ class SimulationModel extends React.Component {
};
}
componentWillMount() {
componentDidMount() {
AppDispatcher.dispatch({
type: 'simulationModels/start-load',
data: this.props.match.params.simulationModel,
......
......@@ -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 =>
......
......@@ -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 => (
......
......@@ -87,7 +87,7 @@ class Simulators extends Component {
};
}
componentWillMount() {
componentDidMount() {
AppDispatcher.dispatch({
type: 'simulators/start-load',
token: this.state.sessionToken,
......
......@@ -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() {
......
......@@ -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'
});
......
......@@ -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() {
......
......@@ -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() {
......
......@@ -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() {
......
......@@ -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 = () => {
......
......@@ -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() {
......
......@@ -39,8 +39,10 @@ class EditImageWidgetControl extends React.Component {
};
}
componentWillReceiveProps(nextProps) {
this.setState({ widget: nextProps.widget });
static getDerivedStateFromProps(props, state){
return {
widget: props.widget
};
}
startFileUpload = () => {
......
......@@ -35,8 +35,10 @@ class EditWidgetMinMaxControl extends React.Component {
}
}
componentWillReceiveProps(nextProps) {