init edit

2025-04-15 21:54:54 +02:00
parent 6e8a235ed4
commit 5e44b30a49
5 changed files with 183 additions and 14 deletions
--- a/app/location/edit/[id].js
+++ b/app/location/edit/[id].js
@@ -0,0 +1,139 @@
+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',
+  },
+});