Refactor Weather component to use updated font utility and remove unused imports

Author: codeAbinash

src/screens/Weather/Main/Weather.tsx

@@ -4,7 +4,7 @@ import { Canvas, LinearGradient, Rect, vec } from '@shopify/react-native-skia'
 import { useMutation } from '@tanstack/react-query'
 import { WeatherColors } from '@utils/colors'
 import { H, W } from '@utils/dimensions'
-import { F, Medium, Regular, SemiBold } from '@utils/fonts'
+import { F, SemiBold } from '@utils/fonts'
 import type { NavProp, Theme } from '@utils/types'
 import React, { useCallback, useEffect, useMemo } from 'react'
 import { StatusBar, View } from 'react-native'
@@ -57,7 +57,7 @@ export default function WeatherScreen({ navigation }: NavProp) {
 
   const { isPending, error, data, mutate } = useMutation({
     mutationKey: ['currentWeather'],
-    mutationFn: () => fetchResult(),
+    mutationFn: () => getWeather(currentCity?.lat || 0, currentCity?.lon || 0),
     onError: (err) => console.log(err),
     onSuccess: (d) => {
       setCurrentWeather(d)
@@ -66,18 +66,18 @@ export default function WeatherScreen({ navigation }: NavProp) {
   })
   const w = data || currentWeather
 
-  useEffect(() => {
-    if (currentCity) mutate()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [currentCity])
-
-  const fetchResult = useCallback(async (): Promise<Weather> => {
+  const fetchResult = useCallback(async () => {
     const now = new Date().getTime()
     if (now - lastUpdated > weatherCacheTime) {
-      return (await getWeather(currentCity?.lat || 0, currentCity?.lon || 0)) as Weather
+      console.log('Fetching from API')
+      mutate()
     }
-    return currentWeather
-  }, [currentWeather, lastUpdated, weatherCacheTime, currentCity])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [lastUpdated, weatherCacheTime, currentWeather])
+
+  useEffect(() => {
+    currentCity && fetchResult()
+  }, [currentCity, fetchResult])
 
   const bottom = useSafeAreaInsets().bottom
   const top = useSafeAreaInsets().top
@@ -98,8 +98,8 @@ export default function WeatherScreen({ navigation }: NavProp) {
       </View>
       <ScrollView contentContainerStyle={{ paddingBottom: bottom + 20, gap: 12 }}>
         <WeatherTopInfo color={color} w={w} />
-        <HourlyForecast color={color} w={w} hourly={data?.hourly} />
-        <DailyForecast color={color} daily={data?.daily} theme={theme} />
+        <HourlyForecast color={color} w={w} />
+        <DailyForecast color={color} w={w} theme={theme} />
         <Boxes w={w} theme={theme} />
         <PaddingBottom />
       </ScrollView>

src/screens/Weather/Main/components/DailyForecast.tsx

@@ -2,7 +2,7 @@ import { weatherStore, type TemperatureUnit } from '@/zustand/weatherStore'
 import { Calendar03SolidIcon } from '@assets/icons/icons'
 import Btn from '@components/Button'
 import Gradient from '@components/Gradient'
-import type { Daily } from '@screens/Weather/types'
+import type { Daily, Weather } from '@screens/Weather/types'
 import { Icons } from '@screens/Weather/utils'
 import { F, Medium, Regular } from '@utils/fonts'
 import type { Theme } from '@utils/types'
@@ -16,13 +16,14 @@ type WeatherForecastProps = {
   color: {
     color: string
   }
-  daily: Daily[] | undefined
   theme: Theme
+  w: Weather
 }
 
-export default function DailyForecast({ color, daily, theme }: WeatherForecastProps) {
+export default function DailyForecast({ color, w, theme }: WeatherForecastProps) {
   const currentUnit = weatherStore((state) => state.temperatureUnit)
   // const [data, setData] = useState<Daily[] | undefined>()
+  const daily = w?.daily
   const currentTemp = weatherStore((state) => state.currentWeather?.current.temp)
   const weeklyMinMax = useMemo(() => calculateWeeklyMinMax(daily), [daily])
   const dotPosition = useMemo(() => calculateDotPosition(currentTemp, daily && daily[0]), [currentTemp, daily])

src/screens/Weather/Main/components/HourlyForecast.tsx

@@ -17,15 +17,14 @@ type HourlyWeather = {
     color: string
   }
   w: Weather
-  hourly: Current[] | undefined
 }
 
-const HourlyForecast = React.memo<HourlyWeather>(({ color, w, hourly }) => {
+const HourlyForecast = React.memo<HourlyWeather>(({ color, w }) => {
   const currentUnit = weatherStore((state) => state.temperatureUnit)
   const timeFormat = weatherStore((state) => state.weatherTimeFormat)
   const Icon = Icons[w?.current.weather[0]!.icon || '02d']
   // const [data, setData] = useState<Current[] | undefined>()
-  const data = hourly
+  const data = w?.hourly
 
   // useEffect(() => {
   //   const timer = screenDelay(() => setData(hourly))

src/screens/Weather/Widget/WeatherWidget.tsx

@@ -46,7 +46,7 @@ const WeatherWidget = React.memo<{ navigation: StackNav }>(({ navigation }) => {
 
   const { isPending, error, data, mutate } = useMutation({
     mutationKey: ['currentWeather'],
-    mutationFn: () => fetchResult(),
+    mutationFn: () => getWeather(currentCity?.lat || 0, currentCity?.lon || 0),
     onError: (err) => console.log(err),
     onSuccess: (d) => {
       setCurrentWeather(d)
@@ -55,18 +55,18 @@ const WeatherWidget = React.memo<{ navigation: StackNav }>(({ navigation }) => {
   })
   const w = data || currentWeather
 
-  useEffect(() => {
-    if (currentCity) mutate()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [currentCity])
-
-  const fetchResult = useCallback(async (): Promise<Weather> => {
+  const fetchResult = useCallback(async () => {
     const now = new Date().getTime()
     if (now - lastUpdated > weatherCacheTime) {
-      return (await getWeather(currentCity?.lat || 0, currentCity?.lon || 0)) as Weather
+      console.log('Fetching from API')
+      mutate()
     }
-    return currentWeather
-  }, [currentWeather, lastUpdated, weatherCacheTime, currentCity])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [lastUpdated, weatherCacheTime, currentWeather])
+
+  useEffect(() => {
+    currentCity && fetchResult()
+  }, [currentCity, fetchResult])
 
   if (!weatherWidgetIsActive) return null
   if (!currentCity)

src/screens/Weather/api.ts

@@ -1,7 +1,7 @@
 import S from '@utils/storage'
 
-export const ACCUWEATHER_API_KEY = 'FqLdDZQkQofVcwsdCHX7uKdPVgWcPGHI'
-// export const ACCUWEATHER_API_KEY = 'C42OAAd8AANIyi8SLoqvq3mm59vADvRA'
+// export const ACCUWEATHER_API_KEY = 'FqLdDZQkQofVcwsdCHX7uKdPVgWcPGHI'
+export const ACCUWEATHER_API_KEY = 'C42OAAd8AANIyi8SLoqvq3mm59vADvRA'
 
 export const OPENWEATHER_API_KEY = '0e376e0750966cdba160fc85a4bb0427'