From dd6522a8b39f2304076c8d2912a92bad3ec63557 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 13 Aug 2024 00:21:39 +0200
Subject: [PATCH] refactor: rework async BackupList

---
 app/src/types/core/api.ts           |  9 +++++
 app/src/views/backup/BackupList.vue | 53 +++++++++++------------------
 2 files changed, 29 insertions(+), 33 deletions(-)

diff --git a/app/src/types/core/api.ts b/app/src/types/core/api.ts
index d5a5e57c..df1ccaa9 100644
--- a/app/src/types/core/api.ts
+++ b/app/src/types/core/api.ts
@@ -188,3 +188,12 @@ export type BackupInfo = {
   system: Record<BackupHookKeys, { paths: string[]; size: number }>
   from_yunohost_version: string
 }
+
+export type BackupList = {
+  archives: Obj<{
+    path: string
+    created_at: string
+    description: string
+    size: number
+  }>
+}
diff --git a/app/src/views/backup/BackupList.vue b/app/src/views/backup/BackupList.vue
index fac7204b..b349e06d 100644
--- a/app/src/views/backup/BackupList.vue
+++ b/app/src/views/backup/BackupList.vue
@@ -1,47 +1,34 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-
-import { useInitialQueries } from '@/composables/useInitialQueries'
+import api from '@/api'
+import { toEntries } from '@/helpers/commons'
 import { distanceToNow, readableDate } from '@/helpers/filters/date'
 import { humanSize } from '@/helpers/filters/human'
+import type { BackupList } from '@/types/core/api'
 
-const props = defineProps<{
+defineProps<{
   id: string
 }>()
 
-const { loading } = useInitialQueries([{ uri: 'backups?with_info' }], {
-  onQueriesResponse,
-})
-const archives = ref<any[] | null>(null)
-
-function onQueriesResponse(data: any) {
-  const archives_ = Object.entries(data.archives)
-  if (archives_.length) {
-    archives.value = archives_
-      .map(([name, infos]) => {
-        infos.name = name
-        return infos
-      })
+const archives = await api
+  .get<BackupList>({ uri: 'backups?with_info', initial: true })
+  .then((data) => {
+    return toEntries(data.archives)
+      .map(([name, archive]) => ({ ...archive, name }))
       .reverse()
-  } else {
-    archives.value = null
-  }
-}
+  })
 </script>
 
 <template>
-  <ViewBase :loading="loading" skeleton="ListGroupSkeleton">
-    <template #top>
-      <TopBar
-        :button="{
-          text: $t('backup_new'),
-          icon: 'plus',
-          to: { name: 'backup-create' },
-        }"
-      />
-    </template>
+  <div>
+    <TopBar
+      :button="{
+        text: $t('backup_new'),
+        icon: 'plus',
+        to: { name: 'backup-create' },
+      }"
+    />
 
-    <BAlert v-if="!archives" :modelValue="!archives" variant="warning">
+    <BAlert v-if="!archives.length" :model-value="true" variant="warning">
       <YIcon iname="exclamation-triangle" />
       {{ $t('items_verbose_count', { items: $t('items.backups', 0) }, 0) }}
     </BAlert>
@@ -68,5 +55,5 @@ function onQueriesResponse(data: any) {
         <YIcon iname="chevron-right" class="lg fs-sm ms-auto" />
       </BListGroupItem>
     </BListGroup>
-  </ViewBase>
+  </div>
 </template>