Fix useAsync

src/components/AboutHome.vue

@@ -1,5 +1,5 @@
 <template>
-  <section v-if="info && info.age" class="w-full flex items-center justify-center my-12">
+  <section v-if="age" class="w-full flex items-center justify-center my-12">
     <div class="flex flex-col md:flex-row justify-between items-center">
       <div class="mb-12 md:mb-0 w-full md:w-1/2 flex justify-center">
         <img src="~/assets/images/memojies/Hat.png" alt="It's me !" class="xl:w-1/2" />
@@ -9,7 +9,7 @@
           {{ $t('home.about.title') }}
         </h2>
         <p class="text-xl my-6 text-gray-700 dark:text-gray-400">
-          {{ $t('home.about.description', {age: info.age}) }}
+          {{ $t('home.about.description', {age: age}) }}
         </p>
         <div class="flex justify-center md:justify-start">
           <Button content="home.about.about" link="about"/>
@@ -26,17 +26,22 @@ import {InfoData} from "~/types/types";
 export default defineComponent({
   name: "AboutHome",
   setup() {
-    const {$content, $sentry} = useContext()
+    const {$axios, $sentry} = useContext()
-    const info = useAsync(() => {
+    const age = useAsync(async () => {
-      return $content('infos')
+      const response = await $axios.get('/api/informations', {
-        .fetch<InfoData>()
+        headers: {
-        .catch((error) => {
+          'Authorization': `Bearer ${process.env.API_TOKEN}`
-          $sentry.captureEvent(error)
+        }
-        });
+      })
+      if (response.status === 200) {
+        return response.data.informations.age
+      } else {
+        $sentry.captureEvent(response.data)
+      }
     }, 'infos')
 
     return {
-      info
+      age
     }
   }
 })

src/components/Announcement.vue

@@ -24,23 +24,22 @@ export default {
   name: "Announcement",
   setup() {
     const {$axios, $sentry} = useContext()
-    const announce = ref<Announce>()
 
-    useAsync(async () => {
+    const announce = useAsync(async () => {
       const response = await $axios.get('/api/announces', {
         headers: {
           'Authorization': `Bearer ${process.env.API_TOKEN}`
         }
       })
       if (response.status === 200) {
-        announce.value = response.data.announce
+        return response.data.announce
       } else {
         $sentry.captureEvent(response.data)
       }
-    })
+    }, 'announce')
 
     const getBackgroundColor = computed(() => {
-      switch (announce.value!.color) {
+      switch (announce.value.color) {
         case 'black': {
           return 'bg-black text-white dark:(bg-white text-black)'
         }
@@ -48,7 +47,7 @@ export default {
     })
 
     const getHoverColor = computed(() => {
-      switch (announce.value!.hover_color) {
+      switch (announce.value.hover_color) {
         case 'gray': {
           return 'hover:bg-gray-800 dark:hover:bg-gray-300'
         }

src/components/Footer.vue

@@ -123,23 +123,19 @@ export default defineComponent({
 
     const getDate = ref(new Date().getFullYear())
 
-    const hiring_message = ref("")
+    const hiring_message = useAsync(async () => {
-    useAsync(async () => {
       const request = await $axios.get('/api/informations', {
         headers: {
           'Authorization': `Bearer ${process.env.API_TOKEN}`
         }
       })
       if (request.status === 200) {
-        hiring_message.value = request.data.informations.translation.code
+        return request.data.informations.translation.code
       } else {
         app.error({statusCode: 500})
         $sentry.captureEvent(request.data)
       }
-    })
+    }, 'hiring_message')
-
-    const store = useStore<State>()
-    const route = computed(() => store.state.route)
 
     return {
       getDate,

src/components/FormationsAbout.vue

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

src/components/Header.vue

@@ -75,7 +75,7 @@ export default defineComponent({
       window.removeEventListener('scroll', updateScroll)
     })
 
-    const {i18n} = useContext()
+    const {i18n, } = useContext()
     const $router = useRouter()
     const changeLanguage = () => useAsync(() => {
       i18n.setLocale(i18n.locale === 'fr' ? 'en' : 'fr')

src/components/MobileNavbar.vue

@@ -30,6 +30,10 @@ import {State} from "~/types/types";
 
 const PAGE_TYPE = {
   projects: 1,
+  services: 2,
+  env: 3,
+  about: 4,
+  guestbook: 5
 }
 
 export default defineComponent({

src/components/SkillsAbout.vue

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

src/components/icons/MenuIcon.vue

@@ -16,6 +16,37 @@
         <path d="M4 28l5.455 4l7.272-4L24 32l7.273-4l7.272 4L44 28" />
       </g>
     </svg>
+    <svg v-else-if="type === 2" class="inline" width="0.75em" height="2.5em" viewBox="0 0 3 16" focusable="false">
+      <path
+        fill-rule="evenodd"
+        d="M0 2.5a1.5 1.5 0 1 0 3 0a1.5 1.5 0 0 0-3 0zm0 5a1.5 1.5 0 1 0 3 0a1.5 1.5 0 0 0-3 0zM1.5 14a1.5 1.5 0 1 1 0-3a1.5 1.5 0 0 1 0 3z"
+        fill="currentColor" />
+    </svg>
+    <svg v-else-if="type === 3" class="inline" width="2.5em" height="2.5em" viewBox="0 0 24 24" focusable="false">
+      <g fill="none">
+        <path
+          d="M7 6a3 3 0 0 0-3 3h16a3 3 0 0 0-3-3H7z"
+          fill="currentColor" />
+        <path
+          d="M7 18a3 3 0 0 1-3-3h16a3 3 0 0 1-3 3H7z"
+          fill="currentColor" />
+        <path
+          d="M3 11a1 1 0 1 0 0 2h18a1 1 0 1 0 0-2H3z"
+          fill="currentColor" />
+      </g>
+    </svg>
+    <svg v-else-if="type === 4" class="inline" width="2.5em" height="2.5em" viewBox="0 0 24 24" focusable="false">
+      <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M7.05 11.293l4.243-4.243a2 2 0 0 1 2.828 0l2.829 2.83a2 2 0 0 1 0 2.828l-4.243 4.243a2 2 0 0 1-2.828 0L7.05 14.12a2 2 0 0 1 0-2.828z" />
+        <path d="M16.243 9.172l3.086-.772a1.5 1.5 0 0 0 .697-2.516L17.81 3.667a1.5 1.5 0 0 0-2.44.47L14.122 7.05" />
+        <path d="M9.172 16.243L8.4 19.329a1.5 1.5 0 0 1-2.516.697L3.667 17.81a1.5 1.5 0 0 1 .47-2.44l2.913-1.248" />
+      </g>
+    </svg>
+    <svg v-else-if="type === 5" class="inline" width="2.5em" height="2.5em" viewBox="0 0 20 20" focusable="false">
+      <path
+        d="M9.584 6.036c1.952 0 2.591-1.381 1.839-2.843c-.871-1.693 1.895-3.155.521-3.155c-1.301 0-3.736 1.418-4.19 3.183c-.339 1.324.296 2.815 1.83 2.815zm5.212 8.951l-.444-.383a1.355 1.355 0 0 0-1.735 0l-.442.382a3.326 3.326 0 0 1-2.174.801a3.325 3.325 0 0 1-2.173-.8l-.444-.384a1.353 1.353 0 0 0-1.734.001l-.444.383c-1.193 1.028-2.967 1.056-4.204.1V19a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1v-3.912c-1.237.954-3.011.929-4.206-.101zM10 7c-7.574 0-9 3.361-9 5v.469l1.164 1.003a1.355 1.355 0 0 0 1.735 0l.444-.383a3.353 3.353 0 0 1 4.345 0l.444.384c.484.417 1.245.42 1.735-.001l.442-.382a3.352 3.352 0 0 1 4.346-.001l.444.383c.487.421 1.25.417 1.735 0L19 12.469V12c0-1.639-1.426-5-9-5z"
+        fill="currentColor"/>
+      </svg>
   </div>
 </template>
 

src/content/infos.json

@@ -1,7 +0,0 @@
-{
-  "age": 18,
-  "hiring": {
-    "status": "available",
-    "color": "green"
-  }
-}

src/layouts/default.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="relative">
     <SideMenu />
-    <div class="relative w-full overflow-hidden">
+    <div class="relative w-full overflow-hidden xl:overflow-visible">
       <div
         id="slider"
-        class="relative xl:static shadow-2xl overflow-hidden transform transition-all duration-500"
+        class="relative xl:static shadow-2xl transform transition-all duration-500 overflow-hidden xl:overflow-visible"
         :class="{'rounded-lg xl:rounded-none scale-90 md:scale-70 lg:scale-60 xl:scale-100 translate-x-9/12 sm:translate-x-4/12 lg:translate-x-3/12 xl:translate-x-0': opened}"
         :style="opened ? `max-height: ${height}px` : 'max-height: none'"
         :tabindex="opened ? -1 : 0"

src/layouts/error.vue

@@ -26,7 +26,7 @@
           </div>
         </div>
         <div class="mt-12 mb-4 w-full text-center">
-          <div class="home-btn" @click="next">
+          <div class="home-btn" @click="back">
             <div class="cursor-pointer w-full py-4 px-4 md:py-4 md:px-4 font-bold hover:(bg-indigo-600 text-white) duration-500 rounded">
               <BackSpaceIcon class="arrow-img text-xl"/>
               {{ $t('error.back') }}
@@ -48,10 +48,10 @@ export default defineComponent({
     title: 'Error - Arthur Danjou'
   },
   setup() {
-    const router = useRouter()
+    const back = () => useRouter().back()
-    const next = () => router.back()
+    return {
-
+      back
-    return {next}
+    }
   }
 })
 </script>

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(() => {
+    const likes = useAsync(async () => {
-      $axios.get(`/api/posts/${slug.value}`, {
+      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 () => {
+    const guestbook_messages = useAsync<typeof GuestbookMessage[]>(async () => {
-      await $axios.get('/api/guestbook', {
+      const response = await $axios.get('/api/guestbook', {
         headers: {
           'Authorization': `Bearer ${process.env.API_TOKEN}`
         }
       })
-        .then(response => {
+      if (response.status === 200) {
-          guestbook_messages.value = response.data.guestbook_messages
+        return response.data.guestbook_messages
-        })
+      } else {
-        .catch(error => {
+        app.error({statusCode: 500})
-          app.error({statusCode: 500})
+        $sentry.captureEvent(response.data)
-          $sentry.captureEvent(error)
+      }
-        })
+    }, '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(() => {
+    const subscribers = useAsync(async () => {
-      $axios.get('/api/subscribers', {
+      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