Add auto updater

Author: kadiryazici

package.json

@@ -14,7 +14,6 @@
   "dependencies": {
     "@tauri-apps/api": "^1.2.0",
     "@vueuse/core": "^9.12.0",
-    "compare-versions": "6.0.0-rc.1",
     "dayjs": "^1.11.7",
     "p-all": "^4.0.0",
     "pinia": "^2.0.29",

pnpm-lock.yaml

@@ -16,7 +16,7 @@ tauri-build = { version = "1.2", features = [] }
 [dependencies]
 serde_json = "1.0"
 serde = { version = "1.0", features = ["derive"] }
-tauri = { version = "1.2.4", features = ["dialog-confirm", "http-request", "icon-ico", "icon-png", "macos-private-api", "notification-all", "os-all", "process-exit", "shell-open", "system-tray", "updater"] }
+tauri = { version = "1.2.4", features = ["dialog-confirm", "http-request", "icon-ico", "icon-png", "macos-private-api", "notification-all", "os-all", "process-exit", "process-relaunch", "shell-open", "system-tray", "updater"] }
 window-vibrancy = "0.3.2"
 tiny_http = "0.12.0"
 ascii = "1.1.0"

src-tauri/Cargo.toml

@@ -25,7 +25,8 @@
         "scope": ["https://github.com/*", "https://api.github.com/*", "http://localhost:23846/*", "http://localhost:15830/*", "http://localhost:12840/*"]
       },
       "process": {
-        "exit": true
+        "exit": true,
+        "relaunch": true
       },
       "notification": {
         "all": true

src-tauri/tauri.conf.json

@@ -72,7 +72,7 @@ function handleClick(e: MouseEvent) {
   &,
   &-icon {
     vertical-align: middle;
-    display: flex;
+    display: inline-flex;
     align-items: center;
   }
 

src/api/releases.ts

@@ -2,7 +2,7 @@
 import { open } from '@tauri-apps/api/shell'
 import { exit } from '@tauri-apps/api/process'
 import { computed } from 'vue'
-import { Page, REPO_LINK, REPO_RELEASES_LINK } from '../constants'
+import { Page, REPO_LINK } from '../constants'
 import { useStore } from '../stores/store'
 import { AppStorage } from '../storage'
 import { useKey } from '../composables/useKey'
@@ -12,6 +12,7 @@ import Popover from './Popover.vue'
 import MenuItems, { menuItem } from './MenuItems.vue'
 import Tooltip from './Tooltip.vue'
 import SlotRef from './SlotRef.vue'
+import PopoverContentInstallUpdate from './PopoverContentInstallUpdate.vue'
 
 const store = useStore()
 
@@ -76,10 +77,7 @@ useKey('r', () => {
     <div class="lower">
       <SlotRef v-if="store.newRelease != null">
         <template #default>
-          <SidebarButton
-            highlight
-            @click="open(`${REPO_RELEASES_LINK}/tag/${store.newRelease!.tag_name}`)"
-          >
+          <SidebarButton highlight>
             <Icons.Download16 />
           </SidebarButton>
         </template>
@@ -90,6 +88,17 @@ useKey('r', () => {
             position="right"
             text="A new version is available"
           />
+
+          <Popover
+            :target="el"
+            :wowerlayOptions="{ position: 'right-end' }"
+          >
+            <PopoverContentInstallUpdate
+              :loading="store.installingUpate"
+              :manifest="store.newRelease"
+              @install="store.updateAndRestart()"
+            />
+          </Popover>
         </template>
       </SlotRef>
 

src/components/AppButton.vue

@@ -0,0 +1,67 @@
+<script lang="ts" setup>
+import type { UpdateManifest } from '@tauri-apps/api/updater'
+import AppButton from './AppButton.vue'
+import EmptyState from './EmptyState.vue'
+
+interface Props {
+  manifest: UpdateManifest
+  loading?: boolean
+}
+
+defineProps<Props>()
+
+defineEmits<{ (e: 'install'): void }>()
+
+const appVersion = __APP_VERSION__
+</script>
+
+<template>
+  <div class="install-update">
+    <EmptyState :description="`Gitification ${manifest.version} is available!`">
+      <template #icon>
+        <img
+          style="border-radius: 50%;"
+          width="50"
+          draggable="false"
+          height="50"
+          src="/src/assets/img/icon.png"
+        >
+      </template>
+
+      <template #footer>
+        <p class="pharagraph">
+          Current version is <b>{{ appVersion }}</b>
+        </p>
+
+        <AppButton
+          :loading="loading"
+          @click="$emit('install')"
+        >
+          Install
+        </AppButton>
+      </template>
+    </EmptyState>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.install-update {
+  .pharagraph {
+    color: var(--text-faded);
+    font-size: 12px;
+    margin-bottom: 15px;
+  }
+}
+
+:deep(.header) {
+  font-size: 16px;
+}
+
+.empty-state {
+  padding: 15px;
+
+  :deep(.empty-state-footer) {
+    margin-top: 5px
+  }
+}
+</style>

src/components/AppSidebar.vue

@@ -18,7 +18,6 @@ export const notificationApiMutex = new Mutex()
 
 export const REPOSITORY_PATH = 'Gitification-App/gitification'
 export const REPO_LINK = `https://github.com/${REPOSITORY_PATH}` as const
-export const REPO_RELEASES_LINK = `https://github.com/${REPOSITORY_PATH}/releases` as const
 export const FETCH_INTERVAL_DURATION = 60000
 export const SERVER_PORTS = [23846, 15830, 12840]
 

src/components/PopoverContentInstallUpdate.vue

@@ -8,12 +8,11 @@ import { isEnabled as isAutostartEnabled } from 'tauri-plugin-autostart-api'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import { isPermissionGranted } from '@tauri-apps/api/notification'
+import { checkUpdate } from '@tauri-apps/api/updater'
 import App from './App.vue'
 import { AppStorage, cacheStorageFromDisk } from './storage'
 import { useStore } from './stores/store'
 import { Page } from './constants'
-import { getReleases } from './api/releases'
-import { getNewRelease } from './utils/getNewRelease'
 import { initDevtools } from './utils/initDevtools'
 import { useKey } from './composables/useKey'
 
@@ -49,9 +48,14 @@ async function main() {
     store.fetchNotifications(true)
   }
 
-  {
-    const releases = await getReleases(AppStorage.get('accessToken'))
-    store.newRelease = getNewRelease(releases)
+  try {
+    const { shouldUpdate, manifest } = await checkUpdate()
+
+    if (shouldUpdate)
+      store.newRelease = manifest!
+  }
+  catch (error) {
+    console.error(error)
   }
 
   app.mount('#app')