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'; import {Picker} from '@react-native-community/picker'; const Item = ({ item, onPress, style }) => ( {item.code} ); // separates results, taken from https://stackoverflow.com/questions/60350768/how-to-make-search-bar-with-dropdown-list-in-react-native const renderSeparator = () => { return ( ); }; const AddTakenCourse = () => { const [text, setText] = useState('') const [selectedId, setSelectedId] = useState(null); const [data, setData] = useState([]) const [modalVisible, setModalVisible] = useState(false) const [grade, setGrade] = useState('A') const [year, setYear] = useState('1') const [semester, setSemester] = useState('1') const [animating, setAnimating] = useState(false) const toggle = ()=>{ setModalVisible(!modalVisible) setSelectedId(null) } const addCourse = async ()=>{ const token = await SecureStore.getItemAsync('token') let id = await SecureStore.getItemAsync('id') let user_id = parseInt(id) console.log('year', year) console.log('semester', semester) console.log('grade', grade) let response = await axios({ method: 'POST', url: 'http://7f9219a069f7.ngrok.io/api/add_taken_course', headers: { 'content-type': 'application/json', Authorization: `Token ${token}` }, data: { semester: semester, year: year, user_id: user_id, grade: grade, course_id: selectedId } }) console.log(response.data.msg) setAnimating(true) 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/find_course?code=${text}`, headers: { 'content-type': 'application/json', Authorization: `Token ${token}` } }) response.data.list.map((course)=>{ let oneCourse = {'id': course.id, 'code': course.code} courses.push(oneCourse) }) setData(courses) } const renderItem = ({ item }) => { const backgroundColor = item.id === selectedId ? "#e60505" : "#fafbfc"; return ( { setSelectedId(item.id) setModalVisible(true) }} style={{ backgroundColor }} /> ); }; console.log(selectedId) return ( searchCourses(text)} // onChangeText={text=>setText(text)} /> item.id.toString()} extraData={selectedId} ItemSeparatorComponent={renderSeparator} /> Grade setGrade(itemValue) }> Year setYear(itemValue) }> Semester setSemester(itemValue) }>