init State Mangement and add del function

This commit is contained in:
Patryk
2025-04-22 18:35:39 +02:00
parent 5e44b30a49
commit 8f5b151d87
8 changed files with 252 additions and 185 deletions

View File

@@ -1,50 +1,51 @@
import { View, ScrollView, StyleSheet } from 'react-native';
import { Text, Card } from 'react-native-paper';
import { useLocalSearchParams } from 'expo-router';
import { locations } from '@/data/locations';
import useLocationStore from '@/store';
export default function Location() {
const { id } = useLocalSearchParams();
const location = locations.find(loc => loc.id == id);
const location = useLocationStore((state) =>
state.locations.find((loc) => loc.id == id)
);
if (!location) {
return (
<View style={styles.container}>
<Text style={styles.text}>Brak lokalizaji - {id}</Text>
<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>
<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²
<Card.Content>
<Text variant="headlineLarge" style={{ marginBottom: 10 }}>
Statystyki:
</Text>
<Text variant="bodyMedium" style={{marginBottom: 10}}>
Ludność: {location.population} osób
<Text variant="bodyMedium" style={{ marginBottom: 10 }}>
Powierzchnia: {location.area} km²
</Text>
</Card.Content>
</Card>
</ScrollView></View>
<Text variant="bodyMedium" style={{ marginBottom: 10 }}>
Ludność: {location.population} osób
</Text>
</Card.Content>
</Card>
</ScrollView>
</View>
);
}
@@ -58,4 +59,4 @@ const styles = StyleSheet.create({
text: {
color: '#fff',
},
});
});