⭐ feat(api): fetch car details from api

Author: OlgaPrikhodko

composables/useFetchCar.js

@@ -0,0 +1,12 @@
+export default async (id) => {
+  const { data, error } = await useFetch(`/api/car/${id}`);
+
+  if (error.value) {
+    throw createError({
+      statusCode: error.value.statusCode,
+      statusMessage: error.value.statusMessage,
+    });
+  }
+
+  return { data };
+};

composables/useFetchCars.js

@@ -12,5 +12,5 @@ export default async (city, filters) => {
     });
   }
 
-  return data;
+  return { cars: data };
 };

pages/car/[name]-[id].vue

@@ -1,19 +1,9 @@
 <script setup>
 const route = useRoute();
+
+const { data: car } = await useFetchCar(route.params.id);
 const { toTitleCase } = useUtilities();
-const { cars } = useCars();
 
-const car = computed(() => {
-  const carId = parseInt(route.params.id);
-  return cars.find((car) => car.id === carId);
-});
-console.log(car);
-if (!car.value) {
-  throw createError({
-    statusCode: 404,
-    message: `Car with id ${route.params.id} does not exist`,
-  });
-}
 useHead({ title: toTitleCase(route.params.name) });
 
 definePageMeta({

pages/city/[city]/car/[[make]].vue

@@ -1,6 +1,6 @@
 <script setup>
 const route = useRoute();
-const cars = await useFetchCars(route.params.city, {
+const { cars } = await useFetchCars(route.params.city, {
   minPrice: route.query.minPrice,
   maxPrice: route.query.maxPrice,
   make: route.params.make,

server/api/car/[id].js

@@ -8,7 +8,7 @@ export default defineEventHandler((event) => {
   if (!car) {
     throw createError({
       statusCode: 404,
-      message: `Car with id ${id} does not exist`,
+      statusMessage: `Car with id ${id} does not exist`,
     });
   }