Update all dependencies to lastest version

Remove prop-types from all components
Updating to react-router v4 needed to restructure the routes

package.json

@@ -15,7 +15,7 @@
     "flux": "^3.1.2",
     "gaugeJS": "^1.3.2",
     "immutable": "^3.8.1",
-    "rc-slider": "^7.0.1",
+    "rc-slider": "^8.3.0",
     "react": "^15.4.2",
     "react-bootstrap": "^0.31.1",
     "react-contextmenu": "^2.3.0",
@@ -24,14 +24,14 @@
     "react-dnd-html5-backend": "^2.2.4",
     "react-dom": "^15.4.2",
     "react-notification-system": "^0.2.13",
-    "react-rnd": "^4.2.2",
-    "react-router": "^3.0.2",
+    "react-rnd": "^5.0.9",
+    "react-router": "^4.1.2",
     "react-sortable-tree": "^0.1.19",
     "superagent": "^3.5.0"
   },
   "devDependencies": {
-    "chai": "^3.5.0",
-    "react-scripts": "0.9.3"
+    "chai": "^4.1.0",
+    "react-scripts": "1.0.10"
   },
   "scripts": {
     "start": "react-scripts start",

src/components/dialog/dialog.js

@@ -19,17 +19,10 @@
  * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
  ******************************************************************************/
 
-import React, { Component, PropTypes } from 'react';
+import React from 'react';
 import { Modal, Button } from 'react-bootstrap';
 
-class Dialog extends Component {
-  static propTypes = {
-    title: PropTypes.string.isRequired,
-    show: PropTypes.bool.isRequired,
-    buttonTitle: PropTypes.string.isRequired,
-    onClose: PropTypes.func.isRequired
-  };
-
+class Dialog extends React.Component {
   closeModal() {
     this.props.onClose(false);
   }

src/components/dialog/edit-project.js

@@ -19,19 +19,12 @@
  * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
  ******************************************************************************/
 
-import React, { Component, PropTypes } from 'react';
+import React from 'react';
 import { FormGroup, FormControl, ControlLabel } from 'react-bootstrap';
 
 import Dialog from './dialog';
 
-class EditProjectDialog extends Component {
-  static propTypes = {
-    show: PropTypes.bool.isRequired,
-    onClose: PropTypes.func.isRequired,
-    project: PropTypes.object.isRequired,
-    simulations: PropTypes.array.isRequired
-  };
-
+class EditProjectDialog extends React.Component {
   valid: true;
 
   constructor(props) {

src/components/dialog/edit-simulation-model.js

@@ -19,21 +19,14 @@
  * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
  ******************************************************************************/
 
-import React, { Component, PropTypes } from 'react';
+import React from 'react';
 import { FormGroup, FormControl, ControlLabel } from 'react-bootstrap';
 
 import Table from '../table';
 import TableColumn from '../table-column';
 import Dialog from './dialog';
 
-class EditSimulationModelDialog extends Component {
-  static propTypes = {
-    show: PropTypes.bool.isRequired,
-    onClose: PropTypes.func.isRequired,
-    data: PropTypes.object.isRequired,
-    nodes: PropTypes.array.isRequired
-  };
-
+class EditSimulationModelDialog extends React.Component {
   valid: false;
 
   constructor(props) {

src/components/dialog/edit-simulation.js

@@ -19,18 +19,12 @@
  * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
  ******************************************************************************/
 
-import React, { Component, PropTypes } from 'react';
+import React from 'react';
 import { FormGroup, FormControl, ControlLabel } from 'react-bootstrap';
 
 import Dialog from './dialog';
 
-class EditSimulationDialog extends Component {
-  static propTypes = {
-    show: PropTypes.bool.isRequired,
-    onClose: PropTypes.func.isRequired,
-    simulation: PropTypes.object.isRequired
-  };
-
+class EditSimulationDialog extends React.Component {
   valid: false;
 
   constructor(props) {

src/components/dialog/edit-simulator.js

@@ -19,18 +19,12 @@
  * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
  ******************************************************************************/
 
-import React, { Component, PropTypes } from 'react';
+import React from 'react';
 import { FormGroup, FormControl, ControlLabel } from 'react-bootstrap';
 
 import Dialog from './dialog';
 
-class EditSimulatorDialog extends Component {
-  static propTypes = {
-    show: PropTypes.bool.isRequired,
-    onClose: PropTypes.func.isRequired,
-    simulator: PropTypes.object.isRequired
-  };
-
+class EditSimulatorDialog extends React.Component {
   valid: false;
 
   constructor(props) {

src/components/dialog/edit-user.js

@@ -19,18 +19,12 @@
  * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
  ******************************************************************************/
 
-import React, { Component, PropTypes } from 'react';
+import React from 'react';
 import { FormGroup, FormControl, ControlLabel } from 'react-bootstrap';
 
 import Dialog from './dialog';
 
-class EditUserDialog extends Component {
-  static propTypes = {
-    show: PropTypes.bool.isRequired,
-    onClose: PropTypes.func.isRequired,
-    user: PropTypes.object.isRequired
-  };
-
+class EditUserDialog extends React.Component {
   valid: true;
 
   constructor(props) {

src/components/dialog/edit-visualization.js

@@ -19,18 +19,12 @@
  * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
  ******************************************************************************/
 
-import React, { Component, PropTypes } from 'react';
+import React from 'react';
 import { FormGroup, FormControl, ControlLabel } from 'react-bootstrap';
 
 import Dialog from './dialog';
 
-class EditVisualizationDialog extends Component {
-  static propTypes = {
-    show: PropTypes.bool.isRequired,
-    onClose: PropTypes.func.isRequired,
-    visualization: PropTypes.object.isRequired
-  };
-
+class EditVisualizationDialog extends React.Component {
   valid: false;
 
   constructor(props) {

src/components/dialog/edit-widget-control-creator.js

@@ -37,7 +37,7 @@ export default function createControls(widgetType = null, widget = null, session
     var dialogControls = [];
 
     switch(widgetType) {
-        case 'Value': {
+        case 'Value':
             let valueBoundOnChange = (e) => {
                 handleChange([e, {target: {id: 'signal', value: 0}}]);
             }
@@ -45,10 +45,9 @@ export default function createControls(widgetType = null, widget = null, session
                 <EditWidgetSimulatorControl key={1} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => valueBoundOnChange(e)} />,
                 <EditWidgetSignalControl key={2} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />,
                 <EditWidgetTextSizeControl key={3} widget={widget} handleChange={e => handleChange(e)} />
-            )
-        }
+            );
         break;
-        case 'Plot': {
+        case 'Plot':
             let plotBoundOnChange = (e) => {
                 handleChange([e, {target: {id: 'signals', value: []}}]);
             }
@@ -56,54 +55,54 @@ export default function createControls(widgetType = null, widget = null, session
                 <EditWidgetTimeControl key={1} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />,
                 <EditWidgetSimulatorControl key={2} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => plotBoundOnChange(e)} />,
                 <EditWidgetSignalsControl key={3} controlId={'signals'} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />,
-                <EditWidgetTextControl key={4} controlId={'ylabel'} label={'Y-Axis name'} placeholder={'Enter a name for the y-axis'} widget={widget} handleChange={(e) => handleChange(e)} />)
-            }
+                <EditWidgetTextControl key={4} controlId={'ylabel'} label={'Y-Axis name'} placeholder={'Enter a name for the y-axis'} widget={widget} handleChange={(e) => handleChange(e)} />
+            );
             break;
-        case 'Table': {
+        case 'Table':
             dialogControls.push(
-                <EditWidgetSimulatorControl key={1} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />)
-            }
+                <EditWidgetSimulatorControl key={1} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />
+            );
             break;
-        case 'Image': {
+        case 'Image':
             dialogControls.push(
                 <EditImageWidgetControl key={1} sessionToken={sessionToken} widget={widget} files={files} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />,
-                <EditWidgetAspectControl key={2} widget={widget} handleChange={e => handleChange(e)} />);
-            }
+                <EditWidgetAspectControl key={2} widget={widget} handleChange={e => handleChange(e)} />
+            );            
             break;
-        case 'Gauge': {
+        case 'Gauge':
             let gaugeBoundOnChange = (e) => {
                 handleChange([e, {target: {id: 'signal', value: ''}}]);
             }
             dialogControls.push(
                 <EditWidgetSimulatorControl key={1} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => gaugeBoundOnChange(e) } />,
-                <EditWidgetSignalControl key={2} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />)
-            }
+                <EditWidgetSignalControl key={2} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />
+            );
             break;
-        case 'PlotTable': {
+        case 'PlotTable':
             let plotTableBoundOnChange = (e) => {
                 handleChange([e, {target: {id: 'preselectedSignals', value: []}}]);
             }
             dialogControls.push(
                 <EditWidgetSimulatorControl key={1} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => plotTableBoundOnChange(e)} />,
                 <EditWidgetSignalsControl key={2} controlId={'preselectedSignals'} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />,
-                <EditWidgetTextControl key={3} controlId={'ylabel'} label={'Y-Axis'} placeholder={'Enter a name for the Y-axis'} widget={widget} handleChange={(e) => handleChange(e)} />)
-            }
+                <EditWidgetTextControl key={3} controlId={'ylabel'} label={'Y-Axis'} placeholder={'Enter a name for the Y-axis'} widget={widget} handleChange={(e) => handleChange(e)} />
+            );
             break;
-        case 'Slider': {
+        case 'Slider':
             dialogControls.push(
-                <EditWidgetOrientation key={1} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />)
-            }
+                <EditWidgetOrientation key={1} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />
+            );
             break;
-        case 'Button': {
+        case 'Button':
             dialogControls.push(
                 <EditWidgetColorControl key={1} widget={widget} controlId={'background_color'} label={'Background'} validate={(id) => validateForm(id)} handleChange={(e) => handleChange(e)} />,
-                <EditWidgetColorControl key={2} widget={widget} controlId={'font_color'} label={'Font color'} validate={(id) => validateForm(id)} handleChange={(e) => handleChange(e)} />)
-            }
+                <EditWidgetColorControl key={2} widget={widget} controlId={'font_color'} label={'Font color'} validate={(id) => validateForm(id)} handleChange={(e) => handleChange(e)} />
+            );
             break;
-        case 'Box': {
+        case 'Box':
             dialogControls.push(
-                <EditWidgetColorControl key={1} widget={widget} controlId={'border_color'} label={'Border color'} validate={(id) => validateForm(id)} handleChange={(e) => handleChange(e)} />)
-            }
+                <EditWidgetColorControl key={1} widget={widget} controlId={'border_color'} label={'Border color'} validate={(id) => validateForm(id)} handleChange={(e) => handleChange(e)} />
+            );
             break;
         case 'Label':
             dialogControls.push(

src/components/dialog/edit-widget.js

@@ -19,20 +19,14 @@
  * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
  ******************************************************************************/
 
-import React, { Component, PropTypes } from 'react';
+import React from 'react';
 //import { FormGroup, FormControl, ControlLabel } from 'react-bootstrap';
 
 import Dialog from './dialog';
 
 import createControls from './edit-widget-control-creator';
 
-class EditWidgetDialog extends Component {
-  static propTypes = {
-    sessionToken: PropTypes.string.isRequired,
-    show: PropTypes.bool.isRequired,
-    onClose: PropTypes.func.isRequired
-  };
-
+class EditWidgetDialog extends React.Component {
   valid: true;
 
   constructor(props) {

src/components/dialog/new-project.js

@@ -19,18 +19,12 @@
  * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
  ******************************************************************************/
 
-import React, { Component, PropTypes } from 'react';
+import React from 'react';
 import { FormGroup, FormControl, ControlLabel } from 'react-bootstrap';
 
 import Dialog from './dialog';
 
-class NewProjectDialog extends Component {
-  static propTypes = {
-    show: PropTypes.bool.isRequired,
-    onClose: PropTypes.func.isRequired,
-    simulations: PropTypes.array.isRequired
-  };
-
+class NewProjectDialog extends React.Component {
   valid: false;
 
   constructor(props) {

src/components/dialog/new-simulation-model.js

@@ -19,20 +19,14 @@
  * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
  ******************************************************************************/
 
-import React, { Component, PropTypes } from 'react';
+import React from 'react';
 import { FormGroup, FormControl, ControlLabel, HelpBlock } from 'react-bootstrap';
 
 import Table from '../table';
 import TableColumn from '../table-column';
 import Dialog from './dialog';
 
-class NewSimulationModelDialog extends Component {
-  static propTypes = {
-    show: PropTypes.bool.isRequired,
-    onClose: PropTypes.func.isRequired,
-    nodes: PropTypes.array.isRequired
-  };
-
+class NewSimulationModelDialog extends React.Component {
   valid: false;
 
   constructor(props) {

src/components/dialog/new-simulation.js

@@ -19,17 +19,12 @@
  * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
  ******************************************************************************/
 
-import React, { Component, PropTypes } from 'react';
+import React from 'react';
 import { FormGroup, FormControl, ControlLabel } from 'react-bootstrap';
 
 import Dialog from './dialog';
 
-class NewSimulationDialog extends Component {
-  static propTypes = {
-    show: PropTypes.bool.isRequired,
-    onClose: PropTypes.func.isRequired
-  };
-
+class NewSimulationDialog extends React.Component {
   valid: false;
 
   constructor(props) {

src/components/dialog/new-simulator.js

@@ -19,17 +19,12 @@
  * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
  ******************************************************************************/
 
-import React, { Component, PropTypes } from 'react';
+import React from 'react';
 import { FormGroup, FormControl, ControlLabel } from 'react-bootstrap';
 
 import Dialog from './dialog';
 
-class NewSimulatorDialog extends Component {
-  static propTypes = {
-    show: PropTypes.bool.isRequired,
-    onClose: PropTypes.func.isRequired
-  };
-
+class NewSimulatorDialog extends React.Component {
   valid: false;
 
   constructor(props) {

src/components/dialog/new-user.js

@@ -19,17 +19,12 @@
  * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
  ******************************************************************************/
 
-import React, { Component, PropTypes } from 'react';
+import React from 'react';
 import { FormGroup, FormControl, ControlLabel, HelpBlock } from 'react-bootstrap';
 
 import Dialog from './dialog';
 
-class NewUserDialog extends Component {
-  static propTypes = {
-    show: PropTypes.bool.isRequired,
-    onClose: PropTypes.func.isRequired
-  };
-
+class NewUserDialog extends React.Component {
   valid: false;
 
   constructor(props) {

src/components/dialog/new-visualization.js

@@ -19,17 +19,12 @@
  * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
  ******************************************************************************/
 
-import React, { Component, PropTypes } from 'react';
+import React from 'react';
 import { FormGroup, FormControl, ControlLabel } from 'react-bootstrap';
 
 import Dialog from './dialog';
 
-class NewVisualzationDialog extends Component {
-  static propTypes = {
-    show: PropTypes.bool.isRequired,
-    onClose: PropTypes.func.isRequired
-  };
-
+class NewVisualzationDialog extends React.Component {
   valid: false;
 
   constructor(props) {

src/components/dropzone.js

@@ -19,7 +19,7 @@
  * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
  ******************************************************************************/
 
-import React, { Component, PropTypes } from 'react';
+import React from 'react';
 import { DropTarget } from 'react-dnd';
 import classNames from 'classnames';
 
@@ -59,14 +59,7 @@ function collect(connect, monitor) {
   };
 }
 
-class Dropzone extends Component {
-  static propTypes = {
-    connectDropTarget: PropTypes.func.isRequired,
-    isOver: PropTypes.bool.isRequired,
-    canDrop: PropTypes.bool.isRequired,
-    onDrop: PropTypes.func.isRequired
-  };
-
+class Dropzone extends React.Component {
   render() {
     var toolboxClass = classNames({
       'box-content': true,

src/components/menu-sidebar.js

@@ -20,7 +20,7 @@
  ******************************************************************************/
 
 import React, { Component } from 'react';
-import { Link } from 'react-router';
+import { NavLink } from 'react-router-dom';
 
 class SidebarMenu extends Component {
   render() {
@@ -29,14 +29,14 @@ class SidebarMenu extends Component {
         <h2>Menu</h2>
 
         <ul>
-          <li><Link to="/home" activeClassName="active" title="Home">Home</Link></li>
-          <li><Link to="/projects" activeClassName="active" title="Projects">Projects</Link></li>
-          <li><Link to="/simulations" activeClassName="active" title="Simulations">Simulations</Link></li>
-          <li><Link to="/simulators" activeClassName="active" title="Simulators">Simulators</Link></li>
+          <li><NavLink to="/home" activeClassName="active" title="Home">Home</NavLink></li>
+          <li><NavLink to="/projects" activeClassName="active" title="Projects">Projects</NavLink></li>
+          <li><NavLink to="/simulations" activeClassName="active" title="Simulations">Simulations</NavLink></li>
+          <li><NavLink to="/simulators" activeClassName="active" title="Simulators">Simulators</NavLink></li>
           { this.props.currentRole === 'admin' ? 
-              <li><Link to="/users" activeClassName="active" title="User Management">User Management</Link></li> : ''
+              <li><NavLink to="/users" activeClassName="active" title="User Management">User Management</NavLink></li> : ''
           }
-          <li><Link to="/logout" title="Logout">Logout</Link></li>
+          <li><NavLink to="/logout" title="Logout">Logout</NavLink></li>
         </ul>
       </div>
     );

src/components/table.js

@@ -21,7 +21,7 @@
 
 import React, { Component } from 'react';
 import { Table, Button, Glyphicon, FormControl, Label } from 'react-bootstrap';
-import { Link } from 'react-router';
+import { Link } from 'react-router-dom';
 
 //import TableColumn from './table-column';
 

src/components/toolbox-item.js

@@ -19,7 +19,7 @@
  * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
  ******************************************************************************/
 
-import React, { Component, PropTypes } from 'react';
+import React from 'react';
 import { DragSource } from 'react-dnd';
 import classNames from 'classnames';
 
@@ -38,14 +38,7 @@ function collect(connect, monitor) {
   }
 }
 
-class ToolboxItem extends Component {
-  static propTypes = {
-    connectDragSource: PropTypes.func.isRequired,
-    isDragging: PropTypes.bool.isRequired,
-    name: PropTypes.string.isRequired,
-    type: PropTypes.string.isRequired
-  };
-
+class ToolboxItem extends React.Component {
   static defaultProps = {
     disabled: false
   };

src/containers/app.js

@@ -19,11 +19,12 @@
  * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
  ******************************************************************************/
 
-import React, { Component } from 'react';
+import React from 'react';
 import { Container } from 'flux/utils';
 import { DragDropContext } from 'react-dnd';
 import HTML5Backend from 'react-dnd-html5-backend';
 import NotificationSystem from 'react-notification-system';
+import { Redirect, Route } from 'react-router-dom';
 
 import AppDispatcher from '../app-dispatcher';
 import SimulationStore from '../stores/simulation-store';
@@ -34,57 +35,31 @@ import NotificationsDataManager from '../data-managers/notifications-data-manage
 import Header from '../components/header';
 import Footer from '../components/footer';
 import SidebarMenu from '../components/menu-sidebar';
+
 import Home from './home';
+import Projects from './projects';
+import Project from './project';
+import Simulators from './simulators';
+import Visualization from './visualization';
+import Simulations from './simulations';
+import Simulation from './simulation';
+import Users from './users';
 
 import '../styles/app.css';
 
-class App extends Component {
+class App extends React.Component {
   static getStores() {
     return [ NodeStore, UserStore, SimulationStore ];
   }
 
   static calculateState(prevState) {
-    // get list of running simulators
-    /*var simulators = SimulatorStore.getState().filter(simulator => {
-      return simulator.running === true;
-    });
-
-    // check if running simulators changed
-    if (prevState != null) {
-      var equal = true;
-
-      // compare each element with its old one
-      if (prevState.runningSimulators.length === simulators.length) {
-        equal = prevState.runningSimulators.every(oldSimulator => {
-          const simulator = simulators.find(element => {
-            return element._id === oldSimulator._id;
-          });
-
-          if (simulator == null) {
-            return false;
-          }
-
-          return simulator.running === oldSimulator.running;
-        });
-      } else {
-        equal = false;
-      }
-
-      // replace with old array to prevent change trigger
-      if (equal) {
-        simulators = prevState.runningSimulators;
-      }
-    }*/
-
     let currentUser = UserStore.getState().currentUser;
 
     return {
       nodes: NodeStore.getState(),
       simulations: SimulationStore.getState(),
-      currentRole: currentUser? currentUser.role : '',
-      token: UserStore.getState().token/*,
-
-      runningSimulators: simulators*/
+      currentRole: currentUser ? currentUser.role : '',
+      token: UserStore.getState().token
     };
   }
 
@@ -93,89 +68,34 @@ class App extends Component {
     const token = localStorage.getItem('token');
 
     if (token != null && token !== '') {
+      // save token so we dont logout
+      this.setState({ token });
+
       AppDispatcher.dispatch({
         type: 'users/logged-in',
         token: token
       });
-    } else {
-      // transition to login page
-      this.props.router.push('/login');
     }
+  }
 
+  componentDidMount() {
     // load all simulators and simulations to fetch simulation data
     AppDispatcher.dispatch({
       type: 'nodes/start-load',
-      token
+      token: this.state.token
     });
 
     AppDispatcher.dispatch({
       type: 'simulations/start-load',
-      token
+      token: this.state.token
     });
-  }
 
-  componentDidMount() {
     NotificationsDataManager.setSystem(this.refs.notificationSystem);
   }
 
-  componentWillUpdate(nextProps, nextState) {
-    // check if user is still logged in
-    if (nextState.token == null) {
-      // discard local token
-      localStorage.setItem('token', '');
-
-      this.props.router.push('/login');
-
-      return;
-    }
-
-    // open connection to each node
-    /*const requiredNodes = this.requiredNodesBySimulations();
-
-    requiredNodes.forEach(node => {
-      AppDispatcher.dispatch({
-        type: 'simulatorData/open',
-        identifier: simulator._id,
-        endpoint: node.endpoint,
-        signals: data.signals
-      });
-    });*/
-  }
-
-  /*requiredNodesBySimulations() {
-    var nodes = {};
-
-    this.state.simulations.forEach(simulation => {
-      simulation.models.forEach(model => {
-        // get ID for node
-        var node = this.state.nodes.find(element => {
-          return element.name === model.simulator.node;
-        });
-
-        // add empty node if not existing
-        if (node !== undefined) {
-          if (nodes[node._id] == null) {
-            nodes[node._id] = { simulators: [] }
-          }
-
-          // get simulator id
-          var simulator = node.simulators.find(simulator => {
-            return simulator.name === model.simulator.simulator;
-          });
-
-          nodes[node._id].simulators.push({ id: simulator.id, signals: model.length });
-        }
-      });
-    });
-
-    return nodes;
-  }*/
-
   render() {
-    // get children
-    var children = this.props.children;
-    if (this.props.location.pathname === "/") {
-      children = <Home />
+    if (this.state.token == null) {
+      return (<Redirect to="/login" />);
     }
 
     return (
@@ -186,8 +106,16 @@ class App extends Component {
 
         <div className="app-body">
           <SidebarMenu currentRole={ this.state.currentRole }/>
+
           <div className="app-content">
-            {children}
+            <Route path="/home" component={Home} />
+            <Route exact path="/projects" component={Projects} />
+            <Route path="/projects/:project" component={Project} />
+            <Route path="/visualizations/:visualization" component={Visualization} />
+            <Route exact path="/simulations" component={Simulations} />
+            <Route path="/simulations/:simulation" component={Simulation} />
+            <Route path="/simulators" component={Simulators} />
+            <Route path="/users" component={Users} />
           </div>
         </div>
 

src/containers/login.js

@@ -23,6 +23,7 @@ import React, { Component } from 'react';
 import { Container } from 'flux/utils';
 import { PageHeader } from 'react-bootstrap';
 import NotificationSystem from 'react-notification-system';
+import { Redirect } from 'react-router-dom';
 
 import LoginForm from '../components/login-form';
 import Header from '../components/header';
@@ -64,14 +65,15 @@ class Login extends Component {
       if (nextState.currentUser != null) {
         // save login in local storage
         localStorage.setItem('token', nextState.token);
-
-        // transition to index
-        nextProps.router.push('/');
       }
     }
   }
 
   render() {
+    if (this.state.currentUser != null) {
+      return (<Redirect to="/" />);
+    }
+
     return (
       <div>
         <NotificationSystem ref="notificationSystem" />

src/containers/logout.js

@@ -19,23 +19,12 @@
  * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
  ******************************************************************************/
 
-import React, { Component } from 'react';
-import { Container } from 'flux/utils';
+import React from 'react';
+import { Redirect } from 'react-router-dom';
 
 import AppDispatcher from '../app-dispatcher';
-import UserStore from '../stores/villas-store';
-
-class Home extends Component {
-  static getStores() {
-    return [ UserStore ];
-  }
-
-  static calculateState() {
-    return {
-      currentUser: UserStore.getState().currentUser
-    };
-  }
 
+class Logout extends React.Component {
   componentWillMount() {
     AppDispatcher.dispatch({
       type: 'users/logout'
@@ -45,19 +34,11 @@ class Home extends Component {
     localStorage.setItem('token', '');
   }
 
-  componentWillUpdate(nextProps, nextState) {
-    // check if logged out
-    if (nextState.token == null) {
-      // transition to login page
-      nextProps.router.push('/login');
-    }
-  }
-
   render() {
     return (
-      <span>Login out</span>
+      <Redirect to="/login" />
     );
   }
 }
 
-export default Container.create(Home);
+export default Logout;

src/containers/project.js

@@ -54,7 +54,7 @@ class Visualizations extends Component {
 
       // Compare content of the projects array, update visualizations if changed
       if (JSON.stringify(prevState.projects) !== JSON.stringify(currentProjects)) {
-        projectUpdate = Visualizations.findProjectInState(currentProjects, props.params.project);
+        projectUpdate = Visualizations.findProjectInState(currentProjects, props.match.params.project);
         Visualizations.loadVisualizations(projectUpdate.visualizations, sessionToken);
       }
 
@@ -72,7 +72,7 @@ class Visualizations extends Component {
       };
     } else {
 
-      let initialProject = Visualizations.findProjectInState(currentProjects, props.params.project);
+      let initialProject = Visualizations.findProjectInState(currentProjects, props.match.params.project);
       // If projects have been loaded already but visualizations not (redirect from Projects page)
       if (initialProject && (!currentVisualizations || currentVisualizations.length === 0)) {
         Visualizations.loadVisualizations(initialProject.visualizations, sessionToken);

src/containers/projects.js

@@ -19,7 +19,7 @@
  * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
  ******************************************************************************/
 
-import React, { Component } from 'react';
+import React from 'react';
 import { Container } from 'flux/utils';
 import { Button, Modal, Glyphicon } from 'react-bootstrap';
 
@@ -33,7 +33,7 @@ import TableColumn from '../components/table-column';
 import NewProjectDialog from '../components/dialog/new-project';
 import EditProjectDialog from '../components/dialog/edit-project';
 
-class Projects extends Component {
+class Projects extends React.Component {
   static getStores() {
     return [ ProjectStore, SimulationStore, UserStore ];
   }

src/containers/simulation.js

@@ -19,7 +19,7 @@
  * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
  ******************************************************************************/
 
-import React, { Component } from 'react';
+import React from 'react';
 import { Container } from 'flux/utils';
 import { Button, Modal, Glyphicon } from 'react-bootstrap';
 
@@ -33,7 +33,7 @@ import TableColumn from '../components/table-column';
 import NewSimulationModelDialog from '../components/dialog/new-simulation-model';
 import EditSimulationModelDialog from '../components/dialog/edit-simulation-model';
 
-class Simulation extends Component {
+class Simulation extends React.Component {
   static getStores() {
     return [ SimulationStore, NodeStore, UserStore ];
   }
@@ -67,7 +67,7 @@ class Simulation extends Component {
   }
 
   componentDidUpdate() {
-    if (this.state.simulation._id !== this.props.params.simulation) {
+    if (this.state.simulation._id !== this.props.match.params.simulation) {
       this.reloadSimulation();
     }
   }
@@ -75,7 +75,7 @@ class Simulation extends Component {
   reloadSimulation() {
     // select simulation by param id
     this.state.simulations.forEach((simulation) => {
-      if (simulation._id === this.props.params.simulation) {
+      if (simulation._id === this.props.match.params.simulation) {
         // JSON.parse(JSON.stringify(obj)) = deep clone to make also copy of widget objects inside
         this.setState({ simulation: JSON.parse(JSON.stringify(simulation)) });
       }

src/containers/visualization.js

@@ -19,7 +19,7 @@
  * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
  ******************************************************************************/
 
-import React, { Component } from 'react';
+import React from 'react';
 import { Container } from 'flux/utils';
 import { Button } from 'react-bootstrap';
 import { ContextMenu, MenuItem } from 'react-contextmenu';
@@ -41,7 +41,7 @@ import AppDispatcher from '../app-dispatcher';
 import NotificationsDataManager from '../data-managers/notifications-data-manager';
 import NotificationsFactory from '../data-managers/notifications-factory';
 
-class Visualization extends Component {
+class Visualization extends React.Component {
   static getStores() {
     return [ VisualizationStore, ProjectStore, SimulationStore, FileStore, UserStore ];
   }
@@ -74,6 +74,7 @@ class Visualization extends Component {
   }
 
   componentWillMount() {
+    // TODO: Don't fetch token from local, use user-store!
     const token = localStorage.getItem('token');
 
     AppDispatcher.dispatch({
@@ -83,7 +84,7 @@ class Visualization extends Component {
   }
 
   componentDidUpdate() {
-    if (this.state.visualization._id !== this.props.params.visualization) {
+    if (this.state.visualization._id !== this.props.match.params.visualization) {
       this.reloadVisualization();
     }
 
@@ -133,7 +134,7 @@ class Visualization extends Component {
   reloadVisualization() {
     // select visualization by param id
     this.state.visualizations.forEach((tempVisualization) => {
-      if (tempVisualization._id === this.props.params.visualization) {
+      if (tempVisualization._id === this.props.match.params.visualization) {
 
         // convert widgets list to a dictionary
         var visualization = Object.assign({}, tempVisualization, {

src/containers/widget.js

@@ -95,25 +95,26 @@ class Widget extends Component {
     return Math.round(value / this.props.grid) * this.props.grid;
   }
 
-  drag(event, ui) {
-    let x = this.snapToGrid(ui.position.left);
-    let y = this.snapToGrid(ui.position.top);
+  drag(event, data) {
+    const x = this.snapToGrid(data.x);
+    const y = this.snapToGrid(data.y);
 
-    if (x !== ui.position.left || y !== ui.position.top) {
+    if (x !== data.x || y !== data.y) {
       this.rnd.updatePosition({ x, y });
+      console.log(this.rnd);
     }
   }
 
-  dragStop(event, ui) {
+  dragStop(event, data) {
     // update widget
-    var widget = this.props.data;
-    widget.x = this.snapToGrid(ui.position.left);
-    widget.y = this.snapToGrid(ui.position.top);
+    let widget = this.props.data;
+    widget.x = this.snapToGrid(data.x);
+    widget.y = this.snapToGrid(data.y);
 
     this.props.onWidgetChange(widget, this.props.index);
   }
 
-  resizeStop(direction, styleSize, clientSize, delta) {
+  resizeStop(direction, delta, event) {
     // update widget
     let widget = Object.assign({}, this.props.data);
 
@@ -126,8 +127,8 @@ class Widget extends Component {
       widget.y -= delta.height;
     }
 
-    widget.width = styleSize.width;
-    widget.height = styleSize.height;
+    widget.width += delta.width;
+    widget.height += delta.height;
 
     this.props.onWidgetChange(widget, this.props.index);
   }
@@ -187,17 +188,17 @@ class Widget extends Component {
       return (
         <Rnd
           ref={c => { this.rnd = c; }}
-          initial={{ x: Number(widget.x), y: Number(widget.y), width: widget.width, height: widget.height }}
+          default={{ x: Number(widget.x), y: Number(widget.y), width: widget.width, height: widget.height }}
           minWidth={widget.minWidth}
           minHeight={widget.minHeight}
           lockAspectRatio={Boolean(widget.lockAspect)}
           bounds={'parent'}
           className={ widgetClasses }
-          onResizeStart={ (direction, styleSize, clientSize, event) => this.borderWasClicked(event) } 
-          onResizeStop={(direction, styleSize, clientSize, delta) => this.resizeStop(direction, styleSize, clientSize, delta)}
-          onDrag={(event, ui) => this.drag(event, ui)}
-          onDragStop={(event, ui) => this.dragStop(event, ui)}
-          moveGrid={grid}
+          onResizeStart={(event, direction, ref) => this.borderWasClicked(event)} 
+          onResizeStop={(event, direction, ref, delta) => this.resizeStop(direction, delta, event)}
+          onDrag={(event, data) => this.drag(event, data)}
+          onDragStop={(event, data) => this.dragStop(event, data)}
+          dragGrid={grid}
           resizeGrid={grid}
           zIndex={widget.z}
         >

src/router.js

@@ -19,45 +19,23 @@
  * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
  ******************************************************************************/
 
-import React, { Component } from 'react';
-import { Router, Route, browserHistory } from 'react-router';
+import React from 'react';
+import { BrowserRouter, Route, Switch } from 'react-router-dom';
 
 import App from './containers/app';
-import Home from './containers/home';
-import Projects from './containers/projects';
-import Project from './containers/project';
-import Simulators from './containers/simulators';
-import Visualization from './containers/visualization';
-import Simulations from './containers/simulations';
-import Simulation from './containers/simulation';
-import Users from './containers/users';
 import Login from './containers/login';
 import Logout from './containers/logout';
 
-class Root extends Component {
+class Root extends React.Component {
   render() {
     return (
-      <Router history={browserHistory}>
-        <Route path='/' component={App}>
-          <Route path='/home' component={Home} />
-
-          <Route path='/projects' component={Projects} />
-          <Route path='/projects/:project' component={Project} />
-
-          <Route path='/simulators' component={Simulators} />
-
-          <Route path='/visualizations/:visualization' component={Visualization} />
-
-          <Route path='/simulations' component={Simulations} />
-          <Route path='/simulations/:simulation' component={Simulation} />
-
-          <Route path='/users' component={Users} />
-
+      <BrowserRouter>
+        <Switch>
+          <Route path='/login' component={Login} />
           <Route path='/logout' component={Logout} />
-        </Route>
-
-        <Route path='/login' component={Login} />
-      </Router>
+          <Route path='/' component={App} />
+        </Switch>
+      </BrowserRouter>
     );
   }
 }

src/stores/user-store.js

@@ -50,7 +50,7 @@ class UserStore extends ReduceStore {
         SimulatorDataDataManager.closeAll();
 
         // delete user and token
-        return Object.assign({}, state, { token: null });
+        return Object.assign({}, state, { token: null, currentUser: null });
 
       case 'users/logged-in':
         // request logged-in user data
@@ -67,16 +67,15 @@ class UserStore extends ReduceStore {
         return Object.assign({}, state, { currentUser: null, token: null });
 
       case 'users/login-error':
-
         if (action.error && !action.error.handled) {
           // If it was an error and hasn't been handled, the credentials must have been wrong.
           const WRONG_CREDENTIALS_NOTIFICATION = {
             title: 'Incorrect credentials',
             message: 'Please modify and try again.',
             level: 'error'
-          }
-          NotificationsDataManager.addNotification(WRONG_CREDENTIALS_NOTIFICATION);
+          };
 
+          NotificationsDataManager.addNotification(WRONG_CREDENTIALS_NOTIFICATION);
         }
 
         return state;