Move detection device to App.js

src/components/App.js

@@ -1,10 +1,13 @@
 // @flow
 
-import React from 'react'
+import React, { PureComponent } from 'react'
 import { ThemeProvider } from 'styled-components'
 import { ConnectedRouter } from 'react-router-redux'
-import { Provider } from 'react-redux'
+import { Provider, connect } from 'react-redux'
 import { Route } from 'react-router'
+import { ipcRenderer } from 'electron'
+
+import { devicesUpdate, deviceAdd, deviceRemove } from 'actions/devices'
 
 import theme from 'styles/theme'
 
@@ -13,18 +16,58 @@ import SideBar from 'components/SideBar'
 import TopBar from 'components/TopBar'
 import Home from 'components/Home'
 
-export default ({ store, history }: { store: Object, history: Object }) => (
-  <Provider store={store}>
-    <ThemeProvider theme={theme}>
-      <ConnectedRouter history={history}>
-        <Box grow horizontal>
-          <SideBar />
-          <Box grow bg="cream">
-            <TopBar />
-            <Route path="/" component={Home} />
-          </Box>
-        </Box>
-      </ConnectedRouter>
-    </ThemeProvider>
-  </Provider>
-)
+type Props = {
+  deviceAdd: (device: Object) => void,
+  deviceRemove: (device: Object) => void,
+  devicesUpdate: (devices: Object) => void,
+  history: Object,
+  store: Object,
+}
+
+class App extends PureComponent<Props> {
+  componentWillMount() {
+    const { devicesUpdate, deviceAdd, deviceRemove } = this.props
+
+    ipcRenderer.on('updateDevices', (e, devices) => devicesUpdate(devices))
+    ipcRenderer.on('addDevice', (e, device) => deviceAdd(device))
+    ipcRenderer.on('removeDevice', (e, device) => deviceRemove(device))
+
+    // First renderer, we get all devices
+    ipcRenderer.send('getDevices')
+
+    // Start detection when we plug/unplug devices
+    ipcRenderer.send('listenDevices')
+  }
+
+  componentWillUnmount() {
+    ipcRenderer.removeAllListeners('updateDevices')
+    ipcRenderer.removeAllListeners('addDevice')
+    ipcRenderer.removeAllListeners('removeDevice')
+  }
+
+  render() {
+    const { history, store } = this.props
+
+    return (
+      <Provider store={store}>
+        <ThemeProvider theme={theme}>
+          <ConnectedRouter history={history}>
+            <Box grow horizontal>
+              <SideBar />
+              <Box grow bg="cream">
+                <TopBar />
+                <Route path="/" component={Home} />
+              </Box>
+            </Box>
+          </ConnectedRouter>
+        </ThemeProvider>
+      </Provider>
+    )
+  }
+}
+
+export default connect(null, {
+  deviceAdd,
+  deviceRemove,
+  devicesUpdate,
+})(App)

src/components/Home.js

@@ -2,38 +2,12 @@
 
 import React, { PureComponent } from 'react'
 import { connect } from 'react-redux'
-import { ipcRenderer } from 'electron'
-
-import { devicesUpdate, deviceAdd, deviceRemove } from 'actions/devices'
 
 type Props = {
-  devicesUpdate: (devices: Object) => void,
-  deviceAdd: (device: Object) => void,
-  deviceRemove: (device: Object) => void,
-  devices: Object,
+  devices: Array<Object>,
 }
 
 class Home extends PureComponent<Props> {
-  componentWillMount() {
-    const { devicesUpdate, deviceAdd, deviceRemove } = this.props
-
-    ipcRenderer.on('updateDevices', (e, devices) => devicesUpdate(devices))
-    ipcRenderer.on('addDevice', (e, device) => deviceAdd(device))
-    ipcRenderer.on('removeDevice', (e, device) => deviceRemove(device))
-
-    // First renderer, we get all devices
-    ipcRenderer.send('getDevices')
-
-    // Start detection when we plug/unplug devices
-    ipcRenderer.send('listenDevices')
-  }
-
-  componentWillUnmount() {
-    ipcRenderer.removeAllListeners('updateDevices')
-    ipcRenderer.removeAllListeners('addDevice')
-    ipcRenderer.removeAllListeners('removeDevice')
-  }
-
   render() {
     const { devices } = this.props
 
@@ -41,8 +15,4 @@ class Home extends PureComponent<Props> {
   }
 }
 
-export default connect(({ devices }) => ({ devices }), {
-  deviceAdd,
-  deviceRemove,
-  devicesUpdate,
-})(Home)
+export default connect(({ devices }: Props): Object => ({ devices }))(Home)