Sync cities between prayers

app/(tabs)/index.tsx

@@ -1,11 +1,11 @@
 import { Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
 import { useCallback, useEffect, useState } from 'react';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import AsyncStorage from '@react-native-async-storage/async-storage';
 
 import { getPrayerTimes, cities } from '../../utils/prayerTimeCalculator';
 import i18n from '../../i18n';
 import Colors from '../../constants/Colors';
+import { useCity } from '../../context/CityContext';
 
 type Prayer = {
   name: string;
@@ -17,26 +17,11 @@ type City = keyof typeof cities;
 export default function TabIndex() {
   const colorScheme = 'dark';
   const theme = Colors[colorScheme ?? 'light'];
-  const [selectedCity, setSelectedCity] = useState<City>('Makkah');
+  const { selectedCity, setSelectedCity } = useCity();
   const [prayerTimes, setPrayerTimes] = useState<Prayer[]>([]);
   const [nextPrayerName, setNextPrayerName] = useState<string | null>(null);
   const insets = useSafeAreaInsets();
 
-  useEffect(() => {
-    const loadSelectedCity = async () => {
-      try {
-        const city = (await AsyncStorage.getItem('selectedCity')) as City;
-        if (city) {
-          setSelectedCity(city);
-        }
-      } catch (error) {
-        console.error('Failed to load selected city:', error);
-      }
-    };
-
-    loadSelectedCity();
-  }, []);
-
   const prayerNameMapping: { [key: string]: string } = {
     fajr: i18n.t('fajr'),
     dhuhr: i18n.t('dhuhr'),
@@ -82,15 +67,6 @@ export default function TabIndex() {
     return () => clearInterval(interval);
   }, [updatePrayerTimes]);
 
-  const handleCityChange = async (city: City) => {
-    setSelectedCity(city);
-    try {
-      await AsyncStorage.setItem('selectedCity', city);
-    } catch (error) {
-      console.error('Failed to save selected city:', error);
-    }
-  };
-
   const renderPrayerTime = (prayer: Prayer) => {
     const isNextPrayer = prayer.name === nextPrayerName;
     return (
@@ -119,7 +95,7 @@ export default function TabIndex() {
         {(Object.keys(cities) as City[]).map((city) => (
           <Pressable
             key={city}
-            onPress={() => handleCityChange(city)}
+            onPress={() => setSelectedCity(city)}
             style={[styles.cityButton, { backgroundColor: theme.secondary }, selectedCity === city && [styles.activeCityButton, { backgroundColor: theme.tint }]]}>
             <Text
               style={[