Fix useAsync

src/pages/blog/_slug.vue

@@ -134,20 +134,20 @@ export default defineComponent({
     })
 
     const liked = ref($storage.getCookie(`${slug.value}`) !== undefined)
-    const likes = ref(0)
 
-    useAsync(() => {
-      $axios.get(`/api/posts/${slug.value}`, {
+    const likes = useAsync(async () => {
+      const response = await $axios.get(`/api/posts/${slug.value}`, {
         headers: {
           'Authorization': `Bearer ${process.env.API_TOKEN}`
         }
-      }).then((response) => {
-        likes.value = response.data.likes
-      }).catch((error) => {
-        $sentry.captureEvent(error)
-        app.error({statusCode: 500})
       })
-    })
+      if (response.status === 200) {
+        return response.data.likes
+      } else {
+        $sentry.captureEvent(response.data)
+        app.error({statusCode: 500})
+      }
+    }, 'likes')
 
     const handleLike = async () => {
       if (liked.value) {

src/pages/blog/index.vue

@@ -51,7 +51,7 @@ export default defineComponent({
         .catch((error) => {
           $sentry.captureEvent(error)
         })
-    })
+    }, 'posts')
 
     return {
       posts,

src/pages/contact.vue

@@ -5,7 +5,7 @@
       <h1 class="font-bold text-gray-700 text-xl md:text-3xl my-4 dark:text-gray-400">
         {{ $t('contact.why.title') }}
       </h1>
-      <h3 class="text-xl md:text-xl">
+      <h3 class="text-lg">
         {{ $t('contact.why.description') }}
       </h3>
     </section>
@@ -14,41 +14,10 @@
 </template>
 
 <script lang="ts">
-import {computed, useAsync, useContext} from "@nuxtjs/composition-api";
-import {InfoData} from "~/types/types";
-
 export default {
   name: "contact",
   head: {
     title: 'Contact - Arthur Danjou'
-  },
-  setup() {
-    const {$content, $sentry} = useContext()
-    const info = useAsync(() => {
-      return ($content('infos')
-        .fetch<InfoData>()
-        .catch((error) => {
-          $sentry.captureEvent(error)
-        })
-    )as Promise<InfoData>
-    })
-
-    const hiring_color = info && info.value?.hiring.color
-    const getColor = computed(() => {
-      switch (hiring_color) {
-        case 'green':
-          return `bg-green-200 text-green-700`
-        case 'red':
-          return `bg-red-200 text-red-700`
-        default:
-          return 'bg-green-200 text-green-700'
-      }
-    })
-
-    return {
-      info,
-      getColor,
-    }
   }
 }
 </script>

src/pages/guestbook.vue

@@ -20,7 +20,8 @@
 </template>
 
 <script lang="ts">
-import {defineComponent, ref, useAsync, useContext} from "@nuxtjs/composition-api";
+import {defineComponent, useAsync, useContext} from "@nuxtjs/composition-api";
+import GuestbookMessage from "@/components/GuestbookMessage.vue";
 
 export default defineComponent({
   name: "guestbook",
@@ -31,22 +32,20 @@ export default defineComponent({
   },
   setup() {
     const { $axios, $sentry, app } = useContext()
-    const guestbook_messages = ref([])
 
-    useAsync(async () => {
-      await $axios.get('/api/guestbook', {
+    const guestbook_messages = useAsync<typeof GuestbookMessage[]>(async () => {
+      const response = await $axios.get('/api/guestbook', {
         headers: {
           'Authorization': `Bearer ${process.env.API_TOKEN}`
         }
       })
-        .then(response => {
-          guestbook_messages.value = response.data.guestbook_messages
-        })
-        .catch(error => {
-          app.error({statusCode: 500})
-          $sentry.captureEvent(error)
-        })
-    })
+      if (response.status === 200) {
+        return response.data.guestbook_messages
+      } else {
+        app.error({statusCode: 500})
+        $sentry.captureEvent(response.data)
+      }
+    }, 'guestbook_messages')
 
     return {
       guestbook_messages

src/pages/newsletter.vue

@@ -42,7 +42,7 @@
           </div>
         </div>
       </div>
-      <p class="text-sm text-gray-700 dark:text-gray-300">{{ $t('newsletter.count', { count: subscribersCount }) }}</p>
+      <p class="text-sm text-gray-700 dark:text-gray-300">{{ $t('newsletter.count', { count: subscribers }) }}</p>
       <p class="text-sm text-gray-700 dark:text-gray-300">{{ $t('newsletter.infos') }} <strong>{{ $t('newsletter.no_spam') }}</strong></p>
     </section>
   </main>
@@ -61,22 +61,20 @@ export default defineComponent({
   },
   setup() {
     const { $axios, $sentry, app } = useContext()
-    const subscribersCount = ref(0)
 
-    useAsync(() => {
-      $axios.get('/api/subscribers', {
+    const subscribers = useAsync(async () => {
+      const response = await $axios.get('/api/subscribers', {
         headers: {
           'Authorization': `Bearer ${process.env.API_TOKEN}`,
         }
-      }).then((response) => {
-        if (response.status === 200) {
-          subscribersCount.value = response.data.count
-        }
-      }).catch((error) => {
-        $sentry.captureEvent(error)
-        app.error({statusCode: 500})
       })
-    })
+      if (response.status === 200) {
+        return response.data.count
+      } else {
+        $sentry.captureEvent(response.data)
+        app.error({statusCode: 500})
+      }
+    }, 'subscribers')
 
     const error = ref(false)
     const success = ref(false)
@@ -110,7 +108,7 @@ export default defineComponent({
     }
 
     return {
-      subscribersCount,
+      subscribers,
       error,
       success,
       form,

src/pages/projects.vue

@@ -41,7 +41,7 @@ export default defineComponent({
         .catch((error) => {
           $sentry.captureEvent(error)
         })
-    })
+    }, 'projects')
 
     return {
       projects