Move more components to hooks

4 files changed, 47 insertions, 46 deletions

diff --git a/modern/src/App.js b/modern/src/App.js
index a7752823..cc15ca59 100644
--- a/modern/src/App.js
+++ b/modern/src/App.js
@@ -1,4 +1,4 @@
-import React, { Component, Fragment } from 'react';
+import React from 'react';
 import { Switch, Route } from 'react-router-dom'
 import CssBaseline from '@material-ui/core/CssBaseline';
 import MainPage from './MainPage';
@@ -6,20 +6,18 @@ import LoginPage from './LoginPage';
 import RouteReportPage from './RouteReportPage';
 import DevicePage from './DevicePage';
 
-class App extends Component {
-  render() {
-    return (
-      <Fragment>
-        <CssBaseline />
-        <Switch>
-          <Route exact path='/' component={MainPage} />
-          <Route exact path='/login' component={LoginPage} />
-          <Route exact path='/device' component={DevicePage} />
-          <Route exact path='/reports/route' component={RouteReportPage} />
-        </Switch>
-      </Fragment>
-    );
-  }
+const App = () => {
+  return (
+    <>
+      <CssBaseline />
+      <Switch>
+        <Route exact path='/' component={MainPage} />
+        <Route exact path='/login' component={LoginPage} />
+        <Route exact path='/device' component={DevicePage} />
+        <Route exact path='/reports/route' component={RouteReportPage} />
+      </Switch>
+    </>
+  );
 }
 
 export default App;
diff --git a/modern/src/DevicePage.js b/modern/src/DevicePage.js
index 73f1dc86..e882de37 100644
--- a/modern/src/DevicePage.js
+++ b/modern/src/DevicePage.js
@@ -1,18 +1,19 @@
-import React, { Component } from 'react';
+import React from 'react';
 import MainToobar from './MainToolbar';
 import withStyles from '@material-ui/core/styles/withStyles';
 import withWidth from '@material-ui/core/withWidth';
+import { useHistory } from 'react-router-dom';
 
 const styles = theme => ({});
 
-class DevicePage extends Component {
-  render() {
-    return (
-      <div>
-        <MainToobar history={this.props.history} />
-      </div>
-    );
-  }
+const DevicePage = () => {
+  const history = useHistory();
+
+  return (
+    <div>
+      <MainToobar history={history} />
+    </div>
+  );
 }
 
 export default withWidth()(withStyles(styles)(DevicePage));
diff --git a/modern/src/RouteReportPage.js b/modern/src/RouteReportPage.js
index 86eeaaa0..6bbf01ec 100644
--- a/modern/src/RouteReportPage.js
+++ b/modern/src/RouteReportPage.js
@@ -1,18 +1,19 @@
-import React, { Component } from 'react';
+import React from 'react';
 import MainToobar from './MainToolbar';
 import withStyles from '@material-ui/core/styles/withStyles';
 import withWidth from '@material-ui/core/withWidth';
+import { useHistory } from 'react-router-dom';
 
 const styles = theme => ({});
 
-class RouteReportPage extends Component {
-  render() {
-    return (
-      <div>
-        <MainToobar history={this.props.history} />
-      </div>
-    );
-  }
+const RouteReportPage = () => {
+  const history = useHistory();
+
+  return (
+    <div>
+      <MainToobar history={history} />
+    </div>
+  );
 }
 
 export default withWidth()(withStyles(styles)(RouteReportPage));
diff --git a/modern/src/SocketController.js b/modern/src/SocketController.js
index bacac51a..f915c999 100644
--- a/modern/src/SocketController.js
+++ b/modern/src/SocketController.js
@@ -1,4 +1,5 @@
-import { Component } from 'react';
+import { useEffect } from 'react';
+import { useDispatch } from 'react-redux';
 import { connect } from 'react-redux';
 import { positionsActions, devicesActions } from './store';
 
@@ -19,8 +20,10 @@ const displayNotifications = events => {
   }
 };
 
-class SocketController extends Component {
-  connectSocket() {
+const SocketController = (props) => {
+  const dispatch = useDispatch();
+
+  const connectSocket = () => {
     const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
     const socket = new WebSocket(protocol + '//' + window.location.host + '/api/socket');
 
@@ -31,31 +34,29 @@ class SocketController extends Component {
     socket.onmessage = (event) => {
       const data = JSON.parse(event.data);
       if (data.devices) {
-        this.props.dispatch(devicesActions.update(data.devices));
+        props.dispatch(devicesActions.update(data.devices));
       }
       if (data.positions) {
-        this.props.dispatch(positionsActions.update(data.positions));
+        props.dispatch(positionsActions.update(data.positions));
       }
       if (data.events) {
         displayNotifications(data.events);
       }
-    }
+    };
   }
 
-  componentDidMount() {
+  useEffect(() => {
     fetch('/api/devices').then(response => {
       if (response.ok) {
         response.json().then(devices => {
-          this.props.dispatch(devicesActions.update(devices));
+          dispatch(devicesActions.update(devices));
         });
       }
-      this.connectSocket();
+      connectSocket();
     });
-  }
+  }, []);
 
-  render() {
-    return null;
-  }
+  return null;
 }
 
 export default connect()(SocketController);