From 15165b3822f625f18e22330f3d81767340197154 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=ABck=20V=C3=A9zien?= <nainpuissant@gmail.com>
Date: Tue, 9 Jan 2018 15:05:15 +0100
Subject: [PATCH] Add Wrapper, move events in renderer

---
 src/components/App.js      | 87 ++++++++------------------------------
 src/components/Wrapper.js  | 19 +++++++++
 src/renderer/index.js      |  4 ++
 src/renderer/initEvents.js | 17 ++++++++
 4 files changed, 57 insertions(+), 70 deletions(-)
 create mode 100644 src/components/Wrapper.js
 create mode 100644 src/renderer/initEvents.js

diff --git a/src/components/App.js b/src/components/App.js
index a03f9fcc..b4444b57 100644
--- a/src/components/App.js
+++ b/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 { Route } from 'react-router'
-import { ipcRenderer } from 'electron'
+import { Provider } from 'react-redux'
 import { I18nextProvider } from 'react-i18next'
 
-import { devicesUpdate, deviceAdd, deviceRemove } from 'actions/devices'
-
 import theme from 'styles/theme'
 
-import Box from 'components/base/Box'
-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
-    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}>
-        <I18nextProvider i18n={i18n}>
-          <ThemeProvider theme={theme}>
-            <ConnectedRouter history={history}>
-              <Box grow horizontal>
-                <SideBar />
-                <Box grow bg="cream">
-                  <TopBar />
-                  <Route path="/" component={Home} />
-                </Box>
-              </Box>
-            </ConnectedRouter>
-          </ThemeProvider>
-        </I18nextProvider>
-      </Provider>
-    )
-  }
-}
-
-export default connect(null, {
-  deviceAdd,
-  deviceRemove,
-  devicesUpdate,
-})(App)
+import i18n from 'renderer/i18n'
+
+import Wrapper from 'components/Wrapper'
+
+export default ({ store, history }: { store: Object, history: Object }) => (
+  <Provider store={store}>
+    <I18nextProvider i18n={i18n}>
+      <ThemeProvider theme={theme}>
+        <ConnectedRouter history={history}>
+          <Wrapper />
+        </ConnectedRouter>
+      </ThemeProvider>
+    </I18nextProvider>
+  </Provider>
+)
diff --git a/src/components/Wrapper.js b/src/components/Wrapper.js
new file mode 100644
index 00000000..ab8edc2c
--- /dev/null
+++ b/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>
+)
diff --git a/src/renderer/index.js b/src/renderer/index.js
index 0a979b40..cde3ec37 100644
--- a/src/renderer/index.js
+++ b/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)
diff --git a/src/renderer/initEvents.js b/src/renderer/initEvents.js
new file mode 100644
index 00000000..8b936f9f
--- /dev/null
+++ b/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')
+}