fix: try to displays air pollution with async

src/features/WeatherNow/main-component/model/useWeatherNow.ts

@@ -18,6 +18,7 @@ export const useWeatherNow = () => {
   const loading = ref<boolean>(false)
   const suggestions = ref<string[]>([])
   const maxResults = 5
+  const isSaveDisabled = computed(() => savedCities.value.length >= 3)
 
   const setResults = (city: string, results: any) => {
     theWeather.value[city] = results
@@ -110,8 +111,6 @@ export const useWeatherNow = () => {
     fetchAirPollutionData
   )
 
-  const isSaveDisabled = computed(() => savedCities.value.length >= 3)
-
   onMounted(() => {
     loadSavedCities()
   })
@@ -124,12 +123,16 @@ export const useWeatherNow = () => {
     loading,
     imgUrl,
     suggestions,
-    fetchWeatherForQuery: computed(async () =>
-      theQuery.value ? await fetchWeather(theQuery.value) : undefined
-    ),
-    fetchAirPollutionForQuery: computed(async () =>
-      theQuery.value ? await fetchAirPollutionData(theQuery.value) : undefined
-    ),
+    async fetchWeatherForQuery() {
+      theQuery.value
+        ? await fetchWeather(theQuery.value)
+        : console.log('fetchWeatherForQuery error')
+    },
+    async fetchAirPollutionForQuery() {
+      theQuery.value
+        ? await fetchAirPollutionData(theQuery.value)
+        : console.log('fetchAirPollutionForQuery error')
+    },
     isSaveDisabled,
     saveCurrentCity,
     removeCityFromStorage

src/features/WeatherNow/main-component/ui/WeatherNow.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watchEffect } from 'vue'
+import { ref, watchEffect, onMounted } from 'vue'
 
 import { useWeatherNow } from '@/features/WeatherNow/main-component/model'
 import { dateBuilder } from '@/shared/api/helpers/date-builder/api'
@@ -24,7 +24,7 @@ const {
   imgUrl, // URL for the weather icon image
   fetchWeatherForQuery, // Method to fetch weather data for a city
   fetchAirPollutionForQuery, // Method to fetch air pollution data for a city
-  //isSaveDisabled,        // Boolean to disable "Save City" button
+  isSaveDisabled, // Boolean to disable "Save City" button
   saveCurrentCity, // Method to save the current city to storage
   removeCityFromStorage // Method to remove a city from storage
 } = useWeatherNow()
@@ -35,8 +35,8 @@ const { handleDragStart, handleDragOver, handleDrop } = useDragAndDrop(savedCiti
 // Event handler for pressing Enter in the input field
 const handleKeyDown = (event: KeyboardEvent) => {
   if (event.key === 'Enter') {
-    fetchWeatherForQuery.value
-    fetchAirPollutionForQuery.value
+    fetchWeatherForQuery
+    fetchAirPollutionForQuery
   }
 }
 
@@ -54,6 +54,15 @@ watchEffect(() => {
     }, 2000)
   }
 })
+
+onMounted(async () => {
+  try {
+    await fetchWeatherForQuery()
+    await fetchAirPollutionForQuery()
+  } catch (error) {
+    console.error('Error async load ddata', error)
+  }
+})
 </script>
 
 <template>
@@ -72,6 +81,7 @@ watchEffect(() => {
         @keydown.enter="handleKeyDown"
         label="city name"
         v-model="theQuery"
+        :disabled="isSaveDisabled"
       />
       <ul
         v-if="suggestions.length"