init State Mangement and add del function

app/(tabs)/add.jsx

@@ -1,10 +1,11 @@
 import { useState } from 'react';
 import { StyleSheet, Platform, KeyboardAvoidingView, ScrollView } 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 useLocationStore from '@/store';
 
 export default function FormScreen() {
+  const addLocation = useLocationStore((state) => state.addLocation);
+
   const [formData, setFormData] = useState({
     name: '',
     description: '',
@@ -15,13 +16,16 @@ export default function FormScreen() {
   const [message, setMessage] = useState('');
   const [visible, setVisible] = useState(false);
 
-  const [location, setLocation] = useState(locations.sort((a, b) => b.id - a.id));
-
-  const addLocation = () => {
-    console.log(formData);
-    if(formData.name && formData.description && formData.image && formData.area && formData.population) {
+  const handleAddLocation = () => {
+    if (
+      formData.name &&
+      formData.description &&
+      formData.image &&
+      formData.area &&
+      formData.population
+    ) {
       const newLocation = {
-        id: locations.length > 0 ? locations[0].id + 1 : 0,
+        id: Date.now(), // Generowanie unikalnego ID
         name: formData.name,
         description: formData.description,
         image: formData.image,
@@ -29,9 +33,7 @@ export default function FormScreen() {
         population: formData.population,
       };
 
-      setLocation([newLocation, ...location]);
-      
-      locations.push(newLocation);
+      addLocation(newLocation);
 
       setFormData({
         name: '',
@@ -42,75 +44,75 @@ export default function FormScreen() {
       });
       setMessage('Lokalizacja została dodana!');
       setVisible(true);
-    }else{
+    } 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>
+      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"
+          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}
-          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={addLocation}
-          >Dodaj</Button>
+          onPress={handleAddLocation}
+        >
+          Dodaj
+        </Button>
       </ScrollView>
     </KeyboardAvoidingView>
   );
@@ -123,7 +125,4 @@ const styles = StyleSheet.create({
     justifyContent: 'flex-start',
     alignItems: 'center',
   },
-  text: {
-    color: '#fff',
-  },
-});
+});