Add Wrapper, move events in renderer

src/components/App.js

@@ -1,78 +1,25 @@
 // @flow
 
-import React, { PureComponent } from 'react'
+import React from 'react'
 import { ThemeProvider } from 'styled-components'
 import { ConnectedRouter } from 'react-router-redux'
-import { Provider, connect } from 'react-redux'
+import { Provider } from 'react-redux'
-import { Route } from 'react-router'
-import { ipcRenderer } from 'electron'
 import { I18nextProvider } from 'react-i18next'
 
-import { devicesUpdate, deviceAdd, deviceRemove } from 'actions/devices'
-
 import theme from 'styles/theme'
 
-import Box from 'components/base/Box'
+import i18n from 'renderer/i18n'
-import SideBar from 'components/SideBar'
-import TopBar from 'components/TopBar'
-import Home from 'components/Home'
-
-import i18n from '../renderer/i18n'
-
-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
+import Wrapper from 'components/Wrapper'
-    ipcRenderer.send('getDevices')
 
-    // Start detection when we plug/unplug devices
+export default ({ store, history }: { store: Object, history: Object }) => (
-    ipcRenderer.send('listenDevices')
-  }
-
-  componentWillUnmount() {
-    ipcRenderer.removeAllListeners('updateDevices')
-    ipcRenderer.removeAllListeners('addDevice')
-    ipcRenderer.removeAllListeners('removeDevice')
-  }
-
-  render() {
-    const { history, store } = this.props
-
-    return (
   <Provider store={store}>
     <I18nextProvider i18n={i18n}>
       <ThemeProvider theme={theme}>
         <ConnectedRouter history={history}>
-              <Box grow horizontal>
+          <Wrapper />
-                <SideBar />
-                <Box grow bg="cream">
-                  <TopBar />
-                  <Route path="/" component={Home} />
-                </Box>
-              </Box>
         </ConnectedRouter>
       </ThemeProvider>
     </I18nextProvider>
   </Provider>
 )
-  }
-}
-
-export default connect(null, {
-  deviceAdd,
-  deviceRemove,
-  devicesUpdate,
-})(App)

src/components/Wrapper.js

@@ -0,0 +1,19 @@
+// @flow
+
+import React from 'react'
+import { Route } from 'react-router'
+
+import Box from 'components/base/Box'
+import SideBar from 'components/SideBar'
+import TopBar from 'components/TopBar'
+import Home from 'components/Home'
+
+export default () => (
+  <Box grow horizontal>
+    <SideBar />
+    <Box grow bg="cream">
+      <TopBar />
+      <Route path="/" component={Home} />
+    </Box>
+  </Box>
+)

src/renderer/index.js

@@ -6,6 +6,8 @@ import { AppContainer } from 'react-hot-loader' // eslint-disable-line import/no
 import createHistory from 'history/createBrowserHistory'
 
 import createStore from 'renderer/createStore'
+import initEvents from 'renderer/initEvents'
+
 import App from 'components/App'
 
 import 'styles/global'
@@ -14,6 +16,8 @@ const history = createHistory()
 const store = createStore(history)
 const rootNode = document.getElementById('app')
 
+initEvents(store)
+
 function r(Comp) {
   if (rootNode) {
     render(<AppContainer>{Comp}</AppContainer>, rootNode)

src/renderer/initEvents.js

@@ -0,0 +1,17 @@
+// @flow
+
+import { ipcRenderer } from 'electron'
+
+import { devicesUpdate, deviceAdd, deviceRemove } from 'actions/devices'
+
+export default (store: Object) => {
+  ipcRenderer.on('updateDevices', (e, devices) => store.dispatch(devicesUpdate(devices)))
+  ipcRenderer.on('addDevice', (e, device) => store.dispatch(deviceAdd(device)))
+  ipcRenderer.on('removeDevice', (e, device) => store.dispatch(deviceRemove(device)))
+
+  // First time, we get all devices
+  ipcRenderer.send('getDevices')
+
+  // Start detection when we plug/unplug devices
+  ipcRenderer.send('listenDevices')
+}