54 lines
1.3 KiB
TypeScript
54 lines
1.3 KiB
TypeScript
import React from 'react';
|
|
import { View, ScrollView, StyleSheet } from 'react-native';
|
|
import { useNavigation } from '@react-navigation/native';
|
|
import { StackNavigationProp } from '@react-navigation/stack';
|
|
import { useTasks } from '../context/TasksContext';
|
|
import TaskCard from '../components/TaskCard';
|
|
|
|
type RootStackParamList = {
|
|
TaskList: undefined;
|
|
TaskEdit: { taskId: string };
|
|
};
|
|
|
|
type TaskListNavigationProp = StackNavigationProp<
|
|
RootStackParamList,
|
|
'TaskList'
|
|
>;
|
|
|
|
export default function TaskListScreen() {
|
|
const { tasks } = useTasks();
|
|
console.log('tasks', tasks);
|
|
|
|
const navigation = useNavigation<TaskListNavigationProp>();
|
|
|
|
const handlePressTask = (id: string) => {
|
|
navigation.navigate('TaskEdit', { taskId: id });
|
|
};
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<ScrollView contentContainerStyle={styles.scrollContainer}>
|
|
<View style={styles.tasksContainer}>
|
|
{tasks.map(task => (
|
|
<TaskCard key={task.id} task={task} onPress={handlePressTask} />
|
|
))}
|
|
</View>
|
|
</ScrollView>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
},
|
|
scrollContainer: {
|
|
padding: 16,
|
|
},
|
|
tasksContainer: {
|
|
flexDirection: 'row',
|
|
flexWrap: 'wrap',
|
|
justifyContent: 'space-between',
|
|
},
|
|
});
|