fix not found issue

Signed-off-by: Benny Samir Hierl <bennysamir@posteo.de>

src/composables/useAxios.ts

@@ -1,6 +1,7 @@
 import axios, { AxiosInstance, AxiosRequestConfig } from 'axios'
 import { apiConfig } from '@/config'
 import { ref } from 'vue'
+import router from '../router'
 
 const isLoading = ref(false)
 const error = ref(null)
@@ -11,7 +12,7 @@ const config: AxiosRequestConfig = {
 
 const client: AxiosInstance = axios.create(config)
 
-client.interceptors.request.use(
+export const requestInterceptor = client.interceptors.request.use(
   function (config) {
     isLoading.value = true
     error.value = null
@@ -24,14 +25,19 @@ client.interceptors.request.use(
   }
 )
 
-client.interceptors.response.use(
+export const responseInterceptor = client.interceptors.response.use(
   function (response) {
     isLoading.value = false
     return response
   },
   function (err) {
     isLoading.value = false
-    error.value = err
+    if (err.response?.status === 404) {
+      router.push({ name: 'notFound' })
+      err.ignore = true
+    } else {
+      error.value = err
+    }
     return Promise.reject(err)
   }
 )

src/composables/useWishlistStore.ts

@@ -1,13 +1,20 @@
 import useAxios from '@/composables/useAxios'
 import { Wishlist, WishlistItem } from '@/types'
+import { AxiosError } from 'axios'
 import { ref } from 'vue'
 const { client } = useAxios()
 
 const list = ref<Wishlist | null>(null)
 
 const fetch = async (slugText: string): Promise<void> => {
-  const { data } = await client.get(`/wishlist/${slugText}`)
-  list.value = data
+  try {
+    const { data } = await client.get(`/wishlist/${slugText}`)
+    list.value = data
+  } catch (e: any) {
+    if (e.isAxiosError && !(<AxiosError>e.ignore)) {
+      throw e
+    }
+  }
 }
 
 const updateItem = async (item: WishlistItem): Promise<void> => {

src/router/index.ts

@@ -1,6 +1,6 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import HomeView from '../views/HomeView.vue'
-import DetailView from '../views/DetailView.vue'
+import HomeView from '@/views/HomeView.vue'
+import DetailView from '@/views/DetailView.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -18,7 +18,7 @@ const router = createRouter({
     {
       name: 'notFound',
       path: '/:pathMatch(.*)*',
-      component: () => import('../views/NotFound.vue'),
+      component: () => import('@/views/NotFound.vue'),
     },
   ],
 })