Sync cities between prayers

context/CityContext.tsx

@@ -0,0 +1,54 @@
+import React, { createContext, useState, useEffect, useContext, ReactNode } from 'react';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { cities } from '../utils/prayerTimeCalculator';
+
+type City = keyof typeof cities;
+
+interface CityContextType {
+  selectedCity: City;
+  setSelectedCity: (city: City) => void;
+}
+
+const CityContext = createContext<CityContextType | undefined>(undefined);
+
+export const CityProvider = ({ children }: { children: ReactNode }) => {
+  const [selectedCity, setSelectedCityState] = useState<City>('Makkah');
+
+  useEffect(() => {
+    const loadSelectedCity = async () => {
+      try {
+        const city = await AsyncStorage.getItem('selectedCity') as City;
+        if (city) {
+          setSelectedCityState(city);
+        }
+      } catch (error) {
+        console.error('Failed to load selected city:', error);
+      }
+    };
+
+    loadSelectedCity();
+  }, []);
+
+  const handleSetSelectedCity = async (city: City) => {
+    setSelectedCityState(city);
+    try {
+      await AsyncStorage.setItem('selectedCity', city);
+    } catch (error) {
+      console.error('Failed to save selected city:', error);
+    }
+  };
+
+  return (
+    <CityContext.Provider value={{ selectedCity, setSelectedCity: handleSetSelectedCity }}>
+      {children}
+    </CityContext.Provider>
+  );
+};
+
+export const useCity = () => {
+  const context = useContext(CityContext);
+  if (context === undefined) {
+    throw new Error('useCity must be used within a CityProvider');
+  }
+  return context;
+};