33 lines
926 B
TypeScript
33 lines
926 B
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { View, Text, FlatList, StyleSheet } from 'react-native';
|
|
import { apiService } from '../services/api';
|
|
|
|
export default function TodosScreen({ filter }: { filter: string }) {
|
|
const [todos, setTodos] = useState([]);
|
|
|
|
useEffect(() => {
|
|
apiService.getTodos().then(setTodos);
|
|
}, []);
|
|
|
|
const filtered = todos.filter((t: any) => t.title.toLowerCase().includes(filter.toLowerCase()));
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<FlatList
|
|
data={filtered}
|
|
keyExtractor={(item: any) => item.id.toString()}
|
|
renderItem={({ item }: any) => (
|
|
<View style={styles.item}>
|
|
<Text>{item.completed ? '✅' : '⬜'} {item.title}</Text>
|
|
</View>
|
|
)}
|
|
/>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: { flex: 1, padding: 16 },
|
|
item: { padding: 16, borderBottomWidth: 1 },
|
|
});
|