|
@@ -1,7 +1,9 @@
|
1
|
1
|
import axios from "axios";
|
2
|
2
|
import React, { useState } from "react";
|
3
|
|
-import { FlatList, SafeAreaView, StatusBar, StyleSheet, Text, TouchableOpacity, TextInput, View } from "react-native";
|
|
3
|
+import { FlatList, StatusBar, StyleSheet, Text, TouchableOpacity, TextInput, View, Button, ActivityIndicator } from "react-native";
|
4
|
4
|
import * as SecureStore from 'expo-secure-store';
|
|
5
|
+import Modal from 'react-native-modal';
|
|
6
|
+import {Picker} from '@react-native-community/picker';
|
5
|
7
|
|
6
|
8
|
|
7
|
9
|
const Item = ({ item, onPress, style }) => (
|
|
@@ -28,6 +30,53 @@ const AddTakenCourse = () => {
|
28
|
30
|
const [text, setText] = useState('')
|
29
|
31
|
const [selectedId, setSelectedId] = useState(null);
|
30
|
32
|
const [data, setData] = useState([])
|
|
33
|
+ const [modalVisible, setModalVisible] = useState(false)
|
|
34
|
+ const [grade, setGrade] = useState('A')
|
|
35
|
+ const [year, setYear] = useState('1')
|
|
36
|
+ const [semester, setSemester] = useState('1')
|
|
37
|
+ const [animating, setAnimating] = useState('')
|
|
38
|
+
|
|
39
|
+ const toggle = ()=>{
|
|
40
|
+ setModalVisible(!modalVisible)
|
|
41
|
+ }
|
|
42
|
+
|
|
43
|
+ const addCourse = async ()=>{
|
|
44
|
+ const token = await SecureStore.getItemAsync('token')
|
|
45
|
+ let id = await SecureStore.getItemAsync('id')
|
|
46
|
+ let user_id = parseInt(id)
|
|
47
|
+ console.log('year', year)
|
|
48
|
+ console.log('semester', semester)
|
|
49
|
+ console.log('grade', grade)
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+ let response = await axios({
|
|
53
|
+ method: 'POST',
|
|
54
|
+ url: 'http://70eb11ac4839.ngrok.io/api/add_taken_course',
|
|
55
|
+ headers: {
|
|
56
|
+ 'content-type': 'application/json',
|
|
57
|
+ Authorization: `Token ${token}`
|
|
58
|
+ },
|
|
59
|
+ data: {
|
|
60
|
+ semester: semester,
|
|
61
|
+ year: year,
|
|
62
|
+ user_id: user_id,
|
|
63
|
+ grade: grade,
|
|
64
|
+ course_id: selectedId
|
|
65
|
+ }
|
|
66
|
+ })
|
|
67
|
+
|
|
68
|
+ console.log(response.data)
|
|
69
|
+
|
|
70
|
+ setAnimating(true)
|
|
71
|
+
|
|
72
|
+ setTimeout(()=>{
|
|
73
|
+ setAnimating(false)
|
|
74
|
+ setModalVisible(false)
|
|
75
|
+ setSelectedId(null)
|
|
76
|
+ setData([])
|
|
77
|
+ }, 3000)
|
|
78
|
+ }
|
|
79
|
+
|
31
|
80
|
|
32
|
81
|
|
33
|
82
|
const searchCourses = async(text)=>{
|
|
@@ -36,7 +85,7 @@ const AddTakenCourse = () => {
|
36
|
85
|
const token = await SecureStore.getItemAsync('token')
|
37
|
86
|
const response = await axios({
|
38
|
87
|
method: 'GET',
|
39
|
|
- url: `http://ef32e7a10841.ngrok.io/api/find_course?code=${text}`,
|
|
88
|
+ url: `http://70eb11ac4839.ngrok.io/api/find_course?code=${text}`,
|
40
|
89
|
headers: {
|
41
|
90
|
'content-type': 'application/json',
|
42
|
91
|
Authorization: `Token ${token}`
|
|
@@ -56,16 +105,18 @@ const AddTakenCourse = () => {
|
56
|
105
|
return (
|
57
|
106
|
<Item
|
58
|
107
|
item={item}
|
59
|
|
- onPress={() => setSelectedId(item.id)}
|
|
108
|
+ onPress={() => {
|
|
109
|
+ setSelectedId(item.id)
|
|
110
|
+ setModalVisible(true)
|
|
111
|
+ }}
|
60
|
112
|
style={{ backgroundColor }}
|
61
|
113
|
/>
|
62
|
114
|
);
|
63
|
115
|
};
|
64
|
116
|
|
65
|
117
|
|
66
|
|
- console.log(selectedId)
|
67
|
118
|
return (
|
68
|
|
- <View style={{padding: 10}}>
|
|
119
|
+ <View style={{flex: 1, padding: 10}}>
|
69
|
120
|
<TextInput
|
70
|
121
|
style={styles.searchBar}
|
71
|
122
|
placeholder="Search for a course that you've taken"
|
|
@@ -79,6 +130,59 @@ const AddTakenCourse = () => {
|
79
|
130
|
extraData={selectedId}
|
80
|
131
|
ItemSeparatorComponent={renderSeparator}
|
81
|
132
|
/>
|
|
133
|
+ <Modal isVisible={modalVisible} style={{
|
|
134
|
+ backgroundColor: 'white',
|
|
135
|
+ flexDirection: 'row',
|
|
136
|
+ borderRadius: 20,
|
|
137
|
+ margin: 50,
|
|
138
|
+ padding: 10,
|
|
139
|
+ }}>
|
|
140
|
+ <View style={styles.modalItem}>
|
|
141
|
+ <Text>Grade</Text>
|
|
142
|
+ <Picker
|
|
143
|
+ selectedValue={grade}
|
|
144
|
+ style={{ width: 50}}
|
|
145
|
+ onValueChange={(itemValue, itemIndex) => setGrade(itemValue) }>
|
|
146
|
+ <Picker.Item label="A" value="A" />
|
|
147
|
+ <Picker.Item label="B" value="B" />
|
|
148
|
+ <Picker.Item label="C" value="C" />
|
|
149
|
+ <Picker.Item label="D" value="D" />
|
|
150
|
+ <Picker.Item label="F" value="F" />
|
|
151
|
+ </Picker>
|
|
152
|
+ </View>
|
|
153
|
+ <View style={styles.modalItem}>
|
|
154
|
+ <Text>Year</Text>
|
|
155
|
+ <Picker
|
|
156
|
+ selectedValue={year}
|
|
157
|
+ style={{ width: 50}}
|
|
158
|
+ onValueChange={(itemValue, itemIndex) => setYear(itemValue) }>
|
|
159
|
+ <Picker.Item label="1" value="1" />
|
|
160
|
+ <Picker.Item label="2" value="2" />
|
|
161
|
+ <Picker.Item label="3" value="3" />
|
|
162
|
+ <Picker.Item label="4" value="4" />
|
|
163
|
+ <Picker.Item label="5" value="5" />
|
|
164
|
+ <Picker.Item label="6" value="6" />
|
|
165
|
+ </Picker>
|
|
166
|
+ </View>
|
|
167
|
+ <View style={styles.modalItem}>
|
|
168
|
+ <Text>Semester</Text>
|
|
169
|
+ <Picker
|
|
170
|
+ selectedValue={semester}
|
|
171
|
+ style={{ width: 50}}
|
|
172
|
+ onValueChange={(itemValue, itemIndex) => setSemester(itemValue) }>
|
|
173
|
+ <Picker.Item label="1" value="1" />
|
|
174
|
+ <Picker.Item label="2" value="2" />
|
|
175
|
+ </Picker>
|
|
176
|
+ </View>
|
|
177
|
+ <View style={{flex: 1, justifyContent: 'center'}}>
|
|
178
|
+ <ActivityIndicator size="large" color="0000ff" animating={animating}/>
|
|
179
|
+ <View>
|
|
180
|
+ <Button title="Submit" onPress={addCourse}/>
|
|
181
|
+ <Button title="Close" onPress={toggle}/>
|
|
182
|
+ </View>
|
|
183
|
+ </View>
|
|
184
|
+ </Modal>
|
|
185
|
+
|
82
|
186
|
</View>
|
83
|
187
|
);
|
84
|
188
|
};
|
|
@@ -101,7 +205,12 @@ const styles = StyleSheet.create({
|
101
|
205
|
height: 40,
|
102
|
206
|
borderColor: '#000',
|
103
|
207
|
borderWidth: 1
|
104
|
|
- }
|
|
208
|
+ },
|
|
209
|
+ modalItem: {
|
|
210
|
+ // width: '30%', // is 30% of container width
|
|
211
|
+ margin: 8 // 300
|
|
212
|
+}
|
|
213
|
+
|
105
|
214
|
});
|
106
|
215
|
|
107
|
216
|
export default AddTakenCourse;
|