-
Notifications
You must be signed in to change notification settings - Fork 0
/
App.js
117 lines (105 loc) · 2.78 KB
/
App.js
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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
import { StyleSheet, Text, View, FlatList, Button } from "react-native";
import { useState } from "react";
import { StatusBar } from "expo-status-bar";
import GoalItem from "./components/Goal_Item";
import GoalInputComponent from "./components/Goal_Input";
export default function App() {
const [courseGoals, SetCourseGoals] = useState([]);
const [ModalIsVisible, SetModalisVisible] = useState(false);
function StartModalVisibility() {
SetModalisVisible(true);
}
function CancelModalVisibilty() {
SetModalisVisible(false);
}
function AddButtonGoalText(enteredText) {
// SetCourseGoals([... courseGoals,AddGoalText]);
SetCourseGoals((currentCourseGoals) => [
...currentCourseGoals,
{ text: enteredText, indexNumber: Math.random().toString() },
]);
CancelModalVisibilty();
}
function DeleteGoalHandler(ParameterID) {
SetCourseGoals((currentCourseGoals) => {
return currentCourseGoals.filter(
(goal) => goal.indexNumber !== ParameterID
);
});
}
return (
<>
<StatusBar style="auto" />
<View style={styles.appcontainer}>
<View style={styles.TopButtonView}>
<Button
title="Add New Goal"
color="#f13a3a"
onPress={StartModalVisibility}
></Button>
</View>
<GoalInputComponent
AddGoal={AddButtonGoalText}
visible={ModalIsVisible}
OnCancel={CancelModalVisibilty}
/>
<View style={styles.goalListContainer}>
{/* <Text style={styles.headingtext}>List of Goals</Text> */}
<FlatList
data={courseGoals}
renderItem={(EachItem) => {
return (
<GoalItem
PassedText={EachItem.item.text}
OnDelete={DeleteGoalHandler}
passedID={EachItem.item.indexNumber}
/>
);
}}
keyExtractor={(item, index) => {
return item.indexNumber;
}}
></FlatList>
</View>
</View>
</>
);
}
const styles = StyleSheet.create({
appcontainer: {
flex: 1,
backgroundColor: "#e4e4e4",
paddingTop: 50,
paddingHorizontal: 18,
},
inputAreaView: {
flex: 1,
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
marginBottom: 24,
borderBottomWidth: 2,
borderBottomColor: "black",
},
textInput: {
borderWidth: 1,
borderColor: "black",
width: "70%",
marginRight: 10,
padding: 7,
fontSize: 16,
},
goalListContainer: {
flex: 6,
},
headingtext: {
fontSize: 20,
fontWeight: "bold",
marginBottom: 10,
},
TopButtonView: {
paddingBottom: 15,
borderBottomWidth: 2,
borderBottomColor: "black",
},
});