From 651dcabdb15ac31d42e830c19dc173a444fefec8 Mon Sep 17 00:00:00 2001
From: ccbikai <ccbikai@gmail.com>
Date: Tue, 24 Dec 2024 12:43:19 +0800
Subject: [PATCH] feat: add error handling for link loading

Improves reliability of link loading functionality:
- Adds error state and handling for failed API requests
- Implements retry mechanism with user-facing error message
- Prevents infinite loading when errors occur
- Defers search API call to mounted hook

These changes enhance user experience by providing clear feedback and recovery options when link loading fails.
---
 components/dashboard/links/Index.vue  | 43 ++++++++++++++++++++-------
 components/dashboard/links/Search.vue | 10 ++++++-
 2 files changed, 42 insertions(+), 11 deletions(-)

diff --git a/components/dashboard/links/Index.vue b/components/dashboard/links/Index.vue
index 6b69fa9..cebaad8 100644
--- a/components/dashboard/links/Index.vue
+++ b/components/dashboard/links/Index.vue
@@ -6,23 +6,37 @@ const links = ref([])
 const limit = 24
 let cursor = ''
 let listComplete = false
+let listError = false
 
 async function getLinks() {
-  const data = await useAPI('/api/link/list', {
-    query: {
-      limit,
-      cursor,
-    },
-  })
-  links.value = links.value.concat(data.links).filter(Boolean) // Sometimes cloudflare will return null, filter out
-  cursor = data.cursor
-  listComplete = data.list_complete
+  try {
+    const data = await useAPI('/api/link/list', {
+      query: {
+        limit,
+        cursor,
+      },
+    })
+    links.value = links.value.concat(data.links).filter(Boolean) // Sometimes cloudflare will return null, filter out
+    cursor = data.cursor
+    listComplete = data.list_complete
+    listError = false
+  }
+  catch (error) {
+    console.error(error)
+    listError = true
+  }
 }
 
 const { isLoading } = useInfiniteScroll(
   document,
   getLinks,
-  { distance: 150, interval: 1000, canLoadMore: () => !listComplete },
+  {
+    distance: 150,
+    interval: 1000,
+    canLoadMore: () => {
+      return !listError && !listComplete
+    },
+  },
 )
 
 function updateLinkList(link, type) {
@@ -68,5 +82,14 @@ function updateLinkList(link, type) {
     >
       No more
     </div>
+    <div
+      v-if="listError"
+      class="flex items-center justify-center text-sm"
+    >
+      Loading links failed,
+      <Button variant="link" @click="getLinks">
+        Try again
+      </Button>
+    </div>
   </main>
 </template>
diff --git a/components/dashboard/links/Search.vue b/components/dashboard/links/Search.vue
index 25bda60..bbcb0e6 100644
--- a/components/dashboard/links/Search.vue
+++ b/components/dashboard/links/Search.vue
@@ -8,7 +8,7 @@ const isOpen = ref(false)
 const searchTerm = ref('')
 const selectedLink = ref(null)
 
-const links = await useAPI('/api/link/search')
+const links = ref([])
 
 const { results: filteredLinks } = useFuse(searchTerm, links, {
   fuseOptions: {
@@ -37,6 +37,14 @@ function selectLink(link) {
     query: { slug: link.slug },
   })
 }
+
+async function getLinks() {
+  links.value = await useAPI('/api/link/search')
+}
+
+onMounted(() => {
+  getLinks()
+})
 </script>
 
 <template>