From ac90ff86ed4a2263dd96a07dc1d24d2ebee0c245 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20Fr=C3=B6hlich?= <jan.froehlich.janf@gmail.com>
Date: Sat, 23 Mar 2024 01:33:31 +0100
Subject: [PATCH] fix(blog): rework blog list fetching

---
 components/content/BlogList.vue | 20 +++++++++-----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/components/content/BlogList.vue b/components/content/BlogList.vue
index 8959cb07..795dda4c 100644
--- a/components/content/BlogList.vue
+++ b/components/content/BlogList.vue
@@ -6,23 +6,22 @@ import type { BlogArticle } from '~/types'
 const appConfig = useAppConfig()
 const route = useRoute()
 
-const { data: articles, refresh } = useFetch<BlogArticle[]>('/api/blog.json')
+const page = ref(Math.max(Number.parseInt(route.query.page as string) || 1, 1))
+const active = useState()
 
-const query = computed(() => defu({ page: Math.max(1, Number.parseInt(route.query.page as string) || 1) }, route.query) as { page: number })
-const page = ref(query.value.page)
+const { data: articles } = useFetch<BlogArticle[]>('/api/blog.json', {
+  default: () => [],
+})
 
-// When route changes, update the page
-watch(query, () => {
-  page.value = query.value.page
+watchEffect(() => {
+  page.value = Math.max(Number.parseInt(route.query.page as string) || 1, 1)
 })
 
-// When page changes, update the route
 watch(page, () => {
   navigateTo({ query: { page: page.value > 1 ? page.value : undefined } })
-  refresh()
 })
 
-const pagePosts = computed(() => {
+const pageArticles = computed(() => {
   const start = (page.value - 1) * 12
   const end = start + 12
   return articles.value?.slice(start, end)
@@ -44,7 +43,6 @@ function getBadgeProps(badge: keyof typeof appConfig.app.blog.badges | Badge) {
 //   title: page.value.title,
 //   description: page.value.description,
 // })
-const active = useState()
 </script>
 
 <template>
@@ -52,7 +50,7 @@ const active = useState()
     <UPagination v-model="page" :page-count="12" :total="articles.length" class="w-full" />
     <UBlogList>
       <UBlogPost
-        v-for="(article, index) in pagePosts"
+        v-for="(article, index) in pageArticles"
         :key="index"
         :to="article._path"
         :title="article.title"