change js/tsx to jsx

2025-04-22 19:13:59 +02:00
parent 8f5b151d87
commit 1b48686d2c
6 changed files with 2 additions and 1 deletions
--- a/app/location/edit/[id].jsx
+++ b/app/location/edit/[id].jsx
@@ -0,0 +1,142 @@
+import { useState, useEffect } from 'react';
+import { StyleSheet, Platform, ScrollView, KeyboardAvoidingView } from 'react-native';
+import { TextInput, Button, Snackbar } from 'react-native-paper';
+import { useLocalSearchParams, useRouter } from 'expo-router';
+import useLocationStore from '@/store';
+
+export default function EditLocation() {
+  const { id } = useLocalSearchParams();
+  const router = useRouter();
+  const location = useLocationStore((state) =>
+    state.locations.find((loc) => loc.id == id)
+  );
+  const updateLocation = useLocationStore((state) => state.updateLocation);
+
+  const [formData, setFormData] = useState({
+    name: '',
+    description: '',
+    image: '',
+    area: '',
+    population: '',
+  });
+
+  const [message, setMessage] = useState('');
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    if (location) {
+      setFormData({
+        name: location.name,
+        description: location.description,
+        image: location.image,
+        area: location.area.toString(),
+        population: location.population.toString(),
+      });
+    }
+  }, [location]);
+
+  const handleEditLocation = () => {
+    if (
+      formData.name &&
+      formData.description &&
+      formData.image &&
+      formData.area &&
+      formData.population
+    ) {
+      updateLocation(id, {
+        name: formData.name,
+        description: formData.description,
+        image: formData.image,
+        area: parseFloat(formData.area),
+        population: parseInt(formData.population, 10),
+      });
+
+      setMessage('Lokalizacja została zaktualizowana!');
+      setVisible(true);
+
+      // setTimeout(() => {
+      //   router.replace(`/location/${id}`);
+      // }, 2000);
+    } 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 nazwę"
+          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%' }}
+          value={formData.image}
+          onChangeText={(e) => setFormData({ ...formData, image: e })}
+        />
+        <TextInput
+          mode="outlined"
+          label="Powierzchnia"
+          placeholder="Wpisz powierzchnię"
+          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={handleEditLocation}
+        >
+          Edytuj
+        </Button>
+      </ScrollView>
+    </KeyboardAvoidingView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#25292e',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+  },
+});