124 lines
2.8 KiB
JavaScript
124 lines
2.8 KiB
JavaScript
import { StatusBar } from "expo-status-bar";
|
|
import {
|
|
KeyboardAvoidingView,
|
|
Platform,
|
|
StyleSheet,
|
|
Text,
|
|
TextInput,
|
|
View,
|
|
TouchableOpacity,
|
|
Keyboard,
|
|
ScrollView,
|
|
} from "react-native";
|
|
import React, { useState } from "react";
|
|
import Task from "./components/Task";
|
|
|
|
export default function App() {
|
|
const [task, setTask] = useState();
|
|
const [taskItems, setTaskItems] = useState([]);
|
|
|
|
const handleAddTask = () => {
|
|
Keyboard.dismiss();
|
|
setTaskItems([...taskItems, task]);
|
|
setTask(null);
|
|
};
|
|
|
|
const completeTask = (index) => {
|
|
let itemsCopy = [...taskItems];
|
|
itemsCopy.splice(index, 1);
|
|
setTaskItems(itemsCopy);
|
|
};
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<ScrollView
|
|
contentContainerStyle={{
|
|
flexGrow: 1,
|
|
}}
|
|
keyboardShouldPersistTaps="handled"
|
|
>
|
|
{/* Today's Tasks */}
|
|
<View style={styles.tasksWrapper}>
|
|
<Text style={styles.sectionTitle}>Today's tasks</Text>
|
|
<View style={styles.items}>
|
|
{/* This is where the tasks will go! */}
|
|
{taskItems.map((item, index) => {
|
|
return (
|
|
<TouchableOpacity
|
|
key={index}
|
|
onPress={() => completeTask(index)}
|
|
>
|
|
<Task text={item} />
|
|
</TouchableOpacity>
|
|
);
|
|
})}
|
|
</View>
|
|
</View>
|
|
</ScrollView>
|
|
|
|
{/* Write a task */}
|
|
<KeyboardAvoidingView
|
|
behavior={Platform.OS == "ios" ? "padding" : "height"}
|
|
style={styles.writeTaskWrapper}
|
|
>
|
|
<TextInput
|
|
style={styles.input}
|
|
placeholder={"Write a task"}
|
|
value={task}
|
|
onChangeText={(text) => setTask(text)}
|
|
/>
|
|
<TouchableOpacity onPress={() => handleAddTask()}>
|
|
<View style={styles.addWrapper}>
|
|
<Text style={styles.addText}>+</Text>
|
|
</View>
|
|
</TouchableOpacity>
|
|
</KeyboardAvoidingView>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: "#E8EAED",
|
|
},
|
|
tasksWrapper: {
|
|
paddingTop: 80,
|
|
paddingHorizontal: 20,
|
|
},
|
|
sectionTitle: {
|
|
fontSize: 24,
|
|
fontWeight: "bold",
|
|
},
|
|
items: {
|
|
marginTop: 30,
|
|
},
|
|
writeTaskWrapper: {
|
|
position: "absolute",
|
|
bottom: 60,
|
|
width: "100%",
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "space-around",
|
|
},
|
|
input: {
|
|
paddingVertical: 15,
|
|
paddingHorizontal: 15,
|
|
backgroundColor: "#FFF",
|
|
borderRadius: 60,
|
|
borderColor: "#C0C0C0",
|
|
borderWidth: 1,
|
|
width: 250,
|
|
},
|
|
addWrapper: {
|
|
width: 60,
|
|
height: 60,
|
|
backgroundColor: "#FFF",
|
|
borderRadius: 60,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
borderColor: "#C0C0C0",
|
|
borderWidth: 1,
|
|
},
|
|
});
|