46 lines
1.2 KiB
TypeScript
46 lines
1.2 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { View, FlatList, StyleSheet } from 'react-native';
|
|
import { useNavigation } from '@react-navigation/native';
|
|
import { StackNavigationProp } from '@react-navigation/stack';
|
|
import TaskCard from '../components/TaskCard';
|
|
import { Task } from '../types/task';
|
|
import { MOCK_TASKS } from '../data/mockData';
|
|
|
|
type RootStackParamList = {
|
|
TaskList: undefined;
|
|
TaskEdit: { taskId: string };
|
|
};
|
|
|
|
type TaskListNavigationProp = StackNavigationProp<RootStackParamList, 'TaskList'>;
|
|
|
|
export default function TaskListScreen() {
|
|
const [tasks] = useState<Task[]>(MOCK_TASKS);
|
|
const navigation = useNavigation<TaskListNavigationProp>();
|
|
|
|
const handlePressTask = (taskId: string) => {
|
|
navigation.navigate('TaskEdit', { taskId });
|
|
};
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<FlatList
|
|
data={tasks}
|
|
renderItem={({ item }) => <TaskCard task={item} onPress={handlePressTask} />}
|
|
keyExtractor={item => item.id}
|
|
numColumns={2}
|
|
columnWrapperStyle={styles.row}
|
|
/>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: '#f5f5f5',
|
|
},
|
|
row: {
|
|
justifyContent: 'center',
|
|
},
|
|
});
|