new_react_frontend #9
@@ -0,0 +1,260 @@
|
|||||||
|
import React, { useEffect, useState } from 'react';
|
||||||
|
import { View, Text, ScrollView, StyleSheet, TouchableOpacity, Linking } from 'react-native';
|
||||||
|
import { useLocalSearchParams, useRouter } from 'expo-router';
|
||||||
|
import { Ionicons } from '@expo/vector-icons';
|
||||||
|
import MapView, { Marker } from 'react-native-maps';
|
||||||
|
import { getPharmacy, getPharmacyMedicines } from '../../services/pharmacies';
|
||||||
|
import { LoadingSpinner } from '../../components/LoadingSpinner';
|
||||||
|
import { colors, spacing, borderRadius } from '../../constants/theme';
|
||||||
|
import { Pharmacy, PharmacyMedicine } from '../../types';
|
||||||
|
|
||||||
|
export default function PharmacyDetailScreen() {
|
||||||
|
const { id } = useLocalSearchParams<{ id: string }>();
|
||||||
|
const router = useRouter();
|
||||||
|
const [pharmacy, setPharmacy] = useState<Pharmacy | null>(null);
|
||||||
|
const [medicines, setMedicines] = useState<PharmacyMedicine[]>([]);
|
||||||
|
const [isLoading, setIsLoading] = useState(true);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!id) return;
|
||||||
|
|
||||||
|
const fetchPharmacy = async () => {
|
||||||
|
try {
|
||||||
|
const [pharmData, medData] = await Promise.all([
|
||||||
|
getPharmacy(Number(id)),
|
||||||
|
getPharmacyMedicines(Number(id)),
|
||||||
|
]);
|
||||||
|
setPharmacy(pharmData);
|
||||||
|
setMedicines(medData as PharmacyMedicine[]);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error fetching pharmacy:', error);
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
fetchPharmacy();
|
||||||
|
}, [id]);
|
||||||
|
|
||||||
|
const handleCall = () => {
|
||||||
|
if (pharmacy?.phone) {
|
||||||
|
Linking.openURL(`tel:${pharmacy.phone}`);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDirections = () => {
|
||||||
|
if (pharmacy) {
|
||||||
|
const url = `https://www.google.com/maps/dir/?api=1&destination=${pharmacy.latitude},${pharmacy.longitude}`;
|
||||||
|
Linking.openURL(url);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (isLoading) {
|
||||||
|
return <LoadingSpinner message="Cargando farmacia..." />;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!pharmacy) {
|
||||||
|
return (
|
||||||
|
<View style={styles.errorContainer}>
|
||||||
|
<Text style={styles.errorText}>Farmacia no encontrada</Text>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ScrollView style={styles.container}>
|
||||||
|
<View style={styles.header}>
|
||||||
|
<Text style={styles.name}>{pharmacy.name}</Text>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View style={styles.actionsRow}>
|
||||||
|
<TouchableOpacity style={styles.actionButton} onPress={handleCall}>
|
||||||
|
<Ionicons name="call" size={20} color={colors.primary} />
|
||||||
|
<Text style={styles.actionText}>Llamar</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
|
||||||
|
<TouchableOpacity style={styles.actionButton} onPress={handleDirections}>
|
||||||
|
<Ionicons name="navigate" size={20} color={colors.primary} />
|
||||||
|
<Text style={styles.actionText}>Cómo llegar</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View style={styles.infoSection}>
|
||||||
|
<View style={styles.infoRow}>
|
||||||
|
<Ionicons name="location" size={18} color={colors.textSecondary} />
|
||||||
|
<Text style={styles.infoText}>{pharmacy.address}</Text>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{pharmacy.phone && (
|
||||||
|
<View style={styles.infoRow}>
|
||||||
|
<Ionicons name="call" size={18} color={colors.textSecondary} />
|
||||||
|
<Text style={styles.infoText}>{pharmacy.phone}</Text>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View style={styles.mapContainer}>
|
||||||
|
<MapView
|
||||||
|
style={styles.map}
|
||||||
|
initialRegion={{
|
||||||
|
latitude: pharmacy.latitude,
|
||||||
|
longitude: pharmacy.longitude,
|
||||||
|
latitudeDelta: 0.01,
|
||||||
|
longitudeDelta: 0.01,
|
||||||
|
}}
|
||||||
|
scrollEnabled={false}
|
||||||
|
>
|
||||||
|
<Marker
|
||||||
|
coordinate={{
|
||||||
|
latitude: pharmacy.latitude,
|
||||||
|
longitude: pharmacy.longitude,
|
||||||
|
}}
|
||||||
|
title={pharmacy.name}
|
||||||
|
/>
|
||||||
|
</MapView>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View style={styles.medicinesSection}>
|
||||||
|
<Text style={styles.sectionTitle}>
|
||||||
|
Medicamentos ({medicines.length})
|
||||||
|
</Text>
|
||||||
|
|
||||||
|
{medicines.length === 0 ? (
|
||||||
|
<Text style={styles.noMedicines}>No hay medicamentos disponibles</Text>
|
||||||
|
) : (
|
||||||
|
medicines.map((med) => (
|
||||||
|
<TouchableOpacity
|
||||||
|
key={med.id}
|
||||||
|
style={styles.medicineCard}
|
||||||
|
onPress={() => router.push(`/medicine/${med.medicine_nregistro}`)}
|
||||||
|
>
|
||||||
|
<View style={styles.medicineInfo}>
|
||||||
|
<Text style={styles.medicineName}>{med.medicine_name}</Text>
|
||||||
|
<Text style={styles.medicineNregistro}>Reg: {med.medicine_nregistro}</Text>
|
||||||
|
</View>
|
||||||
|
<View style={styles.medicineStock}>
|
||||||
|
<Text style={styles.price}>{med.price.toFixed(2)} €</Text>
|
||||||
|
<Text style={styles.stock}>Stock: {med.stock}</Text>
|
||||||
|
</View>
|
||||||
|
</TouchableOpacity>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
</ScrollView>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
container: {
|
||||||
|
flex: 1,
|
||||||
|
backgroundColor: colors.background,
|
||||||
|
},
|
||||||
|
header: {
|
||||||
|
padding: spacing.md,
|
||||||
|
backgroundColor: colors.card,
|
||||||
|
},
|
||||||
|
name: {
|
||||||
|
fontSize: 22,
|
||||||
|
fontWeight: 'bold',
|
||||||
|
color: colors.text,
|
||||||
|
},
|
||||||
|
actionsRow: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
justifyContent: 'space-around',
|
||||||
|
padding: spacing.md,
|
||||||
|
backgroundColor: colors.card,
|
||||||
|
borderBottomWidth: 1,
|
||||||
|
borderBottomColor: colors.separator,
|
||||||
|
},
|
||||||
|
actionButton: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
padding: spacing.sm,
|
||||||
|
},
|
||||||
|
actionText: {
|
||||||
|
marginLeft: spacing.xs,
|
||||||
|
color: colors.primary,
|
||||||
|
fontWeight: '500',
|
||||||
|
},
|
||||||
|
infoSection: {
|
||||||
|
padding: spacing.md,
|
||||||
|
backgroundColor: colors.card,
|
||||||
|
marginTop: spacing.sm,
|
||||||
|
},
|
||||||
|
infoRow: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'flex-start',
|
||||||
|
marginBottom: spacing.sm,
|
||||||
|
},
|
||||||
|
infoText: {
|
||||||
|
flex: 1,
|
||||||
|
marginLeft: spacing.sm,
|
||||||
|
fontSize: 16,
|
||||||
|
color: colors.text,
|
||||||
|
},
|
||||||
|
mapContainer: {
|
||||||
|
height: 200,
|
||||||
|
marginTop: spacing.sm,
|
||||||
|
},
|
||||||
|
map: {
|
||||||
|
flex: 1,
|
||||||
|
},
|
||||||
|
medicinesSection: {
|
||||||
|
marginTop: spacing.sm,
|
||||||
|
padding: spacing.md,
|
||||||
|
},
|
||||||
|
sectionTitle: {
|
||||||
|
fontSize: 18,
|
||||||
|
fontWeight: '600',
|
||||||
|
color: colors.text,
|
||||||
|
marginBottom: spacing.md,
|
||||||
|
},
|
||||||
|
noMedicines: {
|
||||||
|
color: colors.textSecondary,
|
||||||
|
textAlign: 'center',
|
||||||
|
padding: spacing.xl,
|
||||||
|
},
|
||||||
|
medicineCard: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
backgroundColor: colors.card,
|
||||||
|
borderRadius: borderRadius.md,
|
||||||
|
padding: spacing.md,
|
||||||
|
marginBottom: spacing.sm,
|
||||||
|
},
|
||||||
|
medicineInfo: {
|
||||||
|
flex: 1,
|
||||||
|
},
|
||||||
|
medicineName: {
|
||||||
|
fontSize: 16,
|
||||||
|
fontWeight: '500',
|
||||||
|
color: colors.text,
|
||||||
|
},
|
||||||
|
medicineNregistro: {
|
||||||
|
fontSize: 12,
|
||||||
|
color: colors.textSecondary,
|
||||||
|
marginTop: spacing.xs,
|
||||||
|
},
|
||||||
|
medicineStock: {
|
||||||
|
alignItems: 'flex-end',
|
||||||
|
},
|
||||||
|
price: {
|
||||||
|
fontSize: 16,
|
||||||
|
fontWeight: '600',
|
||||||
|
color: colors.primary,
|
||||||
|
},
|
||||||
|
stock: {
|
||||||
|
fontSize: 12,
|
||||||
|
color: colors.textSecondary,
|
||||||
|
marginTop: spacing.xs,
|
||||||
|
},
|
||||||
|
errorContainer: {
|
||||||
|
flex: 1,
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
},
|
||||||
|
errorText: {
|
||||||
|
fontSize: 16,
|
||||||
|
color: colors.textSecondary,
|
||||||
|
},
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user