Skip to content

Commit b32e165

Browse files
codeAbinashcodeAbinash
committed
Refactor Weather component to use updated font utility and remove unused imports
1 parent 2cdf317 commit b32e165

File tree

9 files changed

+46
-37
lines changed

9 files changed

+46
-37
lines changed

‎src/screens/Weather/Main/Weather.tsx‎

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -76,8 +76,9 @@ export default function WeatherScreen({ navigation }: NavProp) {
7676
}, [lastUpdated, weatherCacheTime, currentWeather])
7777

7878
useEffect(() => {
79-
currentCity && fetchResult()
80-
}, [currentCity, fetchResult])
79+
currentCity && !isPending && fetchResult()
80+
// eslint-disable-next-line react-hooks/exhaustive-deps
81+
}, [currentCity])
8182

8283
const bottom = useSafeAreaInsets().bottom
8384
const top = useSafeAreaInsets().top
@@ -121,12 +122,13 @@ function Boxes({ w, theme }: { w: Weather; theme: Theme }) {
121122
}),
122123
)
123124

124-
const { mutate } = useMutation({
125+
const { mutate, isPending } = useMutation({
125126
mutationKey: ['currentWeatherAQI'],
126-
mutationFn: () => fetchResult(),
127+
mutationFn: () => getAQI(currentCity?.lat || 0, currentCity?.lon || 0),
127128
onError: (err) => console.log(err),
128129
onSuccess: (d: AQI) => {
129130
setCurrentAQI(d)
131+
setLastUpdatedAQI(new Date().getTime())
130132
},
131133
})
132134
const aqiStatus = useMemo(() => getAQIStatus(currentAQI?.list?.[0]?.main?.aqi || 0), [currentAQI])
@@ -138,14 +140,17 @@ function Boxes({ w, theme }: { w: Weather; theme: Theme }) {
138140
const fetchResult = useCallback(async (): Promise<AQI> => {
139141
const now = new Date().getTime()
140142
if (now - lastUpdatedAQI > weatherCacheTime) {
141-
setLastUpdatedAQI(now)
142-
return (await getAQI(currentCity?.lat || 0, currentCity?.lon || 0)) as AQI
143+
console.log('Fetching AQI from API')
144+
mutate()
143145
}
144146
return currentAQI
145-
}, [lastUpdatedAQI, weatherCacheTime, currentAQI, setLastUpdatedAQI, currentCity?.lat, currentCity?.lon])
147+
// eslint-disable-next-line react-hooks/exhaustive-deps
148+
}, [lastUpdatedAQI, weatherCacheTime, currentAQI])
146149

147-
// eslint-disable-next-line react-hooks/exhaustive-deps
148-
useEffect(() => mutate, [currentCity])
150+
useEffect(() => {
151+
currentCity && !isPending && fetchResult()
152+
// eslint-disable-next-line react-hooks/exhaustive-deps
153+
}, [currentCity])
149154

150155
return (
151156
<View style={{ flexDirection: 'row', justifyContent: 'space-between', rowGap: 12 }} className='flex-wrap px-4'>

‎src/screens/Weather/Main/components/AirQualityIndex.tsx‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,10 @@
1-
import { weatherStore } from '@/zustand/weatherStore'
21
import { NaturalFoodSolidIcon } from '@assets/icons/icons'
32
import Gradient from '@components/Gradient'
4-
import { hw } from '@screens/Home/style'
5-
import { getAQI, getWeather } from '@screens/Weather/api'
6-
import type { Weather } from '@screens/Weather/types'
7-
import { boxSize, Icons } from '@screens/Weather/utils'
8-
import { useMutation } from '@tanstack/react-query'
3+
import { boxSize } from '@screens/Weather/utils'
94
import { F, Medium, Regular } from '@utils/fonts'
105
import type { Theme } from '@utils/types'
11-
import React, { useCallback } from 'react'
6+
import React from 'react'
127
import { View } from 'react-native'
13-
import { useDerivedValue, useSharedValue } from 'react-native-reanimated'
148
import WeatherLabel from './WeatherLabel'
159

1610
const gradientColors = [

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ export default function DailyForecast({ color, w, theme }: WeatherForecastProps)
4141

4242
return (
4343
<>
44-
<Animated.View className='px-4' entering={FadeIn.duration(700).delay(100)}>
44+
<Animated.View className='px-4' entering={FadeIn.duration(400)}>
4545
<View className='rounded-3xl bg-black/10 pb-2'>
4646
<WeatherLabel color={color} label='7-Day Forecast' Icon={Calendar03SolidIcon} />
4747
<Underline />

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ const HourlyForecast = React.memo<HourlyWeather>(({ color, w }) => {
3232
// }, [hourly])
3333

3434
return (
35-
<Animated.View className='mt-10 px-4' entering={FadeIn.duration(700).delay(100)}>
35+
<Animated.View className='mt-10 px-4' entering={FadeIn.duration(400)}>
3636
<View className='rounded-3xl bg-black/10'>
3737
<WeatherLabel Icon={Clock01SolidIcon} color={color} label='Hourly Forecast' />
3838
<Underline />

‎src/screens/Weather/Main/components/MoonPhase.tsx‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { getMoonImageLink } from '@screens/Weather/api'
44
import { boxFullSize, mapMoonPhaseToImage } from '@screens/Weather/utils'
55
import { F, Medium, Regular } from '@utils/fonts'
66
import type { Theme } from '@utils/types'
7-
import { getHoursMinutes } from '@utils/utils'
7+
import { getAp, getHoursMinutes } from '@utils/utils'
88
import React from 'react'
99
import { Image, View } from 'react-native'
1010
import WeatherLabel from './WeatherLabel'
@@ -28,15 +28,19 @@ export default function MoonPhase({ moonrise, moonset, phase, theme }: MoonRiseS
2828
<Medium style={[{ fontSize: 35 }, theme.color]}>{phase || '__'}</Medium>
2929
<Regular style={[theme.color, F.F12]}>{moonPhaseString(phase || 1)}</Regular>
3030
{/* <View> */}
31-
<Regular style={[theme.color, F.F12]}>Moonrise at {getHoursMinutes(moonrise || 0, timeFormat)}, </Regular>
32-
<Regular style={[theme.color, F.F12]}>Moonset at {getHoursMinutes(moonset || 0, timeFormat)}</Regular>
31+
<Regular style={[theme.color, F.F12]}>
32+
Moonrise at {getHoursMinutes(moonrise || 0, timeFormat)} {getAp(moonrise || 0, timeFormat)},{' '}
33+
</Regular>
34+
<Regular style={[theme.color, F.F12]}>
35+
Moonset at {getHoursMinutes(moonset || 0, timeFormat)} {getAp(moonset || 0, timeFormat)}
36+
</Regular>
3337
{/* </View> */}
3438
</View>
3539
<Image
3640
source={{ uri: getMoonImageLink(mapMoonPhaseToImage(phase || 1)) }}
3741
style={{
38-
height: 31 * 4,
39-
width: 31 * 4,
42+
height: 30 * 4,
43+
width: 30 * 4,
4044
marginTop: -7,
4145
}}
4246
/>

‎src/screens/Weather/Main/components/Precipitation.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,8 @@ export default function Precipitation({ theme, rain, snow, status }: Precipitati
1919
<WeatherLabel Icon={CloudAngledRainSolidIcon} color={theme.color} label='Precipitation' />
2020
<View className='flex-1 justify-between px-5 pb-4 pt-0'>
2121
<View className='flex-row items-end'>
22-
<Medium style={[{ fontSize: 33 }, theme.color]}>{rain || '0'}</Medium>
23-
<Medium style={[{ fontSize: 20, paddingBottom: 8 }, theme.color]} className='pl-1'>
22+
<Medium style={[{ fontSize: 28 }, theme.color]}>{rain || '0'}</Medium>
23+
<Medium style={[{ fontSize: 20, paddingBottom: 5 }, theme.color]} className='pl-1'>
2424
mm{' '}
2525
</Medium>
2626
</View>

‎src/screens/Weather/Main/components/SunRiseSet.tsx‎

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Sun03SolidIcon } from '@assets/icons/icons'
33
import { boxSize } from '@screens/Weather/utils'
44
import { F, Medium, Regular } from '@utils/fonts'
55
import type { Theme } from '@utils/types'
6-
import { getHoursMinutes } from '@utils/utils'
6+
import { getAp, getHoursMinutes } from '@utils/utils'
77
import React from 'react'
88
import { View } from 'react-native'
99
import WeatherLabel from './WeatherLabel'
@@ -27,15 +27,21 @@ export default function SunRiseSet({ theme, now, sunrise, sunset }: SunRiseSetPr
2727
label={isDay === null ? 'Daylight' : isDay ? 'Sunset' : 'Sunrise'}
2828
/>
2929
<View className='flex-1 justify-between px-5 pb-4 pt-0'>
30-
<Medium style={[{ fontSize: 30 }, theme.color]}>
31-
{isDay === null
32-
? '__:__'
33-
: isDay
34-
? getHoursMinutes(sunset || 0, timeFormat)
35-
: getHoursMinutes(sunrise || 0, timeFormat)}
36-
</Medium>
30+
<View className='flex-row items-end'>
31+
<Medium style={[{ fontSize: 28 }, theme.color]}>
32+
{isDay === null
33+
? '__:__'
34+
: isDay
35+
? getHoursMinutes(sunset || 0, timeFormat)
36+
: getHoursMinutes(sunrise || 0, timeFormat)}
37+
</Medium>
38+
<Medium style={[{ fontSize: 20, paddingBottom: 5 }, theme.color]} className='pl-1'>
39+
{isDay === null ? '__' : getAp(isDay ? sunset || 0 : sunrise || 0, timeFormat)}
40+
</Medium>
41+
</View>
3742
<Regular style={[theme.color, F.F12]}>
38-
Sunrise at {getHoursMinutes(sunrise || 0, timeFormat)}, sunset at {getHoursMinutes(sunset || 0, timeFormat)}.
43+
Sunrise at {getHoursMinutes(sunrise || 0, timeFormat)} {getAp(sunrise || 0, timeFormat)}, sunset at{' '}
44+
{getHoursMinutes(sunset || 0, timeFormat)} {getAp(sunset || 0, timeFormat)}.
3945
</Regular>
4046
</View>
4147
</View>

‎src/screens/Weather/utils.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ export const boxSize = {
4545

4646
export const boxFullSize = {
4747
width: W - 33,
48-
height: W / 2 - 22,
48+
// height: W / 2 - 22,
4949
}
5050

5151
export const minPressure = 970

‎src/utils/utils.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -195,7 +195,7 @@ export function getHoursMinutes(unix: number, unit: TimeFormat) {
195195

196196
// if (hours < 10) hours = '0' + hours
197197
if (minutes < 10) minutes = '0' + minutes
198-
return `${hours}:${minutes} ${getAp(unix, unit)}`
198+
return `${hours}:${minutes}`
199199
}
200200

201201
function getTime24(unix: number) {

0 commit comments

Comments
 (0)