diff --git a/app/(tabs)/_layout.tsx b/app/(tabs)/_layout.tsx index 6905066..991e5a0 100644 --- a/app/(tabs)/_layout.tsx +++ b/app/(tabs)/_layout.tsx @@ -21,10 +21,11 @@ export default function TabLayout() { headerTintColor: theme.colors.primary, tabBarItemStyle: { flex: 1 }, }}> + ( ), }} /> - ( + ( ),}} /> diff --git a/app/(tabs)/addLocation.jsx b/app/(tabs)/add.jsx similarity index 77% rename from app/(tabs)/addLocation.jsx rename to app/(tabs)/add.jsx index 0f19630..48893bd 100644 --- a/app/(tabs)/addLocation.jsx +++ b/app/(tabs)/add.jsx @@ -1,6 +1,6 @@ import { useState } from 'react'; -import { View, StyleSheet } from 'react-native'; -import { TextInput, Button } from 'react-native-paper'; +import { StyleSheet, Platform, KeyboardAvoidingView, ScrollView } from 'react-native'; +import { TextInput, Button, Snackbar } from 'react-native-paper'; import { locations } from '@/data/locations'; @@ -12,6 +12,8 @@ export default function FormScreen() { area: '', population: '', }); + const [message, setMessage] = useState(''); + const [visible, setVisible] = useState(false); const [location, setLocation] = useState(locations.sort((a, b) => b.id - a.id)); @@ -38,13 +40,27 @@ export default function FormScreen() { area: '', population: '', }); + setMessage('Lokalizacja została dodana!'); + setVisible(true); + }else{ + setMessage('Wypełnij wszystkie pola!'); + setVisible(true); } } - - return ( - + + + setVisible(false)} + duration={3000} + > + {message} + Dodaj - + + ); } @@ -102,7 +120,7 @@ const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#25292e', - justifyContent: 'center', + justifyContent: 'flex-start', alignItems: 'center', }, text: { diff --git a/app/(tabs)/index.tsx b/app/(tabs)/index.tsx index 0c3886a..76034b3 100644 --- a/app/(tabs)/index.tsx +++ b/app/(tabs)/index.tsx @@ -5,7 +5,7 @@ import { locations } from '@/data/locations'; export default function Index() { const theme = useTheme(); - console.log(locations); +locations.sort((a, b) => b.id - a.id); return ( ({ title: "Lokalizacja", headerBackTitle: "Powrót", - }}/> + headerRight: () => ( + + + + ), + })} + /> + ); diff --git a/app/location/edit/[id].js b/app/location/edit/[id].js new file mode 100644 index 0000000..b31a702 --- /dev/null +++ b/app/location/edit/[id].js @@ -0,0 +1,139 @@ +import { useState, useEffect } from 'react'; +import { StyleSheet, Platform, ScrollView, KeyboardAvoidingView } from 'react-native'; +import { TextInput, Button, Snackbar } from 'react-native-paper'; +import { locations } from '@/data/locations'; +import { useLocalSearchParams, useRouter } from 'expo-router'; + +export default function edit() { + const { id } = useLocalSearchParams(); + const router = useRouter(); + const locationData = locations.find(loc => loc.id == id); + const [formData, setFormData] = useState({ + name: '', + description: '', + image: '', + area: '', + population: '', + }); + + const [message, setMessage] = useState(''); + const [visible, setVisible] = useState(false); + + useEffect(() => { + if (locationData) { + console.log(locationData); + setFormData({ + name: locationData.name, + description: locationData.description, + image: locationData.image, + area: locationData.area.toString(), + population: locationData.population.toString(), + }); + } + }, [locationData]); + + + const editLocation = () => { + if ( + formData.name && + formData.description && + formData.image && + formData.area && + formData.population + ) { + const index = locations.findIndex((loc) => loc.id == id); + if (index !== -1) { + locations[index] = { ...locations[index], ...formData }; + setMessage('Lokalizacja została zaktualizowana!'); + setVisible(true); + }else{ + setMessage('Błąd spróbuj ponownie póżniej!'); + setVisible(true); + } + } else{ + setMessage('Wypełnij wszystkie pola!'); + setVisible(true); + } + }; + + + + return ( + + + setVisible(false)} + duration={3000} + > + {message} + + setFormData({ ...formData, name: e })} + + /> + setFormData({ ...formData, description: e })} + /> + setFormData({ ...formData, image: e })} + /> + setFormData({ ...formData, area: e })} + /> + setFormData({ ...formData, population: e })} + /> + + + + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: '#25292e', + justifyContent: 'flex-start', + alignItems: 'center', + }, + text: { + color: '#fff', + }, +});