Ichitux
108 lines
2.8 KiB
TypeScript
108 lines
2.8 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { View, StyleSheet, Text } from 'react-native';
|
|
import MapView, { Marker } from 'react-native-maps';
|
|
import { useRouter } from 'expo-router';
|
|
import { getPharmacies } from '../../services/pharmacies';
|
|
import { LoadingSpinner } from '../../components/LoadingSpinner';
|
|
import { useThemeContext } from '../../components/ThemeProvider';
|
|
import { spacing, borderRadius } from '../../constants/theme';
|
|
import { Pharmacy } from '../../types';
|
|
|
|
export default function MapScreen() {
|
|
const router = useRouter();
|
|
const { colors } = useThemeContext();
|
|
const [pharmacies, setPharmacies] = useState<Pharmacy[]>([]);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const [region, setRegion] = useState({
|
|
latitude: 40.4168,
|
|
longitude: -3.7038,
|
|
latitudeDelta: 0.0922,
|
|
longitudeDelta: 0.0421,
|
|
});
|
|
|
|
useEffect(() => {
|
|
const fetchPharmacies = async () => {
|
|
try {
|
|
const data = await getPharmacies();
|
|
setPharmacies(data);
|
|
|
|
if (data.length > 0) {
|
|
setRegion({
|
|
latitude: data[0].latitude,
|
|
longitude: data[0].longitude,
|
|
latitudeDelta: 0.0922,
|
|
longitudeDelta: 0.0421,
|
|
});
|
|
}
|
|
} catch (error) {
|
|
console.error('Error fetching pharmacies:', error);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
fetchPharmacies();
|
|
}, []);
|
|
|
|
if (isLoading) {
|
|
return <LoadingSpinner message="Cargando farmacias..." />;
|
|
}
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<MapView
|
|
style={styles.map}
|
|
region={region}
|
|
onRegionChangeComplete={setRegion}
|
|
showsUserLocation={true}
|
|
showsMyLocationButton={true}
|
|
>
|
|
{pharmacies.map((pharmacy) => (
|
|
<Marker
|
|
key={pharmacy.id}
|
|
coordinate={{
|
|
latitude: pharmacy.latitude,
|
|
longitude: pharmacy.longitude,
|
|
}}
|
|
title={pharmacy.name}
|
|
description={pharmacy.address}
|
|
onCalloutPress={() => router.push(`/pharmacy/${pharmacy.id}`)}
|
|
/>
|
|
))}
|
|
</MapView>
|
|
|
|
<View style={[styles.legend, { backgroundColor: colors.card }]}>
|
|
<Text style={[styles.legendText, { color: colors.text }]}>
|
|
{pharmacies.length} farmacias en el mapa
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
},
|
|
map: {
|
|
flex: 1,
|
|
},
|
|
legend: {
|
|
position: 'absolute',
|
|
bottom: spacing.lg,
|
|
left: spacing.md,
|
|
right: spacing.md,
|
|
borderRadius: borderRadius.lg,
|
|
padding: spacing.sm + 4,
|
|
alignItems: 'center',
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: 0, height: 4 },
|
|
shadowOpacity: 0.08,
|
|
shadowRadius: 20,
|
|
elevation: 4,
|
|
},
|
|
legendText: {
|
|
fontSize: 14,
|
|
},
|
|
});
|