fix api functions

src/components/WeatherItem.vue

@@ -1,75 +1,66 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
-import { LocationData } from '../interfaces/Geo'
+import { LocationData } from '../interfaces/Geo';
 import { getWeather } from '../utils/api';
 import { WeatherResponse } from '../interfaces/Weather';
-import IconArrowUpRight from './IconArrowUpRight.vue'
-import IconPressure from './IconPressure.vue'
-import { degreesToCompass } from '../utils/geo'
+import IconArrowUpRight from './IconArrowUpRight.vue';
+import { degreesToCompass } from '../utils/geo';
 
 const props = defineProps<{
-  location: LocationData
-}>()
+  location: LocationData;
+}>();
 const emit = defineEmits<{
-  (e: 'update', data: WeatherResponse): void
-}>()
+  (e: 'update', data: WeatherResponse): void;
+}>();
 
-const weatherData = ref<WeatherResponse>()
+const weatherData = ref<WeatherResponse>();
 
 function getWeatherIconUrl(data: WeatherResponse) {
-  const weather = data.weather.length ? data.weather[0] : undefined
-  return weather ? `https://openweathermap.org/img/w/${weather?.icon}.png` : ''
+  const weather = data.weather.length ? data.weather[0] : undefined;
+  return weather ? `https://openweathermap.org/img/w/${weather?.icon}.png` : '';
 }
 function getWeatherIconAlt(data: WeatherResponse) {
-  const weather = data.weather.length ? data.weather[0] : undefined
-  return weather ? weather.main.toString() : 'weather icon'
+  const weather = data.weather.length ? data.weather[0] : undefined;
+  return weather ? weather.main.toString() : 'weather icon';
 }
 function getWeatherSummary(data: WeatherResponse) {
-  return `Feels like ${data.main.feels_like}, ${data.weather[0].description}`
+  return `Feels like ${data.main.feels_like}, ${data.weather[0].description}`;
 }
 onMounted(async () => {
-  weatherData.value = await getWeather(props.location)
+  weatherData.value = await getWeather<LocationData>(props.location);
   if (weatherData.value) {
-    emit('update', weatherData.value)
+    emit('update', weatherData.value);
   }
-})
+});
 </script>
 
 <template>
   <div v-if="weatherData" class="weather-item flex-row-nowrap">
     <div class="weather-img-wrapper">
-      <img :src="getWeatherIconUrl(weatherData)" :alt="getWeatherIconAlt(weatherData)" width="75" height="75" class="weather-img">
+      <img
+        :src="getWeatherIconUrl(weatherData)"
+        :alt="getWeatherIconAlt(weatherData)"
+        width="75"
+        height="75"
+        class="weather-img"
+      />
     </div>
-    <div class="weather-info ">
+    <div class="weather-info">
       <b class="text-lg p-3">{{ weatherData.main.temp }} °C</b>
       <div class="flex-row-nowrap text-xs">
         <IconArrowUpRight class="icon mr-1" />
-        {{ weatherData.wind.speed }}m/s {{ degreesToCompass(weatherData.wind.deg) }}
+        {{ weatherData.wind.speed }}m/s
+        {{ degreesToCompass(weatherData.wind.deg) }}
       </div>
       <div class="flex-row-nowrap">
         <div class="text-xs px-3">{{ getWeatherSummary(weatherData) }}</div>
       </div>
-      <div class="text-bold p-3">{{ weatherData?.name }}, {{ weatherData?.sys.country }}</div>
-    </div>
-<!--     <div class="flex-row-nowrap justify-between">
-      <h4 class="text-bold">{{ weatherData?.name }}, {{ weatherData?.sys.country }}</h4>
-      <slot></slot>
-    </div>
-    <div class="flex-row-nowrap justify-center">
-      <img :src="getWeatherIconUrl(weatherData)" :alt="getWeatherIconAlt(weatherData)" class="mr-5">
-      <b class="text-lg">{{ weatherData.main.temp }}</b>
-    </div>
-    <div class="text-sm mb-3">{{ getWeatherSummary(weatherData) }}</div>
-    <div class="flex-row-wrap">
-      <div class="w-50percent flex-row-nowrap mb-2">
-        <IconArrowUpRight class="icon mr-1" />{{ weatherData.wind.speed }}m/s {{ degreesToCompass(weatherData.wind.deg) }}
+      <div class="text-bold p-3">
+        {{ weatherData?.name }}, {{ weatherData?.sys.country }}
       </div>
-      <div class="w-50percent flex-row-nowrap mb-2">
-        <IconPressure class="icon mr-1" />{{ weatherData.main.pressure }}hPa
-      </div>
-      <div class="w-50percent mb-2">Humidity: {{ weatherData.main.humidity }}%</div>
-      <div class="w-50percent mb-2">Dew point: {{ '—' }}</div>
-      <div>Visibility: {{ weatherData.visibility }}</div>
-    </div> -->
+    </div>
+  </div>
+  <div v-else id="fallback" class="">
+    Pls
   </div>
-</template>
+</template>

src/pages/TheSettings.vue

@@ -4,7 +4,7 @@ import LocationItem from '../components/LocationItem.vue'
 import IconCross from '../components/IconCross.vue';
 import { saveLocationsFromStorage, loadLocationsFromStorage } from '../utils/storage'
 import { getLocationsData } from '../utils/api'
-import { LocationData } from '../interfaces/Geo'
+import { GeoData, LocationData } from '../interfaces/Geo'
 import IconEnter from '../components/IconEnter.vue';
 
 const emit = defineEmits(['change-page'])
@@ -15,7 +15,7 @@ const searchString = ref('')
 const draggedItemIndex = ref<number | null>(null)
 
 async function findAndAddLocation() {
-    const result = await getLocationsData(searchString.value)
+    const result = await getLocationsData<Array<GeoData>>(searchString.value)
     if (result) {
         const loc = result[0]
         locations.value.push({

src/utils/api.ts

@@ -1,8 +1,7 @@
 import { LocationData, GeoData } from '../interfaces/Geo';
 import { WeatherResponse } from '../interfaces/Weather';
 
-async function getWeather(position: LocationData) {
-  try {
+async function getWeather<T>(position: LocationData): Promise<T> {
     const { latitude, longitude, city } = position;
     const url = new URL('https://api.openweathermap.org/data/2.5/weather');
     const params = new URLSearchParams();
@@ -17,26 +16,18 @@ async function getWeather(position: LocationData) {
     params.append('appid', import.meta.env.VITE_APP_ID);
     url.search = params.toString();
     const response = await fetch(url);
-    const data = await response.json();
-    return data as WeatherResponse;
-  } catch (error) {
-    console.error('getWeatherByPosition error', error);
-  }
+    return await response.json();
 }
 
-async function getLocationsData(searchString: string) {
-  try {
+async function getLocationsData<T>(searchString: string): Promise<T> {
     const url = new URL('https://api.openweathermap.org/geo/1.0/direct');
     const params = new URLSearchParams();
     params.append('q', searchString);
     params.append('limit', '12');
     params.append('appid', import.meta.env.VITE_APP_ID);
     url.search = params.toString();
     const response = await fetch(url);
-    return (await response.json()) as GeoData[];
-  } catch (error) {
-    console.error('getLocationsData error', error);
-  }
+    return await response.json();
 }
 
 export { getWeather, getLocationsData };