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

2025-05-14 13:42:35 +02:00
parent 395d68a31a
commit 094c66f298
6 changed files with 139 additions and 134 deletions
--- a/api/locations.jsx
+++ b/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;
+    }
+}
--- a/app/(tabs)/add.jsx
+++ b/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,
      });
+      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);
--- a/app/_layout.jsx
+++ b/app/_layout.jsx
@@ -1,19 +1,21 @@
 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);
  const router = useRouter();

  const handleDelete = (id) => {
    deleteLocation(id);
+    while (router.canGoBack()) {
+      router.back();
+    }
    router.replace('/');
  };

@@ -22,7 +24,7 @@ export default function RootLayout() {
      <Stack screenOptions={{
        headerStyle: {
          backgroundColor: theme.colors.primaryContainer,
-                  borderBottomWidth:0
+          borderBottomWidth: 0
        },
        headerTintColor: theme.colors.primary,
      }}>
@@ -43,10 +45,12 @@ export default function RootLayout() {
            ),
          })}
        />
-        <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>
--- a/app/location/edit/[id].jsx
+++ b/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) {
+    const fetchLocation = async () => {
+      try {
+        const data = await getLocation(id)
+
+        if (data) {
          setFormData({
-        name: location.name,
-        description: location.description,
-        image: location.image,
-        area: location.area.toString(),
-        population: location.population.toString(),
+            name: data.name,
+            description: data.description,
+            image: data.image,
+            area: data.area.toString(),
+            population: data.population.toString(),
          });
        }
-  }, [location]);
+      } catch (error) {
+        console.error("Error fetching location:", error);
+      } finally {
+        setLoading(false);
+      }
+    }
+    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),
      });

+      if (response) {
        setMessage('Lokalizacja została zaktualizowana!');
        setVisible(true);
-
-      // setTimeout(() => {
-      //   router.replace(`/location/${id}`);
-      // }, 2000);
+        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 }}
--- a/data/locations.js
+++ b/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,
-
-    }
-]  
-    
--- a/store.jsx
+++ b/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;