From 4cab6ba1f98a02f29e975f7cfb2d49dcfe73dedc Mon Sep 17 00:00:00 2001
From: Vinayak Kulkarni <19776877+vinayakkulkarni@users.noreply.github.com>
Date: Thu, 9 Mar 2023 18:17:33 +0530
Subject: [PATCH] fix: cleanup of Geocoder component

Signed-off-by: Vinayak Kulkarni <19776877+vinayakkulkarni@users.noreply.github.com>
---
 components/map/_partials/Geocoder.vue | 18 +++++++-----------
 1 file changed, 7 insertions(+), 11 deletions(-)

diff --git a/components/map/_partials/Geocoder.vue b/components/map/_partials/Geocoder.vue
index 35c68a6d..55c4db45 100644
--- a/components/map/_partials/Geocoder.vue
+++ b/components/map/_partials/Geocoder.vue
@@ -29,11 +29,7 @@
 </template>
 
 <script lang="ts">
-  import { defineComponent, reactive } from 'vue';
-  import { useNuxtApp } from '#app';
-  import type { PropType } from 'vue';
-  import type { AxiosError } from 'axios';
-  import type { SearchResult, GeocodedFeature } from '@/@types/map';
+  import type { SearchResult, GeocodedFeature } from '~/@types/map';
 
   export default defineComponent({
     name: 'Geocoder',
@@ -45,7 +41,7 @@
       },
     },
     setup(props) {
-      const { $axios, $config } = useNuxtApp();
+      const runtimeConfig = useRuntimeConfig();
       const state = reactive({
         search: '',
         loading: false,
@@ -57,13 +53,13 @@
       async function geocode() {
         if (state.search && !state.loading) {
           state.loading = true;
-          const { mapToken } = $config;
+          const { mapToken } = runtimeConfig;
           const queryStr = encodeURIComponent(state.search);
           // minLon, minLat, maxLon, maxLat
           const bbox = props.bbox;
           try {
             const { data }: { data: { features: GeocodedFeature[] } } =
-              await $axios.get(
+              await useFetch(
                 `https://api.mapbox.com/geocoding/v5/mapbox.places/${queryStr}.json?access_token=${mapToken}&bbox=${bbox}`,
               );
             if (data && data.features) {
@@ -77,10 +73,10 @@
               });
             }
             state.loading = false;
-          } catch (error: unknown) {
-            const { response } = error as AxiosError;
+          } catch (error) {
+            console.log('error: ', error);
             state.loading = false;
-            alert(response!.data.message);
+            // alert(error.data.message);
           } finally {
             state.loading = false;
           }