Nenhuma descrição

AddTakenCourse.js 6.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217
  1. import axios from "axios";
  2. import React, { useState } from "react";
  3. import { FlatList, StatusBar, StyleSheet, Text, TouchableOpacity, TextInput, View, Button, ActivityIndicator } from "react-native";
  4. import * as SecureStore from 'expo-secure-store';
  5. import Modal from 'react-native-modal';
  6. import {Picker} from '@react-native-community/picker';
  7. const Item = ({ item, onPress, style }) => (
  8. <TouchableOpacity onPress={onPress} style={[styles.item, style]}>
  9. <Text style={styles.title}>{item.code}</Text>
  10. </TouchableOpacity>
  11. );
  12. // separates results, taken from https://stackoverflow.com/questions/60350768/how-to-make-search-bar-with-dropdown-list-in-react-native
  13. const renderSeparator = () => {
  14. return (
  15. <View
  16. style={{
  17. height: 1,
  18. width: '100%',
  19. backgroundColor: '#CED0CE',
  20. }}
  21. />
  22. );
  23. };
  24. const AddTakenCourse = () => {
  25. const [text, setText] = useState('')
  26. const [selectedId, setSelectedId] = useState(null);
  27. const [data, setData] = useState([])
  28. const [modalVisible, setModalVisible] = useState(false)
  29. const [grade, setGrade] = useState('A')
  30. const [year, setYear] = useState('1')
  31. const [semester, setSemester] = useState('1')
  32. const [animating, setAnimating] = useState('')
  33. const toggle = ()=>{
  34. setModalVisible(!modalVisible)
  35. }
  36. const addCourse = async ()=>{
  37. const token = await SecureStore.getItemAsync('token')
  38. let id = await SecureStore.getItemAsync('id')
  39. let user_id = parseInt(id)
  40. console.log('year', year)
  41. console.log('semester', semester)
  42. console.log('grade', grade)
  43. let response = await axios({
  44. method: 'POST',
  45. url: 'http://8c4029a33a9a.ngrok.io/api/add_taken_course',
  46. headers: {
  47. 'content-type': 'application/json',
  48. Authorization: `Token ${token}`
  49. },
  50. data: {
  51. semester: semester,
  52. year: year,
  53. user_id: user_id,
  54. grade: grade,
  55. course_id: selectedId
  56. }
  57. })
  58. console.log(response.data)
  59. setAnimating(true)
  60. setTimeout(()=>{
  61. setAnimating(false)
  62. setModalVisible(false)
  63. setSelectedId(null)
  64. setData([])
  65. }, 3000)
  66. }
  67. const searchCourses = async(text)=>{
  68. let courses = []
  69. setText(text)
  70. const token = await SecureStore.getItemAsync('token')
  71. const response = await axios({
  72. method: 'GET',
  73. url: `http://8c4029a33a9a.ngrok.io/api/find_course?code=${text}`,
  74. headers: {
  75. 'content-type': 'application/json',
  76. Authorization: `Token ${token}`
  77. }
  78. })
  79. response.data.list.map((course)=>{
  80. let oneCourse = {'id': course.id, 'code': course.code}
  81. courses.push(oneCourse)
  82. })
  83. setData(courses)
  84. }
  85. const renderItem = ({ item }) => {
  86. const backgroundColor = item.id === selectedId ? "#e60505" : "#fafbfc";
  87. return (
  88. <Item
  89. item={item}
  90. onPress={() => {
  91. setSelectedId(item.id)
  92. setModalVisible(true)
  93. }}
  94. style={{ backgroundColor }}
  95. />
  96. );
  97. };
  98. return (
  99. <View style={{flex: 1, padding: 10}}>
  100. <TextInput
  101. style={styles.searchBar}
  102. placeholder="Search for a course that you've taken"
  103. onChangeText={text=>searchCourses(text)}
  104. // onChangeText={text=>setText(text)}
  105. />
  106. <FlatList
  107. data={data}
  108. renderItem={renderItem}
  109. keyExtractor={(item) => item.id.toString()}
  110. extraData={selectedId}
  111. ItemSeparatorComponent={renderSeparator}
  112. />
  113. <Modal isVisible={modalVisible} style={{
  114. backgroundColor: 'white',
  115. flexDirection: 'row',
  116. borderRadius: 20,
  117. margin: 50,
  118. padding: 10,
  119. }}>
  120. <View style={styles.modalItem}>
  121. <Text>Grade</Text>
  122. <Picker
  123. selectedValue={grade}
  124. style={{ width: 50}}
  125. onValueChange={(itemValue, itemIndex) => setGrade(itemValue) }>
  126. <Picker.Item label="A" value="A" />
  127. <Picker.Item label="B" value="B" />
  128. <Picker.Item label="C" value="C" />
  129. <Picker.Item label="D" value="D" />
  130. <Picker.Item label="F" value="F" />
  131. </Picker>
  132. </View>
  133. <View style={styles.modalItem}>
  134. <Text>Year</Text>
  135. <Picker
  136. selectedValue={year}
  137. style={{ width: 50}}
  138. onValueChange={(itemValue, itemIndex) => setYear(itemValue) }>
  139. <Picker.Item label="1" value="1" />
  140. <Picker.Item label="2" value="2" />
  141. <Picker.Item label="3" value="3" />
  142. <Picker.Item label="4" value="4" />
  143. <Picker.Item label="5" value="5" />
  144. <Picker.Item label="6" value="6" />
  145. </Picker>
  146. </View>
  147. <View style={styles.modalItem}>
  148. <Text>Semester</Text>
  149. <Picker
  150. selectedValue={semester}
  151. style={{ width: 50}}
  152. onValueChange={(itemValue, itemIndex) => setSemester(itemValue) }>
  153. <Picker.Item label="1" value="1" />
  154. <Picker.Item label="2" value="2" />
  155. <Picker.Item label="3" value="3" />
  156. </Picker>
  157. </View>
  158. <View style={{flex: 1, justifyContent: 'center'}}>
  159. <ActivityIndicator size="large" color="0000ff" animating={animating}/>
  160. <View>
  161. <Button title="Submit" onPress={addCourse}/>
  162. <Button title="Close" onPress={toggle}/>
  163. </View>
  164. </View>
  165. </Modal>
  166. </View>
  167. );
  168. };
  169. const styles = StyleSheet.create({
  170. container: {
  171. flex: 1,
  172. marginTop: StatusBar.currentHeight || 0,
  173. },
  174. item: {
  175. padding: 10,
  176. marginVertical: 8,
  177. marginHorizontal: 16,
  178. },
  179. title: {
  180. fontSize: 15,
  181. },
  182. searchBar: {
  183. height: 40,
  184. borderColor: '#000',
  185. borderWidth: 1
  186. },
  187. modalItem: {
  188. // width: '30%', // is 30% of container width
  189. margin: 8 // 300
  190. }
  191. });
  192. export default AddTakenCourse;