chore : electron-auto-update refinement

electron/main/update.ts

@@ -52,7 +52,6 @@ export function update(win: Electron.BrowserWindow) {
       }
     )
   })
-
   // Install now
   ipcMain.handle('quit-and-install', () => {
     autoUpdater.quitAndInstall(false, true)

src/components/update/Progress/index.tsx

@@ -11,10 +11,10 @@ const Progress: React.FC<React.PropsWithChildren<{
       <div className='progress-pr'>
         <div
           className='progress-rate'
-          style={{ width: `${percent / 100}%` }}
+          style={{ width: `${percent}%` }}
         />
       </div>
-      <span className='progress-num'>{percent}%</span>
+      <span className='progress-num'>{(percent ?? 0).toString().substring(0,4)}%</span>
     </div>
   )
 }

src/components/update/Progress/progress.module.scss

@@ -7,6 +7,7 @@
       border: 1px solid #000;
       border-radius: 3px;
       height: 6px;
+      width: 100px;
     }
 
     .progress-rate {

src/components/update/index.tsx

@@ -28,14 +28,12 @@ const Update = () => {
      * @type {import('electron-updater').UpdateCheckResult | null | { message: string, error: Error }}
      */
     const result = await ipcRenderer.invoke('check-update')
+    setProgressInfo({ percent: 0 })
     setChecking(false)
-
-    if (result?.error) {
-      console.error(result.error)
-      setUpdateAvailable(false)
-    } else {
-      setUpdateAvailable(true)
     setModalOpen(true)
+    if (result?.error) {
+      setUpdateAvailable(false)
+      setUpdateError(result?.error)
     }
   }
 
@@ -50,20 +48,27 @@ const Update = () => {
         onCancel: () => setModalOpen(false),
         onOk: () => ipcRenderer.invoke('start-download'),
       }))
+      setUpdateAvailable(true)
+    } else {
+      setUpdateAvailable(false)
+      setUpdateError(undefined)
     }
   }, [])
 
   const onUpdateError = useCallback((_event: Electron.IpcRendererEvent, arg1: ErrorType) => {
-    console.error(arg1.error)
+    console.error('arg1.error',arg1.error)
+    setUpdateAvailable(false)
     setUpdateError(arg1)
   }, [])
 
   const onDownloadProgress = useCallback((_event: Electron.IpcRendererEvent, arg1: ProgressInfo) => {
     console.log(arg1)
+    setUpdateAvailable(true)
     setProgressInfo(arg1)
   }, [])
 
   const onUpdateDownloaded = useCallback((_event: Electron.IpcRendererEvent, ...args: any[]) => {
+    setProgressInfo({ percent: 100 })
     setModalBtn(state => ({
       ...state,
       cancelText: 'Later',
@@ -87,6 +92,8 @@ const Update = () => {
     }
   }, [])
 
+  const isUpdate = updateAvailable && versionInfo
+
   return (
     <>
       <Modal
@@ -95,21 +102,11 @@ const Update = () => {
         okText={modalBtn?.okText}
         onCancel={modalBtn?.onCancel}
         onOk={modalBtn?.onOk}
-        footer={!versionInfo?.update ? /* hide footer */null : undefined}
+        footer={isUpdate ? /* hide footer */null : undefined}
       >
         <div className={styles.modalslot}>
-          {updateError ? (
+          {
-            <div className='update-error'>
+            isUpdate
-              <p>Error downloading the latest version.</p>
-              <p>{updateError.message}</p>
-            </div>
-          ) : null}
-          {!updateAvailable ? (
-            <div className='update-not-available'>
-              <span>Check update is Error, Please check your Network!</span>
-            </div>
-          ) : null}
-          {versionInfo
               ? (
                 <div>
                   <div>The last version is: v{versionInfo.newVersion}</div>
@@ -122,7 +119,18 @@ const Update = () => {
                   </div>
                 </div>
               )
-            : <span>Checking...</span>}
+              : updateError
+                ? (
+                  <div className='update-error'>
+                    <p>Error downloading the latest version.</p>
+                    <p>{updateError.message}</p>
+                  </div>
+                ) : (
+                  <div>
+                    <div>The last version is: v{versionInfo?.version}</div>
+                  </div>
+                )
+          }
         </div>
       </Modal>
       <button disabled={checking} onClick={checkUpdate}>