83 lines
2.3 KiB
JavaScript
83 lines
2.3 KiB
JavaScript
import { View, StyleSheet, FlatList, ActivityIndicator, RefreshControl } from 'react-native';
|
|
import { useTheme, Card, Text, Button } from 'react-native-paper';
|
|
import { Link } from 'expo-router';
|
|
import { useState, useEffect } from 'react';
|
|
import { listLocations } from '@/api/locations';
|
|
|
|
export default function Index() {
|
|
const theme = useTheme();
|
|
const [locations, setLocations] = useState([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [refreshing, setRefreshing] = useState(false);
|
|
|
|
const fetchLocations = async () => {
|
|
try {
|
|
const data = await listLocations();
|
|
setLocations(data);
|
|
} catch (error) {
|
|
console.error("Error fetching locations:", error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const onRefresh = async () => {
|
|
setRefreshing(true);
|
|
await fetchLocations();
|
|
setRefreshing(false);
|
|
};
|
|
|
|
useEffect(() => {
|
|
fetchLocations();
|
|
}, []);
|
|
|
|
if (loading) {
|
|
return (
|
|
<View style={[styles.container, { backgroundColor: theme.colors.background }]}>
|
|
<ActivityIndicator size="large" color={theme.colors.primary} />
|
|
</View>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<View style={[styles.container, { backgroundColor: theme.colors.background }]}>
|
|
<FlatList
|
|
data={locations}
|
|
keyExtractor={(item) => item.id.toString()}
|
|
renderItem={({ item }) => (
|
|
<Card style={{ margin: 10 }}>
|
|
<Card.Cover style={{ marginBottom: 10 }} source={{ uri: item.image }} />
|
|
<Card.Content style={{ marginBottom: 10 }}>
|
|
<Text variant="titleLarge">{item.name}</Text>
|
|
<Text variant="bodyMedium">
|
|
{item.description && item.description.split('.')[0]}...
|
|
</Text>
|
|
</Card.Content>
|
|
<Card.Actions>
|
|
<Link href={`/location/${item.id}`} asChild>
|
|
<Button>Zobacz więcej</Button>
|
|
</Link>
|
|
</Card.Actions>
|
|
</Card>
|
|
)}
|
|
refreshControl={
|
|
<RefreshControl
|
|
refreshing={refreshing || loading}
|
|
onRefresh={onRefresh}
|
|
colors={["#3b82f6"]}
|
|
tintColor="#3b82f6"
|
|
/>
|
|
}
|
|
/>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: '#25292e',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
},
|
|
}); |