Refactor Weather component and add AQI functionality

codeAbinash · codeAbinash · commit 7c362057be07 · 2024-09-23T14:20:47.000+05:30
diff --git a/src/screens/Weather/Main/Weather.tsx b/src/screens/Weather/Main/Weather.tsx
@@ -10,10 +10,10 @@ import { StatusBar, View } from 'react-native'
 import { ScrollView } from 'react-native-gesture-handler'
 import { useDerivedValue, useSharedValue, withTiming } from 'react-native-reanimated'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
-import { getWeather } from '../api'
-import type { Weather } from '../types'
+import { getAQI, getWeather } from '../api'
+import type { AQI, Weather } from '../types'
 import { calculatePressurePercentage, getAQIStatus, getRainStatus, getVisibilityStatusString } from '../utils'
-import AQI from './components/AQI'
+import AirQualityIndex from './components/AirQualityIndex'
 import Cloudiness from './components/Cloudiness'
 import DailyForecast from './components/DailyForecast'
 import FeelsLike, { getFeelsLikeStatusString } from './components/FeelsLike'
@@ -53,36 +53,39 @@ export default function WeatherScreen({ navigation }: NavProp) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentWeather?.current.weather[0]!.icon])
 
-  const { isPending, data, mutate } = useMutation({
+  const { isPending, error, data, mutate } = useMutation({
     mutationKey: ['currentWeather'],
     mutationFn: () => fetchResult(),
     onError: (err) => console.log(err),
-    onSuccess: setCurrentWeather,
+    onSuccess: (d) => {
+      setCurrentWeather(d)
+      setLastUpdated(new Date().getTime())
+    },
   })
   const w = data || currentWeather
 
+  useEffect(() => {
+    console.log(currentCity)
+  }, [currentCity])
+
   useEffect(() => {
     if (currentCity) mutate()
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentCity])
 
-  const bottom = useSafeAreaInsets().bottom
-  const top = useSafeAreaInsets().top
-  const height = H + bottom + top
-  const width = W
-
   const fetchResult = useCallback(async (): Promise<Weather> => {
     const now = new Date().getTime()
     if (now - lastUpdated > weatherCacheTime) {
-      setLastUpdated(now)
-      console.log('fetching weather')
       return (await getWeather(currentCity?.lat || 0, currentCity?.lon || 0)) as Weather
     }
-    console.log('using cache')
     return currentWeather
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentWeather, lastUpdated, weatherCacheTime, currentCity])
 
+  const bottom = useSafeAreaInsets().bottom
+  const top = useSafeAreaInsets().top
+  const height = H + bottom + top
+  const width = W
+
   return (
     <>
       <StatusBar backgroundColor='transparent' barStyle={'light-content'} />
@@ -107,12 +110,45 @@ export default function WeatherScreen({ navigation }: NavProp) {
 }
 
 function Boxes({ w, theme }: { w: Weather; theme: Theme }) {
+  const { currentCity, lastUpdatedAQI, currentAQI, setLastUpdatedAQI, weatherCacheTime, setCurrentAQI } = weatherStore(
+    (state) => ({
+      currentCity: state.currentCity,
+      currentUnit: state.temperatureUnit,
+      lastUpdatedAQI: state.lastUpdatedAQI,
+      currentAQI: state.currentAQI,
+      setCurrentWeather: state.setCurrentWeather,
+      setLastUpdatedAQI: state.setLastUpdatedAQI,
+      weatherCacheTime: state.weatherCacheTime,
+      setCurrentAQI: state.setCurrentAQI,
+    }),
+  )
+
+  const { mutate } = useMutation({
+    mutationKey: ['currentWeatherAQI'],
+    mutationFn: () => fetchResult(),
+    onError: (err) => console.log(err),
+    onSuccess: (d: AQI) => {
+      setCurrentAQI(d)
+    },
+  })
+  const aqiStatus = useMemo(() => getAQIStatus(currentAQI?.list?.[0]?.main?.aqi || 0), [currentAQI])
   const pressurePercent = useMemo(() => calculatePressurePercentage(w), [w])
   const feelsLikeStatus = useMemo(() => getFeelsLikeStatusString(w?.current.feels_like || 0, w?.current.temp || 0), [w])
   const visibilityStatus = useMemo(() => getVisibilityStatusString(w?.current.visibility || 10000), [w])
-  const aqiStatus = useMemo(() => getAQIStatus(140), [])
   const rainStatus = useMemo(() => getRainStatus(w?.daily[0]?.rain), [w])
 
+  const fetchResult = useCallback(async (): Promise<AQI> => {
+    const now = new Date().getTime()
+    if (now - lastUpdatedAQI > weatherCacheTime) {
+      setLastUpdatedAQI(now)
+      return (await getAQI(currentCity?.lat || 0, currentCity?.lon || 0)) as AQI
+    }
+    return currentAQI
+  }, [lastUpdatedAQI, weatherCacheTime, currentAQI, setLastUpdatedAQI, currentCity?.lat, currentCity?.lon])
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(() => mutate, [currentCity])
+
   return (
     <View style={{ flexDirection: 'row', justifyContent: 'space-between', rowGap: 12 }} className='flex-wrap px-4'>
       <FeelsLike theme={theme} feelsLike={w?.current.feels_like || 0} feelsLikeStatus={feelsLikeStatus} />
@@ -125,7 +161,7 @@ function Boxes({ w, theme }: { w: Weather; theme: Theme }) {
         visibilityStatus={visibilityStatus}
       />
       <Wind theme={theme} w={w} />
-      <AQI aqi={140} theme={theme} aqiStatus={aqiStatus} />
+      <AirQualityIndex aqi={currentAQI?.list?.[0]?.main?.aqi} theme={theme} aqiStatus={aqiStatus} />
       <Cloudiness theme={theme} clouds={w?.current.clouds || 0} />
       <Precipitation theme={theme} rain={w?.daily[0]?.rain} snow={w?.daily[0]?.snow} status={rainStatus} />
       <SunRiseSet w={w} theme={theme} now={w?.current?.dt} sunrise={w?.current?.sunrise} sunset={w?.current?.sunset} />
diff --git a/src/screens/Weather/Main/components/AirQualityIndex.tsx b/src/screens/Weather/Main/components/AirQualityIndex.tsx
@@ -1,10 +1,16 @@
+import { weatherStore } from '@/zustand/weatherStore'
 import { NaturalFoodSolidIcon } from '@assets/icons/icons'
 import Gradient from '@components/Gradient'
-import { boxSize } from '@screens/Weather/utils'
+import { hw } from '@screens/Home/style'
+import { getAQI, getWeather } from '@screens/Weather/api'
+import type { Weather } from '@screens/Weather/types'
+import { boxSize, Icons } from '@screens/Weather/utils'
+import { useMutation } from '@tanstack/react-query'
 import { F, Medium, Regular } from '@utils/fonts'
 import type { Theme } from '@utils/types'
-import React from 'react'
+import React, { useCallback } from 'react'
 import { View } from 'react-native'
+import { useDerivedValue, useSharedValue } from 'react-native-reanimated'
 import WeatherLabel from './WeatherLabel'
 
 const gradientColors = [
@@ -25,8 +31,16 @@ const gradientColors = [
   '#890045',
   '#7c0023',
 ].reverse()
-export default function AQI({ aqi, theme, aqiStatus }: { aqi: number; theme: Theme; aqiStatus?: string }) {
-  let aqiPercent = (aqi * 100) / 500
+export default function AirQualityIndex({
+  aqi,
+  theme,
+  aqiStatus,
+}: {
+  aqi: number | undefined
+  theme: Theme
+  aqiStatus?: string
+}) {
+  let aqiPercent = (aqi || 0 * 100) / 500
   aqiPercent = aqiPercent > 95 ? 95 : aqiPercent
   return (
     <View className='aspect-square rounded-3xl bg-black/10' style={boxSize}>
diff --git a/src/screens/Weather/api.ts b/src/screens/Weather/api.ts
@@ -14,7 +14,15 @@ function locationUrl(lat: number, lon: number, apiKey: string) {
 }
 
 function weatherUrl(lat: number, lon: number, apiKey: string) {
-  return `https://api.openweathermap.org/data/2.5/onecall?lat=${lat}&lon=${lon}&exclude=minutely&appid=${apiKey || OPENWEATHER_API_KEY}`
+  return `https://api.openweathermap.org/data/2.5/onecall?lat=${lat}&lon=${lon}&exclude=minutely&appid=${apiKey || OPENWEATHER_API_KEY}&include=aqi`
+}
+
+function AQIUrl(lat: number, lon: number, apiKey: string) {
+  return `https://api.openweathermap.org/data/2.5/air_pollution?lat=${lat}&lon=${lon}&appid=${apiKey || OPENWEATHER_API_KEY}`
+}
+
+function AQIForecastUrl(lat: number, lon: number, apiKey: string) {
+  return `https://api.openweathermap.org/data/2.5/air_pollution/forecast?lat=${lat}&lon=${lon}&appid=${apiKey || OPENWEATHER_API_KEY}`
 }
 
 export const WeatherAPI = {
@@ -88,3 +96,7 @@ export async function getLocation(lat: number, lon: number) {
 export async function getWeather(lat: number, lon: number) {
   return await (await fetch(weatherUrl(lat, lon, OPENWEATHER_API_KEY))).json()
 }
+
+export async function getAQI(lat: number, lon: number) {
+  return await (await fetch(AQIUrl(lat, lon, OPENWEATHER_API_KEY))).json()
+}
diff --git a/src/screens/Weather/types.ts b/src/screens/Weather/types.ts
@@ -123,3 +123,19 @@ export interface Temp {
   eve: number
   morn: number
 }
+
+export interface AQI {
+  coord: Coord
+  list: List[]
+}
+
+export interface Coord {
+  lon: number
+  lat: number
+}
+
+export interface List {
+  main: { aqi: number }
+  components: { [key: string]: number }
+  dt: number
+}
diff --git a/src/screens/Weather/utils.ts b/src/screens/Weather/utils.ts
@@ -67,11 +67,11 @@ export function getVisibilityStatusString(distance: number): string {
 }
 
 export function getAQIStatus(aqi: number) {
-  if (aqi < 50) return 'Good'
-  if (aqi < 100) return 'Moderate'
+  if (aqi < 50) return 'Good air quality'
+  if (aqi < 100) return 'Moderate air quality'
   if (aqi < 150) return 'Unhealthy for Sensitive Groups'
-  if (aqi < 200) return 'Unhealthy'
-  if (aqi < 300) return 'Very Unhealthy'
+  if (aqi < 200) return 'Unhealthy air quality'
+  if (aqi < 300) return 'Very Unhealthy air quality'
   return 'Hazardous'
 }
 export function getRainStatus(rain: number | undefined) {
diff --git a/src/utils/storage.ts b/src/utils/storage.ts
@@ -77,6 +77,8 @@ export const WeatherStorage = {
     WeatherAtmospherePressureUnit: 'WeatherAtmospherePressureUnit',
     WeatherCurrentWeather: 'WeatherCurrentWeather',
     WeatherLastUpdated: 'WeatherLastUpdated',
+    WeatherLastUpdatedAQI: 'WeatherLastUpdatedAQI',
+    WeatherCurrentAQI: 'WeatherCurrentAQI',
     WeatherCacheTime: 'WeatherCacheTime',
     WeatherTimeFormat: 'WeatherTimeFormat',
   },
diff --git a/src/zustand/weatherStore.ts b/src/zustand/weatherStore.ts
@@ -1,4 +1,4 @@
-import type { Weather } from '@screens/Weather/types'
+import type { AQI, Weather } from '@screens/Weather/types'
 import { WEATHER_CACHE_TIME } from '@utils/constants'
 import S from '@utils/storage'
 import { ToastAndroid } from 'react-native'
@@ -38,10 +38,14 @@ type WeatherSettingsStore = {
   setCurrentWeather: (weather: Weather) => void
   lastUpdated: number
   setLastUpdated: (time: number) => void
+  lastUpdatedAQI: number
+  setLastUpdatedAQI: (time: number) => void
   weatherCacheTime: number
   setWeatherCacheTime: (time: number) => void
   weatherTimeFormat: TimeFormat
   setWeatherTimeFormat: (format: TimeFormat) => void
+  currentAQI: AQI
+  setCurrentAQI: (aqi: AQI) => void
 }
 
 export const weatherStore = create<WeatherSettingsStore>((set) => ({
@@ -66,14 +70,28 @@ export const weatherStore = create<WeatherSettingsStore>((set) => ({
   setCurrentWeather: (weather: Weather) => setCurrentWeather(weather, set),
   lastUpdated: getWeatherLastUpdated(),
   setLastUpdated: (time: number) => setWeatherLastUpdated(time, set),
+  lastUpdatedAQI: getLastUpdatedAQI(),
+  setLastUpdatedAQI: (time: number) => setLastUpdatedAQI(time, set),
   weatherCacheTime: getWeatherCacheTime(),
   setWeatherCacheTime: (time: number) => setWeatherCacheTime(time, set),
   weatherTimeFormat: getWeatherTimeFormat(),
   setWeatherTimeFormat: (format: TimeFormat) => setWeatherTimeFormat(format, set),
+  currentAQI: getCurrentAQI(),
+  setCurrentAQI: (aqi: AQI) => setCurrentAQI(aqi, set),
 }))
 
 type Set = (fn: (state: WeatherSettingsStore) => WeatherSettingsStore) => void
 
+function setLastUpdatedAQI(time: number, set: Set) {
+  S.set('WeatherLastUpdatedAQI', time.toString())
+  set((state) => ({ ...state, lastUpdatedAQI: time }))
+}
+
+function getLastUpdatedAQI() {
+  const lastUpdated = Number(S.get('WeatherLastUpdatedAQI') || '0')
+  return isNaN(lastUpdated) ? 0 : lastUpdated
+}
+
 function getWeatherTimeFormat() {
   return (S.get('WeatherTimeFormat') as TimeFormat) || '12h'
 }
@@ -111,6 +129,15 @@ function setCurrentWeather(weather: Weather, set: Set) {
   set((state) => ({ ...state, currentWeather: weather }))
 }
 
+function getCurrentAQI() {
+  return S.getParsed<AQI>('WeatherCurrentAQI')
+}
+
+function setCurrentAQI(aqi: AQI, set: Set) {
+  S.set('WeatherCurrentAQI', JSON.stringify(aqi))
+  set((state) => ({ ...state, currentAQI: aqi }))
+}
+
 function getAtmPressureUnit() {
   return (S.get('WeatherAtmospherePressureUnit') as AtmosPressureUnit) || 'hPa'
 }
