85 lines
2.4 KiB
JavaScript
85 lines
2.4 KiB
JavaScript
import { View, ScrollView, StyleSheet, ActivityIndicator } from 'react-native';
|
|
import { useTheme, Text, Card } from 'react-native-paper';
|
|
import { useLocalSearchParams } from 'expo-router';
|
|
import { useEffect, useState } from 'react';
|
|
import { getLocation } from '@/api/locations';
|
|
|
|
export default function Location() {
|
|
const theme = useTheme();
|
|
const { id } = useLocalSearchParams();
|
|
const [location, setLocation] = useState(null);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
const fetchLocation = async () => {
|
|
try {
|
|
const data = await getLocation(id)
|
|
setLocation(data);
|
|
} catch (error) {
|
|
console.error("Error fetching location:", error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
fetchLocation();
|
|
}, [id]);
|
|
|
|
if (loading) {
|
|
return (
|
|
<View style={[styles.container, { backgroundColor: theme.colors.background }]}>
|
|
<ActivityIndicator size="large" color={theme.colors.primary} />
|
|
</View>
|
|
);
|
|
}
|
|
|
|
if (!location) {
|
|
return (
|
|
<View style={styles.container}>
|
|
<Text style={styles.text}>Brak lokalizacji - {id}</Text>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<ScrollView>
|
|
<Card style={{ margin: 10 }}>
|
|
<Card.Cover style={{ marginBottom: 10 }} source={{ uri: location.image }} />
|
|
<Card.Content style={{ marginBottom: 10 }}>
|
|
<Text variant="headlineLarge" style={{ marginBottom: 10 }}>
|
|
{location.name}
|
|
</Text>
|
|
<Text variant="headlineLarge" style={{ marginBottom: 10 }}>
|
|
Opis:
|
|
</Text>
|
|
<Text variant="bodyMedium">{location.description}</Text>
|
|
</Card.Content>
|
|
|
|
<Card.Content>
|
|
<Text variant="headlineLarge" style={{ marginBottom: 10 }}>
|
|
Statystyki:
|
|
</Text>
|
|
<Text variant="bodyMedium" style={{ marginBottom: 10 }}>
|
|
Powierzchnia: {location.area} km²
|
|
</Text>
|
|
<Text variant="bodyMedium" style={{ marginBottom: 10 }}>
|
|
Ludność: {location.population} osób
|
|
</Text>
|
|
</Card.Content>
|
|
</Card>
|
|
</ScrollView>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: '#25292e',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
},
|
|
text: {
|
|
color: '#fff',
|
|
},
|
|
}); |