Make AutoUpdater more friendly and explainful

package.json

@@ -59,6 +59,7 @@
     "react-dom": "^16.2.0",
     "react-i18next": "^7.3.1",
     "react-mortal": "^3.0.1",
+    "react-motion": "^0.5.2",
     "react-redux": "^5.0.6",
     "react-router": "^4.2.0",
     "react-router-dom": "^4.2.2",

src/components/TopBar.js

@@ -140,7 +140,7 @@ class TopBar extends PureComponent<Props, State> {
             ))}
           </Overlay>
         )}
-        <Box bg="white" noShrink style={{ height: 60 }} align="center" horizontal>
+        <Box bg="white" noShrink style={{ height: 60, zIndex: 20 }} align="center" horizontal>
           <Box grow>
             {sync.progress === true
               ? 'sync...'

src/components/UpdateNotifier.js

@@ -1,35 +1,83 @@
 // @flow
 
 import React, { PureComponent } from 'react'
+import { Motion, spring } from 'react-motion'
 import { connect } from 'react-redux'
 import type { MapStateToProps } from 'react-redux'
 import styled from 'styled-components'
 
-import { getUpdateStatus } from 'reducers/update'
+import { getUpdateStatus, getUpdateData } from 'reducers/update'
+import { sendEvent } from 'renderer/events'
 import type { State } from 'reducers'
 import type { UpdateStatus } from 'reducers/update'
 
+import Box from 'components/base/Box'
+import Text from 'components/base/Text'
+
 type Props = {
   updateStatus: UpdateStatus,
 }
 
 const mapStateToProps: MapStateToProps<*, *, *> = (state: State) => ({
   updateStatus: getUpdateStatus(state),
+  updateData: getUpdateData(state),
 })
 
-const Container = styled.div`
-  position: fixed;
-  bottom: 0;
+const Container = styled(Box).attrs({
+  p: 1,
+  bg: 'blue',
+  color: 'white',
+  style: p => ({
+    transform: `translate3d(0, ${p.offset}%, 0)`,
+  }),
+})`
+  position: absolute;
+  top: 0;
   left: 0;
   right: 0;
-  display: flex;
-  justify-content: center;
+  z-index: 10;
 `
 
 class UpdateNotifier extends PureComponent<Props> {
+  renderStatus() {
+    const { updateStatus } = this.props
+    switch (updateStatus) {
+      case 'idle':
+      case 'checking':
+      case 'unavailable':
+      case 'error':
+      case 'available':
+      case 'progress':
+        return null
+      case 'downloaded':
+        return (
+          <Box horizontal flow={2}>
+            <Text fontWeight="bold">{'A new version is ready to be installed.'}</Text>
+            <Text
+              style={{ cursor: 'pointer' }}
+              onClick={() => sendEvent('msg', 'updater.quitAndInstall')}
+            >
+              {'Re-launch app now'}
+            </Text>
+          </Box>
+        )
+      default:
+        return null
+    }
+  }
+
   render() {
     const { updateStatus } = this.props
-    return <Container>{updateStatus}</Container>
+    const isToggled = updateStatus === 'downloaded'
+    return (
+      <Motion
+        style={{
+          offset: spring(isToggled ? 0 : -100),
+        }}
+      >
+        {m => <Container offset={m.offset}>{this.renderStatus()}</Container>}
+      </Motion>
+    )
   }
 }
 

src/components/Wrapper.js

@@ -31,8 +31,6 @@ class Wrapper extends Component<{}> {
         <IsUnlocked
           render={() => (
             <Fragment>
-              <UpdateNotifier />
-
               {Object.entries(modals).map(([name, ModalComponent]: [string, any]) => (
                 <ModalComponent key={name} />
               ))}
@@ -42,11 +40,14 @@ class Wrapper extends Component<{}> {
 
                 <Box shrink grow bg="cream">
                   <TopBar />
-                  <GrowScroll>
-                    <Route path="/" exact component={DashboardPage} />
-                    <Route path="/settings" component={SettingsPage} />
-                    <Route path="/account/:id" component={AccountPage} />
-                  </GrowScroll>
+                  <Box grow relative>
+                    <UpdateNotifier />
+                    <GrowScroll>
+                      <Route path="/" exact component={DashboardPage} />
+                      <Route path="/settings" component={SettingsPage} />
+                      <Route path="/account/:id" component={AccountPage} />
+                    </GrowScroll>
+                  </Box>
                 </Box>
               </Box>
             </Fragment>

src/main/autoUpdate.js

@@ -14,3 +14,7 @@ export default (notify: SendFunction) => {
 
   autoUpdater.checkForUpdatesAndNotify()
 }
+
+export function quitAndInstall() {
+  autoUpdater.quitAndInstall()
+}

src/main/bridge.js

@@ -5,7 +5,7 @@ import { ipcMain } from 'electron'
 import objectPath from 'object-path'
 import { resolve } from 'path'
 
-import setupAutoUpdater from './autoUpdate'
+import setupAutoUpdater, { quitAndInstall } from './autoUpdate'
 
 function onForkChannel(forkType, callType) {
   return (event: any, payload) => {
@@ -49,6 +49,7 @@ ipcMain.on('accounts', onForkChannel('accounts', 'async'))
 const handlers = {
   updater: {
     init: setupAutoUpdater,
+    quitAndInstall,
   },
 }
 

src/reducers/update.js

@@ -39,6 +39,10 @@ export function getUpdateStatus(state: { update: UpdateState }): UpdateStatus {
   return state.update.status
 }
 
+export function getUpdateData(state: { update: UpdateState }): Object {
+  return state.update.data || {}
+}
+
 // Default export
 
 export default handleActions(handlers, state)

src/styles/global.js

@@ -37,4 +37,8 @@ injectGlobal`
   em {
     font-style: italic;
   }
+
+  ::-webkit-scrollbar {
+      display: none;
+  }
 `

yarn.lock

@@ -7313,7 +7313,7 @@ react-mortal@^3.0.1:
     react-motion "^0.5.0"
     react-portal "^4.0.0"
 
-react-motion@^0.5.0:
+react-motion@^0.5.0, react-motion@^0.5.2:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/react-motion/-/react-motion-0.5.2.tgz#0dd3a69e411316567927917c6626551ba0607316"
   dependencies: