Use of api instead of json file for the creating, deletion and edition

app/(tabs)/add.jsx

@@ -6,16 +6,15 @@ import {
   ScrollView,
 } from "react-native";
 import { TextInput, Button, Snackbar } from "react-native-paper";
-import useLocationStore from "@/store";
+import { addLocation } from "@/api/locations";
 
 export default function FormScreen() {
-  const addLocation = useLocationStore((state) => state.addLocation);
   const [formData, setFormData] = useState({
     name: "",
     description: "",
     image: "",
-    area: "",
-    population: "",
+    area: 0,
+    population: 0,
   });
   const [message, setMessage] = useState("");
   const [visible, setVisible] = useState(false);
@@ -33,8 +32,8 @@ export default function FormScreen() {
         name: formData.name,
         description: formData.description,
         image: formData.image,
-        area: formData.area,
-        population: formData.population,
+        area: parseFloat(formData.area),
+        population: parseInt(formData.population),
       };
 
       addLocation(newLocation);
@@ -43,11 +42,16 @@ export default function FormScreen() {
         name: "",
         description: "",
         image: "",
-        area: "",
-        population: "",
+        area: 0,
+        population: 0,
       });
-      setMessage("Lokalizacja została dodana!");
-      setVisible(true);
+      if(addLocation != null) {
+        setMessage("Lokalizacja została dodana!");
+        setVisible(true);
+      } else {
+        setMessage("Wystąpił błąd podczas dodawania lokalizacji!");
+        setVisible(true);
+      }
     } else {
       setMessage("Wypełnij wszystkie pola!");
       setVisible(true);

app/_layout.jsx

@@ -1,55 +1,59 @@
 import { Link, Stack, useRouter } from 'expo-router';
-import { useColorScheme} from 'react-native';
-import { PaperProvider} from 'react-native-paper';
+import { useColorScheme } from 'react-native';
+import { PaperProvider } from 'react-native-paper';
 import { MD3LightTheme, MD3DarkTheme } from 'react-native-paper';
 import Ionicons from '@expo/vector-icons/Ionicons';
-import useLocationStore from '@/store';
+import { deleteLocation } from '@/api/locations';
 
 export default function RootLayout() {
   const colorScheme = useColorScheme();
   const theme = colorScheme === 'dark' ? MD3DarkTheme :
-  MD3LightTheme;
-  const deleteLocation = useLocationStore((state) => state.deleteLocation);
+    MD3LightTheme;
   const router = useRouter();
-  
+
   const handleDelete = (id) => {
-            deleteLocation(id);
-            router.replace('/');
+    deleteLocation(id);
+    while (router.canGoBack()) {
+      router.back();
+    }
+    router.replace('/');
   };
 
   return (
     <PaperProvider theme={theme} >
-        <Stack screenOptions={{
-                headerStyle: {
-                  backgroundColor: theme.colors.primaryContainer,
-                  borderBottomWidth:0
-                },
-                headerTintColor: theme.colors.primary,
-        }}>
-          <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
-          <Stack.Screen 
-            name="location/[id]" 
-            options={({ route }) => ({
-            title: "Lokalizacja", 
+      <Stack screenOptions={{
+        headerStyle: {
+          backgroundColor: theme.colors.primaryContainer,
+          borderBottomWidth: 0
+        },
+        headerTintColor: theme.colors.primary,
+      }}>
+        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+        <Stack.Screen
+          name="location/[id]"
+          options={({ route }) => ({
+            title: "Lokalizacja",
             headerBackTitle: "Powrót",
             headerRight: () => (
-            <Link 
-            href={`location/edit/${route.params.id}`}
-            asChild 
-            style={{ marginRight: 11 }}
-            >
-          <Ionicons name="pencil" color={theme.colors.primary} size={24} />
-          </Link>
-        ),
-        })}
+              <Link
+                href={`location/edit/${route.params.id}`}
+                asChild
+                style={{ marginRight: 11 }}
+              >
+                <Ionicons name="pencil" color={theme.colors.primary} size={24} />
+              </Link>
+            ),
+          })}
         />
-        <Stack.Screen name="location/edit/[id]" options={({ route }) =>({ title: "Edycja", 
+        <Stack.Screen name="location/edit/[id]" options={({ route }) => ({
+          title: "Edycja",
           headerRight: () => (
-          <Ionicons name="trash-bin" color={theme.colors.primary} size={24} onPress={() => handleDelete(route.params.id)}/>
-        ), })} 
-        
+            <Ionicons name="trash-bin" color={theme.colors.primary} size={24} onPress={() => handleDelete(route.params.id)} />
+          ),
+        })}
+
         />
-        </Stack>
+      </Stack>
     </PaperProvider>
   );
 }

app/location/edit/[id].jsx

@@ -1,17 +1,14 @@
 import { useState, useEffect } from 'react';
-import { StyleSheet, Platform, ScrollView, KeyboardAvoidingView } from 'react-native';
-import { TextInput, Button, Snackbar } from 'react-native-paper';
+import { StyleSheet, Platform, ScrollView, KeyboardAvoidingView, View, ActivityIndicator } from 'react-native';
+import { TextInput, Button, Snackbar, useTheme } from 'react-native-paper';
 import { useLocalSearchParams, useRouter } from 'expo-router';
-import useLocationStore from '@/store';
+import { getLocation, updateLocation } from '@/api/locations';
 
 export default function EditLocation() {
+  const theme = useTheme();
   const { id } = useLocalSearchParams();
   const router = useRouter();
-  const location = useLocationStore((state) =>
-    state.locations.find((loc) => loc.id == id)
-  );
-  const updateLocation = useLocationStore((state) => state.updateLocation);
-
+  const [loading, setLoading] = useState(true);
   const [formData, setFormData] = useState({
     name: '',
     description: '',
@@ -24,16 +21,27 @@ export default function EditLocation() {
   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(),
-      });
+    const fetchLocation = async () => {
+      try {
+        const data = await getLocation(id)
+
+        if (data) {
+          setFormData({
+            name: data.name,
+            description: data.description,
+            image: data.image,
+            area: data.area.toString(),
+            population: data.population.toString(),
+          });
+        }
+      } catch (error) {
+        console.error("Error fetching location:", error);
+      } finally {
+        setLoading(false);
+      }
     }
-  }, [location]);
+    fetchLocation();
+  }, [id]);
 
   const handleEditLocation = () => {
     if (
@@ -43,7 +51,7 @@ export default function EditLocation() {
       formData.area &&
       formData.population
     ) {
-      updateLocation(id, {
+      const response = updateLocation(id, {
         name: formData.name,
         description: formData.description,
         image: formData.image,
@@ -51,18 +59,31 @@ export default function EditLocation() {
         population: parseInt(formData.population, 10),
       });
 
-      setMessage('Lokalizacja została zaktualizowana!');
-      setVisible(true);
-
-      // setTimeout(() => {
-      //   router.replace(`/location/${id}`);
-      // }, 2000);
+      if (response) {
+        setMessage('Lokalizacja została zaktualizowana!');
+        setVisible(true);
+        while (router.canGoBack()) { // Pop from stack until one element is left
+          router.back();
+        }
+        router.replace("/"); // Replace the last remaining stack element
+      } else {
+        setMessage('Wystąpił błąd podczas aktualizacji lokalizacji!');
+        setVisible(true);
+      }
     } else {
       setMessage('Wypełnij wszystkie pola!');
       setVisible(true);
     }
   };
 
+  if (loading) {
+    return (
+      <View style={[styles.container, { backgroundColor: theme.colors.background }]}>
+        <ActivityIndicator size="large" color={theme.colors.primary} />
+      </View>
+    );
+  }
+
   return (
     <KeyboardAvoidingView
       style={{ flex: 1 }}