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

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 }}