feat: Connect updater events to UI

Author: ashchan

packages/neuron-ui/src/components/GeneralSetting/index.tsx

@@ -1,6 +1,7 @@
-import React, { useCallback, useState } from 'react'
+import React, { useContext, useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Stack, PrimaryButton, Spinner, Text, ProgressIndicator } from 'office-ui-fabric-react'
+import { NeuronWalletContext } from 'states/stateProvider'
 import { StateWithDispatch } from 'states/stateProvider/reducer'
 import { addPopup } from 'states/stateProvider/actionCreators'
 import { checkForUpdates, downloadUpdate, installUpdate, clearCellCache } from 'services/remote'
@@ -26,7 +27,7 @@ const UpdateDownloadStatus = ({
         <Stack horizontal horizontalAlign="start">
           <PrimaryButton
             onClick={download}
-            disabled={available}
+            disabled={!available}
             styles={{
               root: {
                 minWidth: 180,
@@ -78,23 +79,19 @@ const UpdateDownloadStatus = ({
 
 const GeneralSetting = ({ dispatch }: React.PropsWithoutRef<StateWithDispatch>) => {
   const [t] = useTranslation()
-  const [clearing, setClearing] = useState(false)
-  const [checkingUpdates, setCheckingUpdates] = useState(false) // TODO: checkingUpdates should be fetched from backend
-  const [downloadingUpdate] = useState(false)
+  const { updater } = useContext(NeuronWalletContext)
+  const [clearingCache, setClearingCache] = useState(false)
 
   const checkUpdates = useCallback(() => {
-    setCheckingUpdates(true)
-    setTimeout(() => {
-      checkForUpdates()
-    }, 100)
-  }, [dispatch])
+    checkForUpdates()
+  }, [])
 
   const clearCache = useCallback(() => {
-    setClearing(true)
+    setClearingCache(true)
     setTimeout(() => {
       clearCellCache().finally(() => {
         addPopup('clear-cache-successfully')(dispatch)
-        setClearing(false)
+        setClearingCache(false)
       })
     }, 100)
   }, [dispatch])
@@ -103,20 +100,20 @@ const GeneralSetting = ({ dispatch }: React.PropsWithoutRef<StateWithDispatch>)
     <Stack tokens={{ childrenGap: 15 }}>
       <Stack>
         <Stack horizontal horizontalAlign="start">
-          {downloadingUpdate ? (
-            <UpdateDownloadStatus progress={1} newVersion="v0.25.2" />
+          {updater.version !== '' || updater.downloadProgress >= 0 ? (
+            <UpdateDownloadStatus progress={updater.downloadProgress} newVersion={updater.version} />
           ) : (
             <PrimaryButton
               onClick={checkUpdates}
-              disabled={checkingUpdates}
+              disabled={updater.checking}
               ariaDescription="Check updates"
               styles={{
                 root: {
                   minWidth: 180,
                 },
               }}
             >
-              {checkingUpdates ? <Spinner /> : t('updates.check-updates')}
+              {updater.checking ? <Spinner /> : t('updates.check-updates')}
             </PrimaryButton>
           )}
         </Stack>
@@ -129,15 +126,15 @@ const GeneralSetting = ({ dispatch }: React.PropsWithoutRef<StateWithDispatch>)
         <Stack horizontal horizontalAlign="start">
           <PrimaryButton
             onClick={clearCache}
-            disabled={clearing}
+            disabled={clearingCache}
             ariaDescription="Clear cache"
             styles={{
               root: {
                 minWidth: 180,
               },
             }}
           >
-            {clearing ? <Spinner /> : t('settings.general.clear-cache')}
+            {clearingCache ? <Spinner /> : t('settings.general.clear-cache')}
           </PrimaryButton>
         </Stack>
       </Stack>

packages/neuron-ui/src/locales/en.json

@@ -350,7 +350,7 @@
       "update-not-available": "There are currently no updates available.",
       "updates-found-do-you-want-to-update": "An update ({{version}}) is available, do you want to download and update now?",
       "download-update": "Download Update",
-      "updates-downloaded-about-to-quit-and-install": "Update downloaded. Neuron will quit and install the update...",
+      "updates-downloaded-about-to-quit-and-install": "Update downloaded. Please quit to install the update.",
       "quit-and-install": "Quit and Install"
     }
   }

packages/neuron-ui/src/locales/zh.json

@@ -350,7 +350,7 @@
       "update-not-available": "没有可供升级的新版本。",
       "updates-found-do-you-want-to-update": "有可供升级的新版本({{version}})。现在进行下载和升级吗？",
       "download-update": "下载更新以升级",
-      "updates-downloaded-about-to-quit-and-install": "下载完成。Neuron 将退出并安装新版本...",
+      "updates-downloaded-about-to-quit-and-install": "下载完成。请退出并安装新版本。",
       "quit-and-install": "退出并安装"
     }
   }

packages/neuron-wallet/src/controllers/update.ts

@@ -38,10 +38,10 @@ export default class UpdateController {
     autoUpdater.removeAllListeners()
 
     autoUpdater.on('error', error => {
-      dialog.showErrorBox('Error', error == null ? 'unknown' : (error.stack || error).toString())
-
       UpdateController.isChecking = false
       this.notify()
+
+      dialog.showErrorBox('Error', error == null ? 'unknown' : (error.stack || error).toString())
     })
 
     autoUpdater.on('update-available', (info: UpdateInfo) => {
@@ -50,19 +50,23 @@ export default class UpdateController {
     })
 
     autoUpdater.on('update-not-available', () => {
+      UpdateController.isChecking = false
+      this.notify()
+
       dialog.showMessageBox({
         type: 'info',
         message: i18n.t('updater.update-not-available'),
         buttons: [i18n.t('common.ok')],
       })
+    })
 
-      UpdateController.isChecking = false
-      this.notify()
+    autoUpdater.on('download-progress', progress => {
+      this.notify(progress.percent / 100)
     })
 
     autoUpdater.on('update-downloaded', () => {
       UpdateController.isChecking = false
-      this.notify(1, 'toto', '')
+      this.notify(1)
     })
   }