Patryk_Kania/CityExplorer
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init State Mangement and add del function

Browse Source
This commit is contained in:
Patryk
2025-04-22 18:35:39 +02:00
parent 5e44b30a49
commit 8f5b151d87
8 changed files with 252 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
app/(tabs)/add.jsx
View File

@@ -1,10 +1,11 @@
import { useState } from 'react'; import { useState } from 'react';
import { StyleSheet, Platform, KeyboardAvoidingView, ScrollView } from 'react-native'; import { StyleSheet, Platform, KeyboardAvoidingView, ScrollView } from 'react-native';
import { TextInput, Button, Snackbar } from 'react-native-paper'; import { TextInput, Button, Snackbar } from 'react-native-paper';
import { locations } from '@/data/locations'; import useLocationStore from '@/store';
export default function FormScreen() { export default function FormScreen() {
const addLocation = useLocationStore((state) => state.addLocation);
const [formData, setFormData] = useState({ const [formData, setFormData] = useState({
name: '', name: '',
description: '', description: '',
@@ -15,13 +16,16 @@ export default function FormScreen() {
const [message, setMessage] = useState(''); const [message, setMessage] = useState('');
const [visible, setVisible] = useState(false); const [visible, setVisible] = useState(false);
const [location, setLocation] = useState(locations.sort((a, b) => b.id - a.id)); const handleAddLocation = () => {
if (
const addLocation = () => { formData.name &&
console.log(formData); formData.description &&
if(formData.name && formData.description && formData.image && formData.area && formData.population) { formData.image &&
formData.area &&
formData.population
) {
const newLocation = { const newLocation = {
id: locations.length > 0 ? locations[0].id + 1 : 0, id: Date.now(), // Generowanie unikalnego ID
name: formData.name, name: formData.name,
description: formData.description, description: formData.description,
image: formData.image, image: formData.image,
@@ -29,9 +33,7 @@ export default function FormScreen() {
population: formData.population, population: formData.population,
}; };
setLocation([newLocation, ...location]); addLocation(newLocation);
locations.push(newLocation);
setFormData({ setFormData({
name: '', name: '',
@@ -42,75 +44,75 @@ export default function FormScreen() {
}); });
setMessage('Lokalizacja została dodana!'); setMessage('Lokalizacja została dodana!');
setVisible(true); setVisible(true);
}else{ } else {
setMessage('Wypełnij wszystkie pola!'); setMessage('Wypełnij wszystkie pola!');
setVisible(true); setVisible(true);
} }
} };
return ( return (
<KeyboardAvoidingView <KeyboardAvoidingView
style={{ flex: 1 }} style={{ flex: 1 }}
behavior={Platform.OS === 'ios' ? 'padding' : 'height'} behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
> >
<ScrollView contentContainerStyle={styles.container}> <ScrollView contentContainerStyle={styles.container}>
<Snackbar <Snackbar
visible={visible} visible={visible}
onDismiss={() => setVisible(false)} onDismiss={() => setVisible(false)}
duration={3000} duration={3000}
> >
{message} {message}
</Snackbar> </Snackbar>
<TextInput <TextInput
mode="outlined" mode="outlined"
label="Nazwa" label="Nazwa"
placeholder="Wpisz nazwa" placeholder="Wpisz nazwę"
style={{ margin: 10, width: '100%' }} style={{ margin: 10, width: '100%' }}
value={formData.name} value={formData.name}
onChangeText={e => setFormData({ ...formData, name: e })} onChangeText={(e) => setFormData({ ...formData, name: e })}
/>
/> <TextInput
<TextInput
mode="outlined" mode="outlined"
label="Opis" label="Opis"
placeholder="Wpisz opis" placeholder="Wpisz opis"
style={{ margin: 10, width: '100%' }} style={{ margin: 10, width: '100%' }}
multiline={true} multiline={true}
value={formData.description} value={formData.description}
onChangeText={e => setFormData({ ...formData, description: e })} onChangeText={(e) => setFormData({ ...formData, description: e })}
/> />
<TextInput <TextInput
mode="outlined" mode="outlined"
label="Link do zdjęcia" label="Link do zdjęcia"
multiline={true}
placeholder="Wpisz link do zdjęcia" placeholder="Wpisz link do zdjęcia"
style={{ margin: 10, width: '100%', borderRadius:10}} style={{ margin: 10, width: '100%' }}
value={formData.image} value={formData.image}
onChangeText={e => setFormData({ ...formData, image: e })} onChangeText={(e) => setFormData({ ...formData, image: e })}
/> />
<TextInput <TextInput
mode="outlined" mode="outlined"
label="Powierzchnia" label="Powierzchnia"
placeholder="Wpisz powierzchnie" placeholder="Wpisz powierzchnię"
style={{ margin: 10, width: '100%' }} style={{ margin: 10, width: '100%' }}
value={formData.area} value={formData.area}
onChangeText={e => setFormData({ ...formData, area: e })} onChangeText={(e) => setFormData({ ...formData, area: e })}
/> />
<TextInput <TextInput
mode="outlined" mode="outlined"
label="Ludność" label="Ludność"
placeholder='Wpisz liczbę ludności' placeholder="Wpisz liczbę ludności"
style={{ margin: 10, width: '100%' }} style={{ margin: 10, width: '100%' }}
value={formData.population} value={formData.population}
onChangeText={e => setFormData({ ...formData, population: e })} keyboardType="numeric"
onChangeText={(e) => setFormData({ ...formData, population: e })}
/> />
<Button
<Button
style={{ margin: 10, width: '100%' }} style={{ margin: 10, width: '100%' }}
icon="plus-circle-outline" icon="plus-circle-outline"
mode={'contained'} mode={'contained'}
onPress={addLocation} onPress={handleAddLocation}
>Dodaj</Button> >
Dodaj
</Button>
</ScrollView> </ScrollView>
</KeyboardAvoidingView> </KeyboardAvoidingView>
); );
@@ -123,7 +125,4 @@ const styles = StyleSheet.create({
justifyContent: 'flex-start', justifyContent: 'flex-start',
alignItems: 'center', alignItems: 'center',
}, },
text: { });
color: '#fff',
},
});

34
app/(tabs)/index.tsx
View File

@@ -1,31 +1,32 @@
import { View, StyleSheet, FlatList } from 'react-native'; import { View, StyleSheet, FlatList } from 'react-native';
import { useTheme, Card, Text, Button} from 'react-native-paper'; import { useTheme, Card, Text, Button } from 'react-native-paper';
import { Link } from 'expo-router'; import { Link } from 'expo-router';
import { locations } from '@/data/locations'; import useLocationStore from '@/store';
export default function Index() { export default function Index() {
const theme = useTheme(); const theme = useTheme();
locations.sort((a, b) => b.id - a.id); const locations = useLocationStore((state) => state.locations);
return ( return (
<View style={[styles.container, {backgroundColor: theme.colors.background}]}> <View style={[styles.container, { backgroundColor: theme.colors.background }]}>
<FlatList <FlatList
data={locations} data={locations}
keyExtractor={(item) => item.name} keyExtractor={(item) => item.id.toString()}
renderItem={({ item }) => ( renderItem={({ item }) => (
<Card style={{ margin: 10}}> <Card style={{ margin: 10 }}>
<Card.Cover style={{ marginBottom:10 }} source={{ uri: item.image }} /> <Card.Cover style={{ marginBottom: 10 }} source={{ uri: item.image }} />
<Card.Content style={{ marginBottom:10 }}> <Card.Content style={{ marginBottom: 10 }}>
<Text variant="titleLarge">{item.name}</Text> <Text variant="titleLarge">{item.name}</Text>
<Text variant="bodyMedium">{item.description.split('.')[0]}...</Text> <Text variant="bodyMedium">{item.description.split('.')[0]}...</Text>
</Card.Content> </Card.Content>
<Card.Actions> <Card.Actions>
<Link href={`/location/${item.id}`} asChild> <Link href={`/location/${item.id}`} asChild>
<Button>Zobacz więcej</Button> <Button>Zobacz więcej</Button>
</Link> </Link>
</Card.Actions> </Card.Actions>
</Card> </Card>
)}> )}
</FlatList> />
</View> </View>
); );
} }
@@ -37,7 +38,4 @@ const styles = StyleSheet.create({
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
}, },
text: { });
color: '#fff',
},
});

19
app/_layout.jsx
View File

@@ -1,13 +1,21 @@
import { Link, Stack } from 'expo-router'; 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 { MD3LightTheme, MD3DarkTheme } from 'react-native-paper';
import Ionicons from '@expo/vector-icons/Ionicons'; import Ionicons from '@expo/vector-icons/Ionicons';
import useLocationStore from '@/store';
export default function RootLayout() { export default function RootLayout() {
const colorScheme = useColorScheme(); const colorScheme = useColorScheme();
const theme = colorScheme === 'dark' ? MD3DarkTheme : const theme = colorScheme === 'dark' ? MD3DarkTheme :
MD3LightTheme; MD3LightTheme;
const deleteLocation = useLocationStore((state) => state.deleteLocation);
const router = useRouter();
const handleDelete = (id) => {
deleteLocation(id);
router.replace('/');
};
return ( return (
<PaperProvider theme={theme} > <PaperProvider theme={theme} >
@@ -35,7 +43,12 @@ export default function RootLayout() {
), ),
})} })}
/> />
<Stack.Screen name="location/edit/[id]" options={{ 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)}/>
), })}
/>
</Stack> </Stack>
</PaperProvider> </PaperProvider>
); );

59
app/location/[id].js
View File

@@ -1,50 +1,51 @@
import { View, ScrollView, StyleSheet } from 'react-native'; import { View, ScrollView, StyleSheet } from 'react-native';
import { Text, Card } from 'react-native-paper'; import { Text, Card } from 'react-native-paper';
import { useLocalSearchParams } from 'expo-router'; import { useLocalSearchParams } from 'expo-router';
import { locations } from '@/data/locations'; import useLocationStore from '@/store';
export default function Location() { export default function Location() {
const { id } = useLocalSearchParams(); const { id } = useLocalSearchParams();
const location = locations.find(loc => loc.id == id); const location = useLocationStore((state) =>
state.locations.find((loc) => loc.id == id)
);
if (!location) { if (!location) {
return ( return (
<View style={styles.container}> <View style={styles.container}>
<Text style={styles.text}>Brak lokalizaji - {id}</Text> <Text style={styles.text}>Brak lokalizacji - {id}</Text>
</View> </View>
); );
} }
return ( return (
<View style={styles.container}> <View style={styles.container}>
<ScrollView> <ScrollView>
<Card style={{ margin: 10}}> <Card style={{ margin: 10 }}>
<Card.Cover style={{marginBottom: 10}} source={{ uri: location.image }} /> <Card.Cover style={{ marginBottom: 10 }} source={{ uri: location.image }} />
<Card.Content style={{marginBottom: 10}}> <Card.Content style={{ marginBottom: 10 }}>
<Text variant="headlineLarge" style={{marginBottom: 10}}> <Text variant="headlineLarge" style={{ marginBottom: 10 }}>
{location.name} {location.name}
</Text> </Text>
<Text variant="headlineLarge" style={{marginBottom: 10}}> <Text variant="headlineLarge" style={{ marginBottom: 10 }}>
Opis: Opis:
</Text> </Text>
<Text variant="bodyMedium"> <Text variant="bodyMedium">{location.description}</Text>
{location.description} </Card.Content>
</Text>
</Card.Content>
<Card.Content> <Card.Content>
<Text variant="headlineLarge" style={{marginBottom: 10}}> <Text variant="headlineLarge" style={{ marginBottom: 10 }}>
Statystyki: Statystyki:
</Text>
<Text variant="bodyMedium" style={{marginBottom: 10}}>
Powierzchnia: {location.area} km²
</Text> </Text>
<Text variant="bodyMedium" style={{marginBottom: 10}}> <Text variant="bodyMedium" style={{ marginBottom: 10 }}>
Ludność: {location.population} osób Powierzchnia: {location.area} km²
</Text> </Text>
</Card.Content> <Text variant="bodyMedium" style={{ marginBottom: 10 }}>
</Card> Ludność: {location.population} osób
</ScrollView></View> </Text>
</Card.Content>
</Card>
</ScrollView>
</View>
); );
} }
@@ -58,4 +59,4 @@ const styles = StyleSheet.create({
text: { text: {
color: '#fff', color: '#fff',
}, },
}); });

170
app/location/edit/[id].js
View File

@@ -1,126 +1,131 @@
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import { StyleSheet, Platform, ScrollView, KeyboardAvoidingView } from 'react-native'; import { StyleSheet, Platform, ScrollView, KeyboardAvoidingView } from 'react-native';
import { TextInput, Button, Snackbar } from 'react-native-paper'; import { TextInput, Button, Snackbar } from 'react-native-paper';
import { locations } from '@/data/locations';
import { useLocalSearchParams, useRouter } from 'expo-router'; import { useLocalSearchParams, useRouter } from 'expo-router';
import useLocationStore from '@/store';
export default function edit() { export default function EditLocation() {
const { id } = useLocalSearchParams(); const { id } = useLocalSearchParams();
const router = useRouter(); const router = useRouter();
const locationData = locations.find(loc => loc.id == id); const location = useLocationStore((state) =>
const [formData, setFormData] = useState({ state.locations.find((loc) => loc.id == id)
name: '', );
description: '', const updateLocation = useLocationStore((state) => state.updateLocation);
image: '',
area: '',
population: '',
});
const [message, setMessage] = useState(''); const [formData, setFormData] = useState({
const [visible, setVisible] = useState(false); name: '',
description: '',
image: '',
area: '',
population: '',
});
useEffect(() => { const [message, setMessage] = useState('');
if (locationData) { const [visible, setVisible] = useState(false);
console.log(locationData);
setFormData({
name: locationData.name,
description: locationData.description,
image: locationData.image,
area: locationData.area.toString(),
population: locationData.population.toString(),
});
}
}, [locationData]);
useEffect(() => {
if (location) {
setFormData({
name: location.name,
description: location.description,
image: location.image,
area: location.area.toString(),
population: location.population.toString(),
});
}
}, [location]);
const editLocation = () => { const handleEditLocation = () => {
if ( if (
formData.name && formData.name &&
formData.description && formData.description &&
formData.image && formData.image &&
formData.area && formData.area &&
formData.population formData.population
) { ) {
const index = locations.findIndex((loc) => loc.id == id); updateLocation(id, {
if (index !== -1) { name: formData.name,
locations[index] = { ...locations[index], ...formData }; description: formData.description,
setMessage('Lokalizacja została zaktualizowana!'); image: formData.image,
setVisible(true); area: parseFloat(formData.area),
}else{ population: parseInt(formData.population, 10),
setMessage('Błąd spróbuj ponownie póżniej!'); });
setVisible(true);
}
} else{
setMessage('Wypełnij wszystkie pola!');
setVisible(true);
}
};
setMessage('Lokalizacja została zaktualizowana!');
setVisible(true);
// setTimeout(() => {
// router.replace(`/location/${id}`);
// }, 2000);
} else {
setMessage('Wypełnij wszystkie pola!');
setVisible(true);
}
};
return ( return (
<KeyboardAvoidingView <KeyboardAvoidingView
style={{ flex: 1 }} style={{ flex: 1 }}
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}> behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
<ScrollView contentContainerStyle={styles.container}> >
<Snackbar <ScrollView contentContainerStyle={styles.container}>
visible={visible} <Snackbar
onDismiss={() => setVisible(false)} visible={visible}
duration={3000} onDismiss={() => setVisible(false)}
> duration={3000}
{message} >
</Snackbar> {message}
</Snackbar>
<TextInput <TextInput
mode="outlined" mode="outlined"
label="Nazwa" label="Nazwa"
placeholder="Wpisz nazwa" placeholder="Wpisz nazwę"
style={{ margin: 10, width: '100%' }} style={{ margin: 10, width: '100%' }}
value={formData.name} value={formData.name}
onChangeText={e => setFormData({ ...formData, name: e })} onChangeText={(e) => setFormData({ ...formData, name: e })}
/>
/> <TextInput
<TextInput
mode="outlined" mode="outlined"
label="Opis" label="Opis"
placeholder="Wpisz opis" placeholder="Wpisz opis"
style={{ margin: 10, width: '100%' }} style={{ margin: 10, width: '100%' }}
multiline={true} multiline={true}
value={formData.description} value={formData.description}
onChangeText={e => setFormData({ ...formData, description: e })} onChangeText={(e) => setFormData({ ...formData, description: e })}
/> />
<TextInput <TextInput
mode="outlined" mode="outlined"
label="Link do zdjęcia" label="Link do zdjęcia"
multiline={true}
placeholder="Wpisz link do zdjęcia" placeholder="Wpisz link do zdjęcia"
style={{ margin: 10, width: '100%', borderRadius:10}} style={{ margin: 10, width: '100%' }}
value={formData.image} value={formData.image}
onChangeText={e => setFormData({ ...formData, image: e })} onChangeText={(e) => setFormData({ ...formData, image: e })}
/> />
<TextInput <TextInput
mode="outlined" mode="outlined"
label="Powierzchnia" label="Powierzchnia"
placeholder="Wpisz powierzchnie" placeholder="Wpisz powierzchnię"
style={{ margin: 10, width: '100%' }} style={{ margin: 10, width: '100%' }}
value={formData.area} value={formData.area}
onChangeText={e => setFormData({ ...formData, area: e })} onChangeText={(e) => setFormData({ ...formData, area: e })}
/> />
<TextInput <TextInput
mode="outlined" mode="outlined"
label="Ludność" label="Ludność"
placeholder='Wpisz liczbę ludności' placeholder="Wpisz liczbę ludności"
style={{ margin: 10, width: '100%' }} style={{ margin: 10, width: '100%' }}
value={formData.population} value={formData.population}
keyboardType='numeric' keyboardType="numeric"
onChangeText={e => setFormData({ ...formData, population: e })} onChangeText={(e) => setFormData({ ...formData, population: e })}
/> />
<Button
<Button
style={{ margin: 10, width: '100%' }} style={{ margin: 10, width: '100%' }}
icon="plus-circle-outline" icon="plus-circle-outline"
mode={'contained'} mode={'contained'}
onPress={editLocation} onPress={handleEditLocation}
>Edytuj</Button> >
Edytuj
</Button>
</ScrollView> </ScrollView>
</KeyboardAvoidingView> </KeyboardAvoidingView>
); );
@@ -133,7 +138,4 @@ const styles = StyleSheet.create({
justifyContent: 'flex-start', justifyContent: 'flex-start',
alignItems: 'center', alignItems: 'center',
}, },
text: { });
color: '#fff',
},
});

32
package-lock.json generated
View File

@@ -20,7 +20,8 @@
"react-native-paper": "^5.13.1", "react-native-paper": "^5.13.1",
"react-native-safe-area-context": "4.12.0", "react-native-safe-area-context": "4.12.0",
"react-native-screens": "~4.4.0", "react-native-screens": "~4.4.0",
"react-native-web": "~0.19.13" "react-native-web": "~0.19.13",
"zustand": "^5.0.3"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.20.0", "@babel/core": "^7.20.0",
@@ -11773,6 +11774,35 @@
"funding": { "funding": {
"url": "https://github.com/sponsors/sindresorhus" "url": "https://github.com/sponsors/sindresorhus"
} }
},
"node_modules/zustand": {
"version": "5.0.3",
"resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.3.tgz",
"integrity": "sha512-14fwWQtU3pH4dE0dOpdMiWjddcH+QzKIgk1cl8epwSE7yag43k/AD/m4L6+K7DytAOr9gGBe3/EXj9g7cdostg==",
"license": "MIT",
"engines": {
"node": ">=12.20.0"
},
"peerDependencies": {
"@types/react": ">=18.0.0",
"immer": ">=9.0.6",
"react": ">=18.0.0",
"use-sync-external-store": ">=1.2.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"immer": {
"optional": true
},
"react": {
"optional": true
},
"use-sync-external-store": {
"optional": true
}
}
} }
} }
} }

3
package.json
View File

@@ -21,7 +21,8 @@
"react-native-paper": "^5.13.1", "react-native-paper": "^5.13.1",
"react-native-safe-area-context": "4.12.0", "react-native-safe-area-context": "4.12.0",
"react-native-screens": "~4.4.0", "react-native-screens": "~4.4.0",
"react-native-web": "~0.19.13" "react-native-web": "~0.19.13",
"zustand": "^5.0.3"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.20.0", "@babel/core": "^7.20.0",

23
store.js Normal file
View File

@@ -0,0 +1,23 @@
import { create } from 'zustand';
import { locations as initialLocations } from '@/data/locations';
console.log('Initial locations:', initialLocations);
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;