140 lines
4.0 KiB
JavaScript
140 lines
4.0 KiB
JavaScript
import { useState, useEffect } from 'react';
|
|
import { StyleSheet, Platform, ScrollView, KeyboardAvoidingView } from 'react-native';
|
|
import { TextInput, Button, Snackbar } from 'react-native-paper';
|
|
import { locations } from '@/data/locations';
|
|
import { useLocalSearchParams, useRouter } from 'expo-router';
|
|
|
|
export default function edit() {
|
|
const { id } = useLocalSearchParams();
|
|
const router = useRouter();
|
|
const locationData = locations.find(loc => loc.id == id);
|
|
const [formData, setFormData] = useState({
|
|
name: '',
|
|
description: '',
|
|
image: '',
|
|
area: '',
|
|
population: '',
|
|
});
|
|
|
|
const [message, setMessage] = useState('');
|
|
const [visible, setVisible] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (locationData) {
|
|
console.log(locationData);
|
|
setFormData({
|
|
name: locationData.name,
|
|
description: locationData.description,
|
|
image: locationData.image,
|
|
area: locationData.area.toString(),
|
|
population: locationData.population.toString(),
|
|
});
|
|
}
|
|
}, [locationData]);
|
|
|
|
|
|
const editLocation = () => {
|
|
if (
|
|
formData.name &&
|
|
formData.description &&
|
|
formData.image &&
|
|
formData.area &&
|
|
formData.population
|
|
) {
|
|
const index = locations.findIndex((loc) => loc.id == id);
|
|
if (index !== -1) {
|
|
locations[index] = { ...locations[index], ...formData };
|
|
setMessage('Lokalizacja została zaktualizowana!');
|
|
setVisible(true);
|
|
}else{
|
|
setMessage('Błąd spróbuj ponownie póżniej!');
|
|
setVisible(true);
|
|
}
|
|
} else{
|
|
setMessage('Wypełnij wszystkie pola!');
|
|
setVisible(true);
|
|
}
|
|
};
|
|
|
|
|
|
|
|
return (
|
|
<KeyboardAvoidingView
|
|
style={{ flex: 1 }}
|
|
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
|
|
<ScrollView contentContainerStyle={styles.container}>
|
|
<Snackbar
|
|
visible={visible}
|
|
onDismiss={() => setVisible(false)}
|
|
duration={3000}
|
|
>
|
|
{message}
|
|
</Snackbar>
|
|
<TextInput
|
|
mode="outlined"
|
|
label="Nazwa"
|
|
placeholder="Wpisz nazwa"
|
|
style={{ margin: 10, width: '100%' }}
|
|
value={formData.name}
|
|
onChangeText={e => setFormData({ ...formData, name: e })}
|
|
|
|
/>
|
|
<TextInput
|
|
mode="outlined"
|
|
label="Opis"
|
|
placeholder="Wpisz opis"
|
|
style={{ margin: 10, width: '100%' }}
|
|
multiline={true}
|
|
value={formData.description}
|
|
onChangeText={e => setFormData({ ...formData, description: e })}
|
|
/>
|
|
<TextInput
|
|
mode="outlined"
|
|
label="Link do zdjęcia"
|
|
multiline={true}
|
|
placeholder="Wpisz link do zdjęcia"
|
|
style={{ margin: 10, width: '100%', borderRadius:10}}
|
|
value={formData.image}
|
|
onChangeText={e => setFormData({ ...formData, image: e })}
|
|
/>
|
|
<TextInput
|
|
mode="outlined"
|
|
label="Powierzchnia"
|
|
placeholder="Wpisz powierzchnie"
|
|
style={{ margin: 10, width: '100%' }}
|
|
value={formData.area}
|
|
onChangeText={e => setFormData({ ...formData, area: e })}
|
|
/>
|
|
<TextInput
|
|
mode="outlined"
|
|
label="Ludność"
|
|
placeholder='Wpisz liczbę ludności'
|
|
style={{ margin: 10, width: '100%' }}
|
|
value={formData.population}
|
|
keyboardType='numeric'
|
|
onChangeText={e => setFormData({ ...formData, population: e })}
|
|
/>
|
|
|
|
<Button
|
|
style={{ margin: 10, width: '100%' }}
|
|
icon="plus-circle-outline"
|
|
mode={'contained'}
|
|
onPress={editLocation}
|
|
>Edytuj</Button>
|
|
</ScrollView>
|
|
</KeyboardAvoidingView>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: '#25292e',
|
|
justifyContent: 'flex-start',
|
|
alignItems: 'center',
|
|
},
|
|
text: {
|
|
color: '#fff',
|
|
},
|
|
});
|