import axios from "axios"; import React, { useState } from "react"; import { FlatList, StatusBar, StyleSheet, Text, TouchableOpacity, TextInput, View, Button, ActivityIndicator, Alert } from "react-native"; import * as SecureStore from 'expo-secure-store'; import Modal from 'react-native-modal'; const Item = ({ item, onPress, style }) => ( {`${item.code}-${item.section}`} ); // separates results, taken from https://stackoverflow.com/questions/60350768/how-to-make-search-bar-with-dropdown-list-in-react-native const renderSeparator = () => { return ( ); }; const EnrollNextSemester = () => { const [text, setText] = useState('') const [selectedId, setSelectedId] = useState(null); const [data, setData] = useState([]) const [modalVisible, setModalVisible] = useState(false) const [animating, setAnimating] = useState(false) const [isSummer, setIsSummer] = useState('false') const [code, setCode] = useState('') const [creditos, setCreditos] = useState('') const [days, setDays] = useState('') const [courseName, setCourseName] = useState('') const [prof, setProf] = useState('') const [rooms, setRooms] = useState('') const [section, setSection] = useState('') const [hours, setHours] = useState('') const toggle = ()=>{ setModalVisible(!modalVisible) setSelectedId(null) } // add course (enroll) to your next semester const enrollCourse = async ()=>{ const token = await SecureStore.getItemAsync('token') let id = await SecureStore.getItemAsync('id') let user_id = parseInt(id) let response = await axios({ method: 'POST', url: 'http://7f9219a069f7.ngrok.io/api/matricular_prox_semestre', headers: { 'content-type': 'application/json', Authorization: `Token ${token}` }, data: { user_id: user_id, course_id: selectedId, isSummer: isSummer } }) console.log(response.data.msg) // setMsg(response.data.msg) setAnimating(true) // after 3 seconds, the courses, the modal and the activity indicator will disappear setTimeout(()=>{ setAnimating(false) setModalVisible(false) setSelectedId(null) setData([]) // courses will disappear because data would be empty }, 3000) setTimeout(()=>{ Alert.alert(response.data.msg) }, 5000) } const searchCourses = async(text)=>{ let courses = [] setText(text) const token = await SecureStore.getItemAsync('token') const response = await axios({ method: 'GET', url: `http://7f9219a069f7.ngrok.io/api/select_course_prox_semestre?code=${text}`, headers: { 'content-type': 'application/json', Authorization: `Token ${token}` } }) // looping through our response data and creating a course object to append it to the courses array response.data.list.map((course)=>{ let oneCourse = {'id': course.id, 'name': course.name,'code': course.code, 'creditos': course.creditos, 'prof': course.prof, 'section': course.section, 'hours': course.hours, 'days': course.days, 'rooms': course.rooms} courses.push(oneCourse) }) setData(courses) // console.log(courses) } const renderItem = ({ item }) => { const backgroundColor = item.id === selectedId ? "#e60505" : "#fafbfc"; return ( { console.log('heyyyy') setSelectedId(item.id) setCourseName(item.name) setCode(item.code) setCreditos(item.creditos) setSection(item.section) setDays(item.days) setHours(item.hours) setRooms(item.rooms) setProf(item.prof) setModalVisible(true) }} style={{ backgroundColor }} /> ); }; return ( searchCourses(text)} // onChangeText={text=>setText(text)} /> item.id.toString()} extraData={selectedId} ItemSeparatorComponent={renderSeparator} /> Name: {courseName} Code: {code} Credits: {creditos} Section: {section} Prof: {prof} Days: {days} Hours: {hours} Rooms: {rooms}