updater progress steps

0LNetworkCommunity · Jan 3, 2024 · ee24bc8 · ee24bc8
1 parent d7f5047
commit ee24bc8
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 34 deletions.
diff --git a/src/components/about/UpgradeApp.svelte b/src/components/about/UpgradeApp.svelte
@@ -1,25 +1,22 @@
 <script lang="ts">
-  import { onDestroy, onMount } from 'svelte'
-  import { updateStatus } from '../../modules/updater'
+  import { onDestroy } from 'svelte'
+  import { updateStatus, whatUpdateStep } from '../../modules/updater'
   import { debugMode } from '../../modules/debug'
   import UpgradeButtonManual from './UpgradeButtonManual.svelte'
   import CardAlert from '../layout/CardAlert.svelte'
   import { onUpdaterEvent } from '@tauri-apps/api/updater'
 
   let unlisten
 
-  // onMount(async () => {
-  //   unlisten = await
-  // })
   onUpdaterEvent(({ error, status }) => {
-      // This will log all updater events, including status updates and errors.
-      updateStatus.update((u) => {
-        u.error = error ?? null
-        u.status = status
-        return u
-      })
-      console.log('onMount Updater event', error, status)
+    // This will log all updater events, including status updates and errors.
+    updateStatus.update((u) => {
+      u.error = error ?? null
+      u.status = status
+      return u
     })
+    console.log('onMount Updater event', error, status)
+  })
 
   onDestroy(() => {
     // don't duplicate listener next time we navigate here
@@ -28,13 +25,15 @@
 </script>
 
 <main class="uk-padding">
+  {whatUpdateStep($updateStatus)}
+
   Upgrade App
   {JSON.stringify($updateStatus)}
 
   {#if $updateStatus?.manifest}
     <CardAlert>
       <div slot="title">
-        {#if $updateStatus.refreshing}
+        {#if !$updateStatus}
           <div class="uk-text-center">
             <span class="uk-text-muted">Checking for upgrade</span>
             <span class="uk-padding" uk-spinner="ratio: 0.66"></span>
@@ -46,11 +45,14 @@
         {/if}
       </div>
 
-      <div slot="body">
-        {#if !$updateStatus?.refreshing}
-          <div class="uk-padding uk-flex uk-grid">
-            <div class="uk-margin">
-              <!-- <h4>Update Available {$updateStatus?.manifest.version}</h4> -->
+      <div slot="body" class="uk-padding">
+        {#if $updateStatus?.refreshing}
+          <div class="uk-margin">
+            <progress class="uk-progress" value={whatUpdateStep($updateStatus)} max="4" />
+            <p>{$updateStatus.msg}</p>
+          </div>
+          <div class="uk-flex uk-grid">
+            <div>
               <h5 class="uk-text-uppercase">Update Notes</h5>
               <p>{$updateStatus?.manifest.body}</p>
             </div>

diff --git a/src/components/about/UpgradeButtonManual.svelte b/src/components/about/UpgradeButtonManual.svelte
@@ -11,11 +11,11 @@
   <div>
     <p>
       {#if upToDate}
-        {$_('about.upgrade_uptodate')}
+        {$_('upgrade.uptodate')}
       {:else}
-        {$_('about.upgrade_available')}
+        {$_('upgrade.available')}
       {/if}
     </p>
-    <button class="uk-button uk-button-default" on:click={tryUpdate} disabled={checking}>{$_('about.upgrade_checkagain')}</button>
+    <button class="uk-button uk-button-default" on:click={tryUpdate} disabled={checking}>{$_('upgrade.checkagain')}</button>
   </div>
 </main>
diff --git a/src/lang/locales/en.json b/src/lang/locales/en.json
@@ -94,10 +94,13 @@
     "release": "Release",
     "version": "Version",
     "branch": "Branch",
-    "commit": "Commit",
-    "upgrade_uptodate": "You are on the current version",
-    "upgrade_available": "There is an upgrade available",
-    "upgrade_checkagain": "Check Upgrade"
+    "commit": "Commit"
+  },
+  "upgrade": {
+    "uptodate": "You are on the current version",
+    "available": "There is an upgrade available",
+    "check_again": "Check Upgrade",
+    "restart": "You can now restart the app"
   },
   "settings": {
     "title": "SETTINGS",

diff --git a/src/modules/updater.ts b/src/modules/updater.ts
@@ -6,6 +6,7 @@ import {
 } from '@tauri-apps/api/updater'
 import { relaunch } from '@tauri-apps/api/process'
 import { get, writable } from 'svelte/store'
+import { _ } from 'svelte-i18n'
 
 interface WhatsUpdate {
   refreshing: boolean
@@ -28,31 +29,28 @@ export const tryUpdate = async () => {
   updateStatus.set({ refreshing: true })
   try {
     const { shouldUpdate, manifest } = await checkUpdate()
+
     const u = get(updateStatus)
-    if (shouldUpdate) {
+    u.refreshing = false
 
-      u.msg = 'upgrade is available'
+    if (shouldUpdate) {
+      u.msg = get(_('upgrade.available')) // use internationalization to have consistent strings
       u.manifest = manifest
 
       updateStatus.set(u)
       // You could show a dialog asking the user if they want to install the update here.
       console.log(`Installing update ${manifest?.version}, ${manifest?.date}, ${manifest?.body}`)
 
-      u.msg = 'attempting install'
-      updateStatus.set(u)
       // Install the update. This will also restart the app on Windows!
       await installUpdate()
 
-      u.msg = 'attempting relaunch'
+      u.msg = get(_('upgrade.restart'))
       updateStatus.set(u)
       // On macOS and Linux you will need to restart the app manually.
       // You could use this step to display another confirmation dialog.
       await relaunch()
-      u.refreshing = false
-
     } else {
-      u.msg = 'You are on the latest version'
-      u.refreshing = false
+      u.msg = get(_('upgrade.uptodate'))
     }
     updateStatus.set(u)
   } catch (e) {
@@ -76,3 +74,16 @@ export const parseErrorString = (msg: string): UpdateErrors => {
   }
   return errEnum
 }
+
+export const whatUpdateStep = (u: WhatsUpdate): number => {
+  switch (u.status) {
+    case 'PENDING':
+      return 1
+    case 'DOWNLOADED':
+      return 2
+    case 'DONE':
+      return 3
+    default:
+      return 0
+  }
+}