From 094c66f2988446c35fc9cc49cf4f596c9a92cdda Mon Sep 17 00:00:00 2001 From: Andrii Solianyk Date: Wed, 14 May 2025 13:42:35 +0200 Subject: [PATCH] Use of api instead of json file for the creating, deletion and edition --- api/locations.jsx | 42 ++++++++++++++++++++++ app/(tabs)/add.jsx | 24 +++++++------ app/_layout.jsx | 72 ++++++++++++++++++++------------------ app/location/edit/[id].jsx | 69 +++++++++++++++++++++++------------- data/locations.js | 44 ----------------------- store.jsx | 22 ------------ 6 files changed, 139 insertions(+), 134 deletions(-) delete mode 100644 data/locations.js delete mode 100644 store.jsx diff --git a/api/locations.jsx b/api/locations.jsx index 4502ccc..4600749 100644 --- 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; + } +} \ No newline at end of file diff --git a/app/(tabs)/add.jsx b/app/(tabs)/add.jsx index 32140c9..2503b22 100644 --- 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, }); - 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); diff --git a/app/_layout.jsx b/app/_layout.jsx index d9f3d42..60c8b2e 100644 --- a/app/_layout.jsx +++ b/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 ( - - - ({ - title: "Lokalizacja", + + + ({ + title: "Lokalizacja", headerBackTitle: "Powrót", headerRight: () => ( - - - - ), - })} + + + + ), + })} /> - ({ title: "Edycja", + ({ + title: "Edycja", headerRight: () => ( - handleDelete(route.params.id)}/> - ), })} - + handleDelete(route.params.id)} /> + ), + })} + /> - + ); } diff --git a/app/location/edit/[id].jsx b/app/location/edit/[id].jsx index 35a9c90..af13b55 100644 --- 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) { - 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 ( + + + + ); + } + return ( ({ - 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; \ No newline at end of file