55 lines
1.8 KiB
TypeScript
55 lines
1.8 KiB
TypeScript
import React, { useEffect } from 'react';
|
|
import { View, Text, FlatList, TouchableOpacity, StyleSheet } from 'react-native';
|
|
import { useDispatch, useSelector } from 'react-redux';
|
|
import { setEvents, toggleFavorite } from '../store/eventsSlice';
|
|
import { RootState } from '../store/store';
|
|
|
|
export default function EventsScreen({ navigation }: any) {
|
|
const dispatch = useDispatch();
|
|
const { events, favorites } = useSelector((state: RootState) => state.events);
|
|
|
|
useEffect(() => {
|
|
fetch('https://jsonplaceholder.typicode.com/posts')
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
const mappedEvents = data.slice(0, 20).map((item: any) => ({
|
|
id: item.id.toString(),
|
|
name: item.title,
|
|
description: item.body,
|
|
date: new Date().toISOString(),
|
|
}));
|
|
dispatch(setEvents(mappedEvents));
|
|
});
|
|
}, []);
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<FlatList
|
|
data={events}
|
|
keyExtractor={item => item.id}
|
|
renderItem={({ item }) => (
|
|
<TouchableOpacity
|
|
style={styles.item}
|
|
onPress={() => navigation.navigate('Details', { event: item })}
|
|
>
|
|
<Text style={styles.title}>{item.name}</Text>
|
|
<TouchableOpacity
|
|
onPress={() => dispatch(toggleFavorite(item.id))}
|
|
style={styles.favBtn}
|
|
>
|
|
<Text>{favorites.includes(item.id) ? '❤️' : '🤍'}</Text>
|
|
</TouchableOpacity>
|
|
</TouchableOpacity>
|
|
)}
|
|
/>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: { flex: 1, padding: 16, backgroundColor: '#000000' },
|
|
item: { padding: 16, borderBottomWidth: 1, borderBottomColor: '#333333', flexDirection: 'row', justifyContent: 'space-between' },
|
|
title: { fontSize: 16, flex: 1, color: '#ffffff' },
|
|
favBtn: { padding: 8 },
|
|
});
|