chore: format

src/api/searchApi.ts

@@ -10,4 +10,3 @@ const searchApi = axios.create({
 })
 
 export default searchApi
-

src/components/directionDetails/directionDetails.vue

@@ -1,16 +1,18 @@
 <template>
   <div v-if="distance" class="direction-details">
-    <div class="direction-details__detail">Distance: <strong>{{ distance }} Kms </strong> </div>
-    <div class="direction-details__detail">Duration: <strong>{{ duration }} minutes </strong> </div>
+    <div class="direction-details__detail">
+      Distance: <strong>{{ distance }} Kms </strong>
+    </div>
+    <div class="direction-details__detail">
+      Duration: <strong>{{ duration }} minutes </strong>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { useMap } from '@/composables'
 
 const { distance, duration } = useMap()
-
-
 </script>
 
 <style scoped>
@@ -33,8 +35,8 @@ const { distance, duration } = useMap()
 }
 
 .direction-details__detail {
-    strong {
-        color: #00695c;
-    }
+  strong {
+    color: #00695c;
+  }
 }
 </style>

src/components/mapView/mapView.vue

@@ -61,10 +61,12 @@ watch(isGeolocationEnabled, () => {
   z-index: 1;
 }
 .map__loading--text {
-  position: absolute;
+  position: fixed;
   top: 50%;
   left: 50%;
-  transform: translate(-50%, -50%);
+  font-family: 'Roboto', sans-serif;
+  font-weight: 500;
+  font-size: 0.9rem;
 }
 
 .map__container {

src/components/searchResults/searchResults.vue

@@ -12,7 +12,9 @@
     >
       <h3 class="search-results__result--title">{{ location.text }}</h3>
       <p class="search-results__result--description">{{ location.place_name }}</p>
-      <button class="search-results__result--button" @click.self="getRouteDirections(location)">Go to</button>
+      <button class="search-results__result--button" @click.self="getRouteDirections(location)">
+        Go to
+      </button>
     </li>
   </ul>
 </template>

src/composables/useLocation.ts

@@ -1,6 +1,5 @@
 import type { State } from '@/store'
 import { computed, onMounted } from 'vue'
-import { loadRouteLocation } from 'vue-router'
 import { useStore } from 'vuex'
 
 export const useLocation = () => {

src/composables/useMap.ts

@@ -14,6 +14,7 @@ export const useMap = () => {
     isMapLoaded: computed(() => store.getters['Map/isMapLoaded']),
     setMap: (map: mapboxgl.Map) => store.commit('Map/setMap', map),
     setLocationMarkers: (locations: any[]) => store.commit('Map/setLocationMarkers', locations),
-    getRouteBetweenPoints: (start: LngLat, end: LngLat) => store.dispatch('Map/getRouteBetweenPoints', { start, end })
+    getRouteBetweenPoints: (start: LngLat, end: LngLat) =>
+      store.dispatch('Map/getRouteBetweenPoints', { start, end })
   }
 }

src/interfaces/directions.ts

@@ -1,41 +1,41 @@
 export interface DirectionsResponse {
-    routes:    Route[];
-    waypoints: Waypoint[];
-    code:      string;
-    uuid:      string;
+  routes: Route[]
+  waypoints: Waypoint[]
+  code: string
+  uuid: string
 }
 
 export interface Route {
-    weight_name: string;
-    weight:      number;
-    duration:    number;
-    distance:    number;
-    legs:        Leg[];
-    geometry:    Geometry;
+  weight_name: string
+  weight: number
+  duration: number
+  distance: number
+  legs: Leg[]
+  geometry: Geometry
 }
 
 export interface Geometry {
-    coordinates: Array<number[]>;
-    type:        string;
+  coordinates: Array<number[]>
+  type: string
 }
 
 export interface Leg {
-    via_waypoints: any[];
-    admins:        Admin[];
-    weight:        number;
-    duration:      number;
-    steps:         any[];
-    distance:      number;
-    summary:       string;
+  via_waypoints: any[]
+  admins: Admin[]
+  weight: number
+  duration: number
+  steps: any[]
+  distance: number
+  summary: string
 }
 
 export interface Admin {
-    iso_3166_1_alpha3: string;
-    iso_3166_1:        string;
+  iso_3166_1_alpha3: string
+  iso_3166_1: string
 }
 
 export interface Waypoint {
-    distance: number;
-    name:     string;
-    location: number[];
+  distance: number
+  name: string
+  location: number[]
 }

src/store/map/mutations.ts

@@ -11,7 +11,7 @@ const mutation: MutationTree<MapState> = {
     state: MapState,
     { distance, duration }: { distance: number; duration: number }
   ) {
-    let distanceInKm =distance / 1000
+    let distanceInKm = distance / 1000
     distanceInKm = Math.round(distanceInKm * 100) / 100
     const durationInMinutes = Math.floor(duration / 60)