123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223 |
- 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 }) => (
- <TouchableOpacity onPress={onPress} style={[styles.item, style]}>
- <Text style={styles.title}>{item.code}</Text>
- </TouchableOpacity>
- );
-
- // separates results, taken from https://stackoverflow.com/questions/60350768/how-to-make-search-bar-with-dropdown-list-in-react-native
- const renderSeparator = () => {
- return (
- <View
- style={{
- height: 1,
- width: '100%',
- backgroundColor: '#CED0CE',
- }}
- />
- );
- };
-
-
- 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 (
- <Item
- item={item}
- onPress={() => {
- setSelectedId(item.id)
- setModalVisible(true)
- }}
- style={{ backgroundColor }}
- />
- );
- };
-
- console.log(selectedId)
- return (
- <View style={{flex: 1, padding: 10}}>
- <TextInput
- style={styles.searchBar}
- placeholder="Search for a course that you've taken"
- onChangeText={text=>searchCourses(text)}
- // onChangeText={text=>setText(text)}
- />
- <FlatList
- data={data}
- renderItem={renderItem}
- keyExtractor={(item) => item.id.toString()}
- extraData={selectedId}
- ItemSeparatorComponent={renderSeparator}
- />
- <Modal isVisible={modalVisible} style={{
- backgroundColor: 'white',
- flexDirection: 'row',
- borderRadius: 20,
- margin: 50,
- padding: 10,
- }}>
- <View style={styles.modalItem}>
- <Text>Grade</Text>
- <Picker
- selectedValue={grade}
- style={{ width: 50}}
- onValueChange={(itemValue, itemIndex) => setGrade(itemValue) }>
- <Picker.Item label="A" value="A" />
- <Picker.Item label="B" value="B" />
- <Picker.Item label="C" value="C" />
- <Picker.Item label="D" value="D" />
- <Picker.Item label="F" value="F" />
- </Picker>
- </View>
- <View style={styles.modalItem}>
- <Text>Year</Text>
- <Picker
- selectedValue={year}
- style={{ width: 50}}
- onValueChange={(itemValue, itemIndex) => setYear(itemValue) }>
- <Picker.Item label="1" value="1" />
- <Picker.Item label="2" value="2" />
- <Picker.Item label="3" value="3" />
- <Picker.Item label="4" value="4" />
- <Picker.Item label="5" value="5" />
- <Picker.Item label="6" value="6" />
- </Picker>
- </View>
- <View style={styles.modalItem}>
- <Text>Semester</Text>
- <Picker
- selectedValue={semester}
- style={{ width: 50}}
- onValueChange={(itemValue, itemIndex) => setSemester(itemValue) }>
- <Picker.Item label="1" value="1" />
- <Picker.Item label="2" value="2" />
- </Picker>
- </View>
- <View style={{flex: 1, justifyContent: 'center'}}>
- <ActivityIndicator size="large" color="0000ff" animating={animating}/>
- <View>
- <Button title="Submit" onPress={addCourse}/>
- <Button title="Close" onPress={toggle}/>
- </View>
- </View>
- </Modal>
-
- </View>
- );
- };
-
-
- const styles = StyleSheet.create({
- container: {
- flex: 1,
- marginTop: StatusBar.currentHeight || 0,
- },
- item: {
- padding: 10,
- marginVertical: 8,
- marginHorizontal: 16,
- },
- title: {
- fontSize: 15,
- },
- searchBar: {
- height: 40,
- borderColor: '#000',
- borderWidth: 1
- },
- modalItem: {
- // width: '30%', // is 30% of container width
- margin: 8 // 300
- }
-
- });
-
- export default AddTakenCourse;
|