src/components/admin/search.vue

@@ -19,7 +19,6 @@
 
 <script lang="ts" setup>
 import type { Movie } from "~/types/movie";
-import "lazysizes";
 
 const loading = ref(false);
 
@@ -43,27 +42,29 @@ const findMovies = async function (e: Event) {
     return;
   }
 
-  $fetch<Movie[]>(`${config.public.apiURL}/movies/search?q=${searchTerm}`, {
+  const { data, error } = await useFetch<Movie[]>(
-    method: "GET",
+    `${config.public.apiURL}/movies/search?q=${searchTerm}`,
-    headers: {
+    {
-      "Content-type": "application/json",
+      method: "GET",
-      Authorization: `Token ${useCookie("token").value}`,
+      headers: {
+        "Content-type": "application/json",
+        Authorization: `Token ${useCookie("token").value}`,
+      },
     },
-  })
+  );
-    .then((data) => {
+
-      movies.value = data;
+  if (error.value) {
-      loading.value = false;
+    if (error.value.statusCode === 401) {
-    })
+      alert("Unauthorized");
-    .catch((err) => {
+    }
-      if (err.statusCode === 401) {
+  } else {
-        navigateTo("/login");
+    if (!data.value) {
-      } else if (err.statusCode === 404) {
+      alert("No movies found.");
-        alert("No movies found");
+    } else {
-        loading.value = false;
+      movies.value = data.value || [];
-      } else {
+    }
-        alert("An error occurred. Please try again later.");
+  }
-      }
+  loading.value = false;
-    });
 };
 </script>