File size: 3,126 Bytes
6d44341 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 | import React, {useState, useEffect} from 'react';
import {View, Text, StyleSheet, TouchableOpacity, FlatList, TextInput, Keyboard} from "react-native";
import {AntDesign, Ionicons} from "@expo/vector-icons"
import Todo from "./Todo";
import {useDB} from "../context/DBcontex";
export const TodosModal = (props) => {
const [todo, setTodo] = useState('');
const {addNewTodo, getCurrentList, currentList, setCurrentList} = useDB();
const listId = props.data.id;
useEffect(() => {
const fetchList = async () => await getCurrentList(listId)
fetchList().catch(error => console.log(error))
return () => setCurrentList(null) // run when component will be unmounted
}, [])
const submit = async () => {
if(todo !== '') {
const data = {
completed: false,
createdAt: new Date(),
title: todo,
}
await addNewTodo(listId, data)
Keyboard.dismiss()
setTodo('')
}
}
return (
<View style={styles.container}>
<TouchableOpacity style={{position: 'absolute', top: 24, right: 32}}
onPress={props.closeModal}>
<AntDesign name="close" size={24} color="black"/>
</TouchableOpacity>
<Text style={[styles.listName, {color: props.data.color}]}> List: {props.data.title} </Text>
<FlatList data={currentList}
renderItem={({item}) => <Todo item={item} color={props.data.color} listId={props.data.id}/>}
keyExtractor={(item) => item.title}
style={styles.list}
showsVerticalScrollIndicator={false}
/>
<View style={[styles.inputContainer, {borderColor: props.data.color}]}>
<TextInput placeholder="add a new todo"
placeholderTextColor={props.data.color}
style={[styles.input, {color: props.data.color}]}
value={todo}
onChangeText={text => setTodo(text)}/>
<TouchableOpacity style={{backgroundColor: props.data.color}} onPress={() => submit()}>
<Ionicons name="add-outline" size={41} color="white"/>
</TouchableOpacity>
</View>
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#364a61'
},
inputContainer: {
borderWidth: 2,
borderRadius: 10,
flexDirection: 'row',
marginHorizontal: 20,
marginBottom: 10,
overflow: 'hidden',
},
input: {
flex: 1,
paddingLeft: 10,
fontSize: 17,
// borderWidth: 2,
},
list: {
flex: 1,
// borderWidth: 2,
borderColor: 'red',
marginHorizontal: 20,
marginVertical: 30,
},
listName: {
// borderWidth: 2,
fontSize: 30,
fontWeight: 'bold',
alignSelf: 'center',
marginTop: 20
}
})
|