Create UpdateNotifier and connect it to updates statuses

src/components/UpdateNotifier.js

@@ -0,0 +1,36 @@
+// @flow
+
+import React, { PureComponent } from 'react'
+import { connect } from 'react-redux'
+import type { MapStateToProps } from 'react-redux'
+import styled from 'styled-components'
+
+import { getUpdateStatus } from 'reducers/update'
+import type { State } from 'reducers'
+import type { UpdateStatus } from 'reducers/update'
+
+type Props = {
+  updateStatus: UpdateStatus,
+}
+
+const mapStateToProps: MapStateToProps<*, *, *> = (state: State) => ({
+  updateStatus: getUpdateStatus(state),
+})
+
+const Container = styled.div`
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+`
+
+class UpdateNotifier extends PureComponent<Props> {
+  render() {
+    const { updateStatus } = this.props
+    return <Container>{updateStatus}</Container>
+  }
+}
+
+export default connect(mapStateToProps, null)(UpdateNotifier)

src/components/Wrapper.js

@@ -11,6 +11,7 @@ import SettingsPage from 'components/SettingsPage'
 import AccountPage from 'components/AccountPage'
 import SendModal from 'components/SendModal'
 import ReceiveModal from 'components/ReceiveModal'
+import UpdateNotifier from 'components/UpdateNotifier'
 
 import SideBar from 'components/SideBar'
 import TopBar from 'components/TopBar'
@@ -24,8 +25,11 @@ const Wrapper = () => (
       <Route path="/settings" component={SettingsPage} />
       <Route path="/account/:account" component={AccountPage} />
     </Box>
+
     <SendModal />
     <ReceiveModal />
+
+    <UpdateNotifier />
   </Box>
 )
 

src/reducers/devices.js

@@ -4,11 +4,12 @@ import { handleActions } from 'redux-actions'
 
 import type { Device, Devices } from 'types/common'
 
-type stateType = {
+export type DevicesState = {
   currentDevice: Device | null,
   devices: Devices,
 }
-const state = {
+
+const state: DevicesState = {
   currentDevice: null,
   devices: [],
 }
@@ -21,19 +22,19 @@ function setCurrentDevice(state) {
 }
 
 const handlers: Object = {
-  DEVICES_UPDATE: (state: stateType, { payload: devices }: { payload: Devices }) =>
+  DEVICES_UPDATE: (state: DevicesState, { payload: devices }: { payload: Devices }) =>
     setCurrentDevice({
       ...state,
       devices,
     }),
-  DEVICE_ADD: (state: stateType, { payload: device }: { payload: Device }) =>
+  DEVICE_ADD: (state: DevicesState, { payload: device }: { payload: Device }) =>
     setCurrentDevice({
       ...state,
       devices: [...state.devices, device].filter(
         (v, i, s) => s.findIndex(t => t.path === v.path) === i,
       ),
     }),
-  DEVICE_REMOVE: (state: stateType, { payload: device }: { payload: Device }) => ({
+  DEVICE_REMOVE: (state: DevicesState, { payload: device }: { payload: Device }) => ({
     ...state,
     currentDevice:
       state.currentDevice !== null && state.currentDevice.path === device.path
@@ -41,7 +42,7 @@ const handlers: Object = {
         : state.currentDevice,
     devices: state.devices.filter(d => d.path !== device.path),
   }),
-  DEVICE_CHOOSE: (state: stateType, { payload: currentDevice }: { payload: Device }) => ({
+  DEVICE_CHOOSE: (state: DevicesState, { payload: currentDevice }: { payload: Device }) => ({
     ...state,
     currentDevice,
   }),

src/reducers/index.js

@@ -3,11 +3,26 @@
 import { combineReducers } from 'redux'
 import { routerReducer as router } from 'react-router-redux'
 
+import type { LocationShape } from 'react-router'
+
 import devices from './devices'
 import modals from './modals'
+import update from './update'
+
+import type { DevicesState } from './devices'
+import type { ModalsState } from './modals'
+import type { UpdateState } from './update'
+
+export type State = {
+  router: LocationShape,
+  devices: DevicesState,
+  modals: ModalsState,
+  update: UpdateState,
+}
 
 export default combineReducers({
   router,
   devices,
   modals,
+  update,
 })

src/reducers/modals.js

@@ -2,7 +2,14 @@
 
 import { handleActions, createAction } from 'redux-actions'
 
-const state = {}
+export type ModalsState = {
+  [key: string]: {
+    isOpened: boolean,
+    data?: Object | null,
+  },
+}
+
+const state: ModalsState = {}
 
 type OpenPayload = {
   name: string,

src/reducers/update.js

@@ -0,0 +1,44 @@
+// @flow
+
+import { handleActions, createAction } from 'redux-actions'
+
+export type UpdateStatus =
+  | 'idle'
+  | 'checking'
+  | 'available'
+  | 'progress'
+  | 'unavailable'
+  | 'error'
+  | 'downloaded'
+
+export type UpdateState = {
+  status: UpdateStatus,
+  data?: Object,
+}
+
+const state: UpdateState = {
+  status: 'idle',
+  data: {},
+}
+
+const handlers = {
+  UPDATE_SET_STATUS: (state: UpdateState, { payload }: { payload: UpdateState }): UpdateState =>
+    payload,
+}
+
+// Actions
+
+export const setUpdateStatus = createAction(
+  'UPDATE_SET_STATUS',
+  (status: UpdateStatus, data?: Object): UpdateState => ({ status, data }),
+)
+
+// Selectors
+
+export function getUpdateStatus(state: { update: UpdateState }): UpdateStatus {
+  return state.update.status
+}
+
+// Default export
+
+export default handleActions(handlers, state)

src/renderer/initEvents.js

@@ -4,6 +4,7 @@ import { ipcRenderer } from 'electron' // eslint-disable-line import/no-extraneo
 import objectPath from 'object-path'
 
 import { devicesUpdate, deviceAdd, deviceRemove } from 'actions/devices'
+import { setUpdateStatus } from 'reducers/update'
 
 type MsgPayload = {
   type: string,
@@ -48,24 +49,12 @@ export default (store: Object) => {
       },
     },
     updater: {
-      checking: () => {
+      checking: () => store.dispatch(setUpdateStatus('checking')),
-        console.log('[UPDATER] checking for updates')
+      updateAvailable: info => store.dispatch(setUpdateStatus('available', info)),
-      },
+      updateNotAvailable: () => store.dispatch(setUpdateStatus('unavailable')),
-      updateAvailable: info => {
+      error: err => store.dispatch(setUpdateStatus('error', err)),
-        console.log('[UPDATER] update available', info)
+      downloadProgress: progress => store.dispatch(setUpdateStatus('progress', progress)),
-      },
+      downloaded: () => store.dispatch(setUpdateStatus('downloaded')),
-      updateNotAvailable: () => {
-        console.log('[UPDATER] no update available')
-      },
-      error: err => {
-        console.log('[UPDATER] update error', err)
-      },
-      downloadProgress: progress => {
-        console.log('[UPDATER] download in progress...', progress.percent)
-      },
-      downloaded: () => {
-        console.log('[UPDATER] update downloaded')
-      },
     },
   }