feat: Adding check update to settings view

Author: ashchan

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

@@ -3,11 +3,21 @@ import { useTranslation } from 'react-i18next'
 import { Stack, PrimaryButton, Spinner, Text } from 'office-ui-fabric-react'
 import { StateWithDispatch } from 'states/stateProvider/reducer'
 import { addPopup } from 'states/stateProvider/actionCreators'
-import { clearCellCache } from 'services/remote'
+import { checkForUpdates, clearCellCache } from 'services/remote'
 
 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 checkUpdates = useCallback(() => {
+    setCheckingUpdates(true)
+    setTimeout(() => {
+      checkForUpdates().finally(() => {
+        setCheckingUpdates(false)
+      })
+    }, 100)
+  }, [dispatch])
 
   const clearCache = useCallback(() => {
     setClearing(true)
@@ -21,23 +31,42 @@ const GeneralSetting = ({ dispatch }: React.PropsWithoutRef<StateWithDispatch>)
 
   return (
     <Stack tokens={{ childrenGap: 15 }}>
-      <Stack horizontal horizontalAlign="start">
-        <PrimaryButton
-          onClick={clearCache}
-          disabled={clearing}
-          ariaDescription="Create new network configuration"
-          styles={{
-            root: {
-              minWidth: 150,
-            },
-          }}
-        >
-          {clearing ? <Spinner /> : t('settings.general.clear-cache')}
-        </PrimaryButton>
+      <Stack>
+        <Stack horizontal horizontalAlign="start">
+          <PrimaryButton
+            onClick={checkUpdates}
+            disabled={checkingUpdates}
+            ariaDescription="Check updates"
+            styles={{
+              root: {
+                minWidth: 150,
+              },
+            }}
+          >
+            {checkingUpdates ? <Spinner /> : t('updates.check-updates')}
+          </PrimaryButton>
+        </Stack>
+      </Stack>
+
+      <Stack>
+        <Text as="p" variant="medium">
+          {t('settings.general.clear-cache-description')}
+        </Text>
+        <Stack horizontal horizontalAlign="start">
+          <PrimaryButton
+            onClick={clearCache}
+            disabled={clearing}
+            ariaDescription="Clear cache"
+            styles={{
+              root: {
+                minWidth: 150,
+              },
+            }}
+          >
+            {clearing ? <Spinner /> : t('settings.general.clear-cache')}
+          </PrimaryButton>
+        </Stack>
       </Stack>
-      <Text as="p" variant="medium">
-        {t('settings.general.clear-cache-description')}
-      </Text>
     </Stack>
   )
 }

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

@@ -343,6 +343,10 @@
       "withdraw-alert": "Hint: these are only {{epochs}} epochs (~{{hours}} hours) until the end of your current lock period. If you wish to withdraw in current lock period, please send withdraw request in time. There are {{nextLeftEpochs}} epochs(~{{days}} days) until the end of your next lock period.",
       "insufficient-period-alert-title": "Referenced Header is Invalid",
       "insufficient-period-alert-message": "Only mature header can be referenced in transactions(Matureness requires 4 epochs)"
+    },
+    "updates": {
+      "check-updates": "Check for Updates",
+      "download-update": "Download Update"
     }
   }
 }

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

@@ -343,6 +343,10 @@
       "withdraw-alert": "提示：本补贴申请距离 Nervos DAO 规则允许的最近一个锁定周期仅剩下 {{epochs}} 个 epoch (约 {{hours}} 小时)。 如果您希望在本锁定周期取出，请及时提交取出申请，以确保取出申请能在本锁定周期结束之前上链。下一个锁定周期的结束时间预计为 {{nextLeftEpochs}} 个 epochs (约 {{days}} 天)。",
       "insufficient-period-alert-title": "Header 引用无效",
       "insufficient-period-alert-message": "交易只能引用已成熟的 Header(成熟期为 4 个 epochs)"
+    },
+    "updates": {
+      "check-updates": "检查更新",
+      "download-update": "下载更新"
     }
   }
 }

packages/neuron-ui/src/services/remote/app.ts

@@ -5,11 +5,13 @@ export const getNeuronWalletState = apiMethodWrapper<void>(api => () => api.load
 export const handleViewError = apiMethodWrapper<string>(api => errorMessage => api.handleViewError(errorMessage))
 export const contextMenu = apiMethodWrapper<{ type: string; id: string }>(api => params => api.contextMenu(params))
 
+export const checkForUpdates = apiMethodWrapper<void>(api => () => api.checkForUpdates())
 export const clearCellCache = apiMethodWrapper<void>(api => () => api.clearCellCache())
 
 export default {
   getNeuronWalletState,
   handleViewError,
   contextMenu,
+  checkForUpdates,
   clearCellCache,
 }

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

@@ -4,7 +4,7 @@ import env from 'env'
 import i18n from 'utils/i18n'
 import { popContextMenu } from './app/menu'
 import { showWindow } from './app/show-window'
-import { TransactionsController, WalletsController, SyncController, NetworksController } from 'controllers'
+import { TransactionsController, WalletsController, SyncController, NetworksController, UpdateController } from 'controllers'
 import { NetworkType, NetworkID, Network } from 'types/network'
 import NetworksService from 'services/networks'
 import WalletsService from 'services/wallets'
@@ -271,6 +271,7 @@ export default class ApiController {
   }
 
   // Dao
+
   @MapApiResponse
   public static async getDaoCells(
     params: Controller.Params.GetDaoCellsParams
@@ -279,6 +280,12 @@ export default class ApiController {
   }
 
   // settings
+
+  @MapApiResponse
+  public static async checkForUpdates() {
+    return new UpdateController().checkUpdates()
+  }
+
   @MapApiResponse
   public static async clearCellCache() {
     await SyncController.stopSyncing()

packages/neuron-wallet/src/controllers/app/menu.ts

@@ -79,7 +79,10 @@ const updateApplicationMenu = (mainWindow: BrowserWindow | null) => {
       {
         enabled: isMainWindow,
         label: i18n.t('application-menu.neuron.check-updates'),
-        click: (menuItem: MenuItem) => { new UpdateController().checkUpdates(menuItem) }
+        click: (menuItem: MenuItem) => {
+           new UpdateController().checkUpdates(menuItem)
+           navTo(URL.Preference)
+         }
       },
       separator,
       {
@@ -225,7 +228,10 @@ const updateApplicationMenu = (mainWindow: BrowserWindow | null) => {
     })
     helpSubmenu.push({
       label: i18n.t('application-menu.neuron.check-updates'),
-      click: (menuItem: MenuItem) => { new UpdateController().checkUpdates(menuItem) }
+      click: (menuItem: MenuItem) => {
+        new UpdateController().checkUpdates(menuItem)
+        navTo(URL.Preference)
+      }
     })
     helpSubmenu.push({
       id: 'about',

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

@@ -12,9 +12,12 @@ export default class UpdateController {
     this.bindEvents()
   }
 
-  public checkUpdates(sender: { enabled: boolean }) {
+  // TODO: refactor: do not require sender
+  public checkUpdates(sender: { enabled: boolean } | null = null) {
     this.sender = sender
-    this.sender.enabled = false
+    if (this.sender) {
+      this.sender.enabled = false
+    }
 
     autoUpdater.checkForUpdates()
   }