Use types. This closes #8 (#10)

composables/useApi.ts

@@ -1,4 +1,7 @@
 import { ComputedRef } from "nuxt/dist/app/compat/capi";
+import { Home, HomeSearchResponse } from "~~/types/home";
+import { ReviewResponse } from "~~/types/review";
+import { UserResponse } from "~~/types/user";
 
 export const useApi = () => {
 
@@ -15,11 +18,11 @@ export const useApi = () => {
     };
 
     const getHomeById = async (id: string) => {
-        return <any>useFetch(`homes/${id}`, getFetchOptions());
+        return useFetch<Home>(`homes/${id}`, getFetchOptions());
     };
 
     const getHomeReviewsByHomeId = async (id: string) => {
-        return <any>useFetch(`reviews/query`, {
+        return useFetch<ReviewResponse>(`reviews/query`, {
             method: 'POST',
             ...getFetchOptions(),
             body: {
@@ -31,7 +34,7 @@ export const useApi = () => {
     };
 
     const getHostInformationByHomeId = async (id: string) => {
-        return <any>useFetch(`users/query`, {
+        return useFetch<UserResponse>(`users/query`, {
             method: 'POST',
             ...getFetchOptions(),
             body: {
@@ -42,7 +45,7 @@ export const useApi = () => {
     };
 
     const getSearchResultsByLocation = async (lat: ComputedRef<string>, lng: ComputedRef<string>) => {
-        return useAsyncData<any>(`${lat.value}-${lng.value}`, () => $fetch(`homes/query`, {
+        return useAsyncData<HomeSearchResponse>(`${lat.value}-${lng.value}`, () => $fetch(`homes/query`, {
             method: 'POST',
             ...getFetchOptions(),
             body: {

pages/home/[id].vue

@@ -24,16 +24,16 @@ const [
     getHostInformationByHomeId(route.params.id as string),
 ]);
 
-const reviews = reviewsData.value.hits;
-const user = userData.value.hits[0]
+const reviews = reviewsData.value?.hits;
+const user = userData.value?.hits[0]
 
 const hasError = homeError?.value || reviewsError?.value || userError?.value;
 if (hasError) {
   throw createError({ statusCode: hasError.statusCode, message: hasError.message })
 }
 
 useHead({
-  title: home.value.title,
+  title: home.value?.title,
 });
 
 </script>

pages/search.vue

@@ -19,6 +19,7 @@
 </template>
 <script setup lang="ts">
 import { ComputedRef } from 'nuxt/dist/app/compat/capi';
+import { HomeMarker } from '~~/types/home';
 
 const route = useRoute();
 const map = ref(null);
@@ -45,16 +46,16 @@ function updateMap() {
 }
 
 function getHomeMakers() {
-    if (homes.value.hits.length === 0) {
+    if (homes.value?.hits.length === 0) {
         return null;
     }
-    const makers = homes.value.hits.map((home: any) => {
+    const makers = homes.value?.hits.map((home): HomeMarker => {
         return {
             ...home._geoloc,
             pricePerNight: home.pricePerNight,
             id: home.objectID,
         };
-    });
+    }) || [];
     return makers;
 }
 

plugins/maps.client.ts

@@ -1,3 +1,5 @@
+import { HomeMarker } from "~~/types/home";
+
 export default defineNuxtPlugin(() => {
   let isLoaded = false;
   // TODO: type this
@@ -45,7 +47,7 @@ export default defineNuxtPlugin(() => {
     });
   }
 
-  function showMap(canvas: HTMLElement | null, lat: number | string, lng: number | string, markers?: any[]) {
+  function showMap(canvas: HTMLElement | null, lat: number | string, lng: number | string, markers?: HomeMarker[] | null) {
     if(!isLoaded) {
       waiting.push({
         fn: showMap,

types/algolia.ts

@@ -0,0 +1,36 @@
+export interface Exhaustive {
+    nbHits: boolean;
+    typo:   boolean;
+}
+
+export interface ProcessingTimingsMS {
+    request: Request;
+    total:   number;
+}
+
+export interface Request {
+    roundTrip: number;
+}
+
+export interface RenderingContent {
+}
+
+export interface Request {
+    roundTrip: number;
+}
+
+export interface AlgoliaResponse {
+    nbHits:              number;
+    page:                number;
+    nbPages:             number;
+    hitsPerPage:         number;
+    exhaustiveNbHits:    boolean;
+    exhaustiveTypo:      boolean;
+    exhaustive:          Exhaustive;
+    query:               string;
+    params:              string;
+    renderingContent:    RenderingContent;
+    processingTimeMS:    number;
+    processingTimingsMS: ProcessingTimingsMS;
+    serverTimeMS:        number;
+}

types/home.ts

@@ -0,0 +1,44 @@
+import { AlgoliaResponse } from "./algolia";
+
+export interface HomeSearchResponse extends AlgoliaResponse {
+    hits:                Home[];
+}
+
+export interface Home {
+    type:          string;
+    title:         string;
+    description:   string;
+    note:          string;
+    reviewCount:   number;
+    reviewValue:   number;
+    features:      string[];
+    pricePerNight: number;
+    location:      Location;
+    guests:        number;
+    bedrooms:      number;
+    beds:          number;
+    bathrooms:     number;
+    images:        string[];
+    _geoloc:       Geoloc;
+    objectID:      string;
+}
+
+export interface HomeMarker {
+    lat: number;
+    lng: number;
+    id: string;
+    pricePerNight: number;
+}
+
+interface Geoloc {
+    lat: number;
+    lng: number;
+}
+
+interface Location {
+    address: string;
+    city:    string;
+    state:   string;
+    country: string;
+}
+

types/review.ts

@@ -0,0 +1,19 @@
+import { AlgoliaResponse } from "./algolia";
+
+export interface ReviewResponse extends AlgoliaResponse {
+    hits:                Review[];
+}
+
+export interface Review {
+    homeId:   string;
+    reviewer: Reviewer;
+    rating:   number;
+    date:     string;
+    comment:  string;
+    objectID: string;
+}
+
+export interface Reviewer {
+    image: string;
+    name:  string;
+}

types/user.ts

@@ -0,0 +1,15 @@
+import { AlgoliaResponse } from "./algolia";
+
+export interface UserResponse extends AlgoliaResponse {
+    hits:                User[];
+}
+
+export interface User {
+    joined:      string;
+    name:        string;
+    image:       string;
+    reviewCount: number;
+    description: string;
+    homeId:      string[];
+    objectID:    string;
+}