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

app/(tabs)/index.tsx

@@ -1,31 +1,32 @@
 import { View, StyleSheet, FlatList } from 'react-native';
-import { useTheme, Card, Text, Button} from 'react-native-paper';
+import { useTheme, Card, Text, Button } from 'react-native-paper';
 import { Link } from 'expo-router';
-import { locations } from '@/data/locations';
+import useLocationStore from '@/store';
 
 export default function Index() {
-const theme = useTheme();
-locations.sort((a, b) => b.id - a.id);
+  const theme = useTheme();
+  const locations = useLocationStore((state) => state.locations);
+
   return (
-    <View style={[styles.container, {backgroundColor: theme.colors.background}]}>
-      <FlatList 
+    <View style={[styles.container, { backgroundColor: theme.colors.background }]}>
+      <FlatList
         data={locations}
-        keyExtractor={(item) => item.name}
+        keyExtractor={(item) => item.id.toString()}
         renderItem={({ item }) => (
-          <Card style={{ margin: 10}}>
-            <Card.Cover style={{ marginBottom:10 }} source={{ uri: item.image }} />
-            <Card.Content style={{ marginBottom:10 }}>
+          <Card style={{ margin: 10 }}>
+            <Card.Cover style={{ marginBottom: 10 }} source={{ uri: item.image }} />
+            <Card.Content style={{ marginBottom: 10 }}>
               <Text variant="titleLarge">{item.name}</Text>
               <Text variant="bodyMedium">{item.description.split('.')[0]}...</Text>
             </Card.Content>
             <Card.Actions>
-            <Link href={`/location/${item.id}`} asChild>
-              <Button>Zobacz więcej</Button>
+              <Link href={`/location/${item.id}`} asChild>
+                <Button>Zobacz więcej</Button>
               </Link>
             </Card.Actions>
           </Card>
-        )}>  
-        </FlatList>
+        )}
+      />
     </View>
   );
 }
@@ -37,7 +38,4 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
   },
-  text: {
-    color: '#fff',
-  },
-});
+});