init State Mangement and add del function

app/location/[id].js

@@ -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',
   },
-});
+});

app/location/edit/[id].js

@@ -1,126 +1,131 @@
 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 { TextInput, Button, Snackbar } from 'react-native-paper';
 import { useLocalSearchParams, useRouter } from 'expo-router';
+import useLocationStore from '@/store';
 
-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: '',
-    });
+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 [message, setMessage] = useState('');
-    const [visible, setVisible] = useState(false);
+  const [formData, setFormData] = useState({
+    name: '',
+    description: '',
+    image: '',
+    area: '',
+    population: '',
+  });
 
-    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 [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 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);
-      }
-    };
+  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>
+      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"
+          placeholder="Wpisz nazwę"
           style={{ margin: 10, width: '100%' }}
           value={formData.name}
-          onChangeText={e => setFormData({ ...formData, name: e })}
-
-          />
-        <TextInput 
+          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 
+          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}}
+          style={{ margin: 10, width: '100%' }}
           value={formData.image}
-          onChangeText={e => setFormData({ ...formData, image: e })}
-          />
+          onChangeText={(e) => setFormData({ ...formData, image: e })}
+        />
         <TextInput
           mode="outlined"
           label="Powierzchnia"
-          placeholder="Wpisz powierzchnie"
+          placeholder="Wpisz powierzchnię"
           style={{ margin: 10, width: '100%' }}
           value={formData.area}
-          onChangeText={e => setFormData({ ...formData, area: e })}
+          onChangeText={(e) => setFormData({ ...formData, area: e })}
         />
         <TextInput
           mode="outlined"
           label="Ludność"
-          placeholder='Wpisz liczbę ludności'
+          placeholder="Wpisz liczbę ludności"
           style={{ margin: 10, width: '100%' }}
           value={formData.population}
-          keyboardType='numeric'
-          onChangeText={e => setFormData({ ...formData, population: e })}
+          keyboardType="numeric"
+          onChangeText={(e) => setFormData({ ...formData, population: e })}
         />
-        
-          <Button 
+        <Button
           style={{ margin: 10, width: '100%' }}
           icon="plus-circle-outline"
           mode={'contained'}
-          onPress={editLocation}
-          >Edytuj</Button>
+          onPress={handleEditLocation}
+        >
+          Edytuj
+        </Button>
       </ScrollView>
     </KeyboardAvoidingView>
   );
@@ -133,7 +138,4 @@ const styles = StyleSheet.create({
     justifyContent: 'flex-start',
     alignItems: 'center',
   },
-  text: {
-    color: '#fff',
-  },
-});
+});