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

api/locations.jsx

@@ -29,3 +29,45 @@ export async function getLocation(id) {
     }
 }
 
+export async function addLocation(location) {
+    try {
+        const response = await axios.post(`${API_URL}/locations/add`, location, {
+            headers: {
+                "Content-Type": "application/json",
+            }
+        });
+        if (!response) {
+            throw new Error("Failed to add location");
+        }
+        return response.data;
+    } catch (error) {
+        console.error("Error adding location:", error);
+        throw error;
+    }
+}
+
+export async function updateLocation(id, location) {
+    try {
+        const response = await axios.put(`${API_URL}/locations/${id}`, location, { headers: { "Content-Type": "application/json" } });
+        if (!response) {
+            throw new Error("Failed to add location");
+        }
+        return response.data;
+    } catch (error) {
+        console.error("Error while updating location:", error);
+        throw error;
+    }
+}
+
+export async function deleteLocation(id) {
+    try {
+        const response = await axios.delete(`${API_URL}/locations/${id}`);
+        if (!response) {
+            throw new Error("Failed to delete location");
+        }
+        return response.data;
+    } catch (error) {
+        console.error("Error while deleting location:", error);
+        throw error;
+    }
+}

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: "",
+    area: 0,
-    population: "",
+    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,
+        area: parseFloat(formData.area),
-        population: formData.population,
+        population: parseInt(formData.population),
       };
 
       addLocation(newLocation);
@@ -43,11 +42,16 @@ export default function FormScreen() {
         name: "",
         description: "",
         image: "",
-        area: "",
+        area: 0,
-        population: "",
+        population: 0,
       });
-      setMessage("Lokalizacja została dodana!");
+      if(addLocation != null) {
-      setVisible(true);
+        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 { useColorScheme } from 'react-native';
-import { PaperProvider} from 'react-native-paper';
+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;
+    MD3LightTheme;
-  const deleteLocation = useLocationStore((state) => state.deleteLocation);
   const router = useRouter();
-  
+
   const handleDelete = (id) => {
-            deleteLocation(id);
+    deleteLocation(id);
-            router.replace('/');
+    while (router.canGoBack()) {
+      router.back();
+    }
+    router.replace('/');
   };
 
   return (
     <PaperProvider theme={theme} >
-        <Stack screenOptions={{
+      <Stack screenOptions={{
-                headerStyle: {
+        headerStyle: {
-                  backgroundColor: theme.colors.primaryContainer,
+          backgroundColor: theme.colors.primaryContainer,
-                  borderBottomWidth:0
+          borderBottomWidth: 0
-                },
+        },
-                headerTintColor: theme.colors.primary,
+        headerTintColor: theme.colors.primary,
-        }}>
+      }}>
-          <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
-          <Stack.Screen 
+        <Stack.Screen
-            name="location/[id]" 
+          name="location/[id]"
-            options={({ route }) => ({
+          options={({ route }) => ({
-            title: "Lokalizacja", 
+            title: "Lokalizacja",
             headerBackTitle: "Powrót",
             headerRight: () => (
-            <Link 
+              <Link
-            href={`location/edit/${route.params.id}`}
+                href={`location/edit/${route.params.id}`}
-            asChild 
+                asChild
-            style={{ marginRight: 11 }}
+                style={{ marginRight: 11 }}
-            >
+              >
-          <Ionicons name="pencil" color={theme.colors.primary} size={24} />
+                <Ionicons name="pencil" color={theme.colors.primary} size={24} />
-          </Link>
+              </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 { StyleSheet, Platform, ScrollView, KeyboardAvoidingView, View, ActivityIndicator } from 'react-native';
-import { TextInput, Button, Snackbar } from 'react-native-paper';
+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) =>
+  const [loading, setLoading] = useState(true);
-    state.locations.find((loc) => loc.id == id)
-  );
-  const updateLocation = useLocationStore((state) => state.updateLocation);
-
   const [formData, setFormData] = useState({
     name: '',
     description: '',
@@ -24,16 +21,27 @@ export default function EditLocation() {
   const [visible, setVisible] = useState(false);
 
   useEffect(() => {
-    if (location) {
+    const fetchLocation = async () => {
-      setFormData({
+      try {
-        name: location.name,
+        const data = await getLocation(id)
-        description: location.description,
+
-        image: location.image,
+        if (data) {
-        area: location.area.toString(),
+          setFormData({
-        population: location.population.toString(),
+            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!');
+      if (response) {
-      setVisible(true);
+        setMessage('Lokalizacja została zaktualizowana!');
-
+        setVisible(true);
-      // setTimeout(() => {
+        while (router.canGoBack()) { // Pop from stack until one element is left
-      //   router.replace(`/location/${id}`);
+          router.back();
-      // }, 2000);
+        }
+        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 }}

data/locations.js

@@ -1,44 +0,0 @@
-export const locations = [
-    {
-        "id": 1,
-        "name": "Warszawa",
-        "description": "Stolica Polski, położona w centralnej części kraju. Warszawa jest największym miastem w Polsce, znanym z bogatej historii, kultury i architektury. Warto zobaczyć Zamek Królewski, Stare Miasto oraz Muzeum Powstania Warszawskiego. Miasto oferuje wiele atrakcji turystycznych, w tym parki, muzea i teatry. Warszawa jest również ważnym ośrodkiem gospodarczym i kulturalnym.",
-        "image": "https://www.niesamowitapolska.eu/images/mazowieckie/warszawa/38607734_m.jpg",
-        "area": 517.24,
-        "population": 1790658,
-    },
-    {
-        "id": 2,
-        "name": "Kielce",
-        "description": "Stolica województwa świętokrzyskiego, położona w centralnej Polsce. Kielce to miasto w centralnej Polsce, znane z pięknych krajobrazów i bogatej historii. Warto odwiedzić Kielecki Park Etnograficzny, Muzeum Zabawek oraz Katedrę Wniebowzięcia Najświętszej Maryi Panny. Kielce są również znane z licznych festiwali i wydarzeń kulturalnych. Miasto oferuje wiele atrakcji turystycznych, w tym parki, muzea i teatry.",
-        "image": "https://as2.ftcdn.net/jpg/05/42/90/67/1000_F_542906717_cf5i6HeCJsPluuH5tqq5MbsSdfpopmtT.webp",
-        "area": 109.4,
-        "population": 196000,
-    },
-    {
-        "id": 3,
-        "name": "Kraków",
-        "description": "Miasto położone w południowej Polsce, znane z bogatej historii i kultury. Kraków to jedno z najstarszych i najpiękniejszych miast w Polsce, znane z bogatej historii, kultury i architektury. Warto zobaczyć Wawel, Stare Miasto oraz Sukiennice. Kraków jest również znany z licznych festiwali, wydarzeń kulturalnych oraz tradycji kulinarnych. Miasto oferuje wiele atrakcji turystycznych, w tym parki, muzea i teatry.",
-        "image": "https://nawakacje.eu/wp-content/uploads/2020/12/krakow-atrakcje.jpg",
-        "area": 326.85,
-        "population": 779115,
-    },
-    {
-        "id": 4,
-        "name": "Wrocław",
-        "description": "Miasto w zachodniej Polsce, znane z pięknych mostów i architektury. Wrocław to miasto w zachodniej Polsce, znane z pięknych mostów, architektury i bogatej historii. Warto odwiedzić Ostrów Tumski, Rynek oraz Halę Stulecia. Wrocław jest również znany z licznych festiwali, wydarzeń kulturalnych oraz tradycji kulinarnych. Miasto oferuje wiele atrakcji turystycznych, w tym parki, muzea i teatry.",
-        "image": "https://backend.triverna.pl/blog/wp-content/uploads/2023/10/Wroclaw-z-lotu-ptaka-1.jpeg",
-        "area": 292.82,
-        "population": 640000,
-    },
-    {
-        "id": 5,
-        "name": "Poznań",
-        "description": "Miasto w zachodniej Polsce, znane z tradycji piwowarskich. Poznań to miasto w zachodniej Polsce, znane z tradycji piwowarskich, bogatej historii i kultury. Warto odwiedzić Stary Rynek, Katedrę Poznańską oraz Ostrów Tumski. Poznań jest również znany z licznych festiwali, wydarzeń kulturalnych oraz tradycji kulinarnych. Miasto oferuje wiele atrakcji turystycznych, w tym parki, muzea i teatry.",
-        "image":"https://wycieczkoteka.pl/images/2024/11/07/poznan-co-zwiedzic.jpg",
-        "area": 262.82,
-        "population": 535802,
-
-    }
-]  
-    

store.jsx

@@ -1,22 +0,0 @@
-import { create } from 'zustand';
-import { locations as initialLocations } from '@/data/locations';
-
-const useLocationStore = create((set) => ({
-  locations: initialLocations,
-  addLocation: (newLocation) =>
-    set((state) => ({
-      locations: [newLocation, ...state.locations],
-    })),
-    updateLocation: (id, updatedData) =>
-        set((state) => ({
-          locations: state.locations.map((loc) =>
-            loc.id == id ? { ...loc, ...updatedData } : loc
-          ),
-        })),
-    deleteLocation: (id) =>
-        set((state) => ({
-        locations: state.locations.filter((loc) => loc.id != id),
-    })),
-}));
-
-export default useLocationStore;