refactor: Refactor update logic

packages/neuron-ui/src/components/GeneralSetting/hooks.ts

@@ -0,0 +1,46 @@
+import { Dispatch, SetStateAction, useCallback, useMemo, useState } from 'react'
+import { cancelCheckUpdates, cancelDownloadUpdate, checkForUpdates } from 'services/remote'
+
+export const useUpdateDownloadStatus = ({
+  setShowCheckDialog,
+  downloadProgress,
+}: {
+  setShowCheckDialog: Dispatch<SetStateAction<boolean>>
+  downloadProgress: number
+}) => {
+  const [showUpdateDownloadStatus, setShowUpdateDownloadStatus] = useState(false)
+  const openShowUpdateDownloadStatus = useCallback(() => {
+    setShowUpdateDownloadStatus(true)
+  }, [])
+  const onCheckUpdate = useCallback(() => {
+    setShowCheckDialog(true)
+    checkForUpdates()
+  }, [setShowCheckDialog])
+  const hasStartDownload = useMemo(() => downloadProgress >= 0, [downloadProgress])
+  return {
+    showUpdateDownloadStatus,
+    openShowUpdateDownloadStatus,
+    onCheckUpdate,
+    onCancel: useCallback(() => {
+      if (hasStartDownload) {
+        cancelDownloadUpdate()
+      }
+      setShowUpdateDownloadStatus(false)
+    }, [hasStartDownload]),
+  }
+}
+
+export const useCheckUpdate = () => {
+  const [showCheckDialog, setShowCheckDialog] = useState(false)
+  const onCancelCheckUpdates = useCallback(() => {
+    if (showCheckDialog) {
+      cancelCheckUpdates()
+    }
+    setShowCheckDialog(false)
+  }, [showCheckDialog])
+  return {
+    showCheckDialog,
+    setShowCheckDialog,
+    onCancelCheckUpdates,
+  }
+}

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

@@ -6,21 +6,15 @@ import LanguageDialog from 'components/LanguageDialog'
 import AlertDialog from 'widgets/AlertDialog'
 import { ReactComponent as VersionLogo } from 'widgets/Icons/VersionLogo.svg'
 import { ReactComponent as ArrowNext } from 'widgets/Icons/ArrowNext.svg'
-import {
-  checkForUpdates,
-  cancelCheckUpdates,
-  downloadUpdate,
-  cancelDownloadUpdate,
-  installUpdate,
-  getVersion,
-} from 'services/remote'
+import { cancelCheckUpdates, downloadUpdate, installUpdate, getVersion } from 'services/remote'
 import { uniformTimeFormatter, bytesFormatter, clsx } from 'utils'
 import { LanguageSelect } from 'widgets/Icons/icon'
 import styles from './generalSetting.module.scss'
+import { useCheckUpdate, useUpdateDownloadStatus } from './hooks'
 
 interface UpdateDownloadStatusProps {
   show: boolean
-  onCancel: (status?: string) => void
+  onCancel: () => void
   progress: number
   newVersion: string
   releaseDate: string
@@ -69,7 +63,7 @@ const UpdateDownloadStatus = ({
         onConfirm={handleConfirm}
         disabled={!available}
         confirmText={t('updates.install-update')}
-        onCancel={() => onCancel('checked')}
+        onCancel={onCancel}
         title={t('updates.update-available')}
         confirmProps={{
           'data-method': 'download',
@@ -135,76 +129,45 @@ const GeneralSetting = ({ updater }: GeneralSettingProps) => {
   const [showLangDialog, setShowLangDialog] = useState(false)
   const [searchParams] = useSearchParams()
   const [errorMsg, setErrorMsg] = useState('')
-  const [dialogType, setDialogType] = useState<'' | 'checking' | 'checked' | 'updating' | 'updated'>('')
-  const [isFetchUpdateByClick, setIsFetchUpdateByClick] = useState<boolean>(false)
-  const { version: newVersion } = updater
+  const { showCheckDialog, setShowCheckDialog, onCancelCheckUpdates } = useCheckUpdate()
+  const { version: newVersion, checking, downloadProgress } = updater
+  const { showUpdateDownloadStatus, openShowUpdateDownloadStatus, onCheckUpdate, onCancel } = useUpdateDownloadStatus({
+    setShowCheckDialog,
+    downloadProgress,
+  })
 
-  const version = useMemo(() => {
+  useEffect(() => {
+    if (showCheckDialog && newVersion) {
+      setShowCheckDialog(false)
+      openShowUpdateDownloadStatus()
+    }
+  }, [showCheckDialog, newVersion, openShowUpdateDownloadStatus, setShowCheckDialog])
+
+  const currentVersion = useMemo(() => {
     return getVersion()
   }, [])
 
   useEffect(() => {
     const checkUpdate = searchParams.get('checkUpdate')
     if (checkUpdate === '1') {
-      checkForUpdates()
-      setIsFetchUpdateByClick(true)
+      onCheckUpdate()
     }
-    return () => setIsFetchUpdateByClick(false)
-  }, [searchParams, checkForUpdates])
+  }, [searchParams, onCheckUpdate])
 
   useEffect(() => {
     if (updater.errorMsg) {
       setErrorMsg(updater.errorMsg)
       cancelCheckUpdates()
-      return
-    }
-    if (updater.isUpdated) {
-      setDialogType('updated')
-      return
     }
-    if (updater.checking) {
-      setDialogType('checking')
-      return
-    }
-    if (newVersion) {
-      setDialogType('checked')
-      return
-    }
-    if (updater.downloadProgress > 0) {
-      setDialogType('updating')
-      return
-    }
-    setDialogType('')
-  }, [updater, setDialogType, setErrorMsg])
-
-  const handleUpdate = useCallback(
-    (e: React.SyntheticEvent) => {
-      const {
-        dataset: { method },
-      } = e.target as HTMLElement
-
-      setIsFetchUpdateByClick(true)
-      if (newVersion) {
-        setDialogType('checked')
-      } else if (method === 'cancelCheck') {
-        if (dialogType === 'checking') {
-          cancelCheckUpdates()
-        }
-        setDialogType('')
-      } else if (method === 'check') {
-        checkForUpdates()
-      }
-    },
-    [dialogType, setDialogType, cancelCheckUpdates, checkForUpdates]
-  )
+  }, [updater.errorMsg, setErrorMsg])
 
   return (
     <div className={styles.container}>
       <div className={clsx(styles.content, `${newVersion ? styles.showVersion : ''}`)} data-new-version-tip="New">
         <p>
-          {t('settings.general.version')} v{newVersion || version}
+          {t('settings.general.version')} v{newVersion || currentVersion}
         </p>
-        <button type="button" onClick={handleUpdate} data-method="check">
+        <button type="button" onClick={newVersion ? openShowUpdateDownloadStatus : onCheckUpdate} data-method="check">
           {t(newVersion ? 'updates.install-update' : 'updates.check-updates')} <ArrowNext />
         </button>
       </div>
@@ -228,37 +191,27 @@ const GeneralSetting = ({ updater }: GeneralSettingProps) => {
         message={errorMsg}
         type="failed"
         onCancel={() => {
-          setIsFetchUpdateByClick(false)
           setErrorMsg('')
         }}
       />
 
       <Dialog
-        show={['checking', 'updated'].includes(dialogType) && isFetchUpdateByClick}
+        show={showCheckDialog}
         showCancel={false}
         showHeader={false}
-        confirmText={t(dialogType === 'checking' ? 'common.cancel' : 'common.ok')}
-        onConfirm={handleUpdate}
+        confirmText={t(checking ? 'common.cancel' : 'common.ok')}
+        onConfirm={onCancelCheckUpdates}
         className={styles.confirmDialog}
-        confirmProps={{
-          'data-method': 'cancelCheck',
-        }}
       >
         <div className={styles.wrap}>
           <VersionLogo />
-          <p>{t(dialogType === 'checking' ? 'updates.checking-updates' : 'updates.update-not-available')}</p>
+          <p>{t(checking || newVersion ? 'updates.checking-updates' : 'updates.update-not-available')}</p>
         </div>
       </Dialog>
 
       <UpdateDownloadStatus
-        show={dialogType === 'updating' || (dialogType === 'checked' && isFetchUpdateByClick)}
-        onCancel={status => {
-          if (status !== 'checked') {
-            cancelDownloadUpdate()
-          }
-          setIsFetchUpdateByClick(false)
-          setDialogType('')
-        }}
+        show={showUpdateDownloadStatus}
+        onCancel={onCancel}
         progress={updater.downloadProgress}
         progressInfo={updater.progressInfo}
         newVersion={updater.version}

packages/neuron-ui/src/containers/Navbar/index.tsx

@@ -68,6 +68,8 @@ const MenuButton = ({
   )
 }
 
+const ONE_DAY_MILLISECONDS = 24 * 3600 * 1000
+
 const Navbar = () => {
   const { pathname } = useLocation()
   const dispatch = useDispatch()
@@ -94,21 +96,14 @@ const Navbar = () => {
   }, [dispatch])
 
   useEffect(() => {
-    const now = new Date()
-    const nextTriggerTime = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59)
-
     checkForUpdates()
-    if (nextTriggerTime) {
-      const timeDiff = nextTriggerTime.getTime() - now.getTime()
-
-      setTimeout(() => {
-        checkForUpdates()
-        setInterval(() => {
-          checkForUpdates()
-        }, 24 * 60 * 60 * 1000)
-      }, timeDiff)
+    const interval = setInterval(() => {
+      checkForUpdates()
+    }, ONE_DAY_MILLISECONDS)
+    return () => {
+      clearInterval(interval)
     }
-  }, [checkForUpdates])
+  }, [])
 
   useEffect(() => {
     if (pathname.includes(RoutePath.Settings)) {

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

@@ -740,7 +740,7 @@
       "downloading-update": "Downloading update...",
       "update-not-available": "There are currently no updates available.",
       "updates-found-do-you-want-to-update": "An update ({{version}}) is available",
-      "install-update": "Install Update",
+      "install-update": "Immediate Update",
       "updates-downloaded-about-to-quit-and-install": "Update downloaded. Ready to install and relaunch.",
       "quit-and-install": "Install and relaunch"
     },

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

@@ -711,7 +711,7 @@
       "downloading-update": "正在下載更新…",
       "update-not-available": "當前是最新版本",
       "updates-found-do-you-want-to-update": "新版本 {{version}} 可供下載",
-      "install-update": "安裝更新",
+      "install-update": "立即更新",
       "updates-downloaded-about-to-quit-and-install": "下載完成。請安裝新版本。",
       "quit-and-install": "安裝並重啓應用"
     },

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

@@ -733,7 +733,7 @@
       "downloading-update": "正在下载更新...",
       "update-not-available": "当前是最新版本",
       "updates-found-do-you-want-to-update": "新版本 {{version}} 可供下载",
-      "install-update": "安装更新",
+      "install-update": "立即更新",
       "updates-downloaded-about-to-quit-and-install": "下载完成。请安装新版本。",
       "quit-and-install": "安装并重启应用"
     },

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

@@ -555,7 +555,7 @@ export default class ApiController {
     })
 
     handle('download-update', async () => {
-      new UpdateController(false).downloadUpdate()
+      new UpdateController(true).downloadUpdate()
     })
 
     handle('cancel-download-update', async () => {