diff --git a/src/components/App.js b/src/components/App.js index 0824fe3b..14b9f89b 100644 --- a/src/components/App.js +++ b/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 }) => ( - - - - - - - - - - - - - -) +type Props = { + deviceAdd: (device: Object) => void, + deviceRemove: (device: Object) => void, + devicesUpdate: (devices: Object) => void, + history: Object, + store: Object, +} + +class App extends PureComponent { + 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 ( + + + + + + + + + + + + + + ) + } +} + +export default connect(null, { + deviceAdd, + deviceRemove, + devicesUpdate, +})(App) diff --git a/src/components/Home.js b/src/components/Home.js index b51edb8c..0acf9282 100644 --- a/src/components/Home.js +++ b/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, } class Home extends PureComponent { - 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 { } } -export default connect(({ devices }) => ({ devices }), { - deviceAdd, - deviceRemove, - devicesUpdate, -})(Home) +export default connect(({ devices }: Props): Object => ({ devices }))(Home)