Bez popisu

MyCurriculum.js 4.9KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
  1. import React, {useState, useEffect} from 'react';
  2. import { View, StyleSheet, Text } from 'react-native';
  3. import axios from 'axios'
  4. import { Table, Row, Rows, TableWrapper, Col } from 'react-native-table-component';
  5. import {Picker} from '@react-native-community/picker'
  6. import * as SecureStore from 'expo-secure-store';
  7. const MyCurriculum = () =>{
  8. const [year, setYear] = useState(1)
  9. const [gpa, setGpa] = useState('')
  10. const [semester, setSemester] = useState(1)
  11. const [tableHead, setTableHead] = useState(['','Code', 'Title', 'Credits', 'Grade'])
  12. const [tableData, setTableData] = useState([])
  13. const [tableTitle, setTableTitle] = useState([])
  14. const getMyGPA = async()=>{
  15. const token = await SecureStore.getItemAsync('token')
  16. let id = await SecureStore.getItemAsync('id')
  17. let user_id = parseInt(id)
  18. try {
  19. let response = await axios('http://8c4029a33a9a.ngrok.io/api/see_gpa', {
  20. method: 'POST',
  21. headers: {
  22. Authorization: `Token ${token}`
  23. },
  24. data: {
  25. user_id: user_id
  26. }
  27. })
  28. setGpa(response.data["gpa"][0])
  29. } catch(e){
  30. console.log(e)
  31. }
  32. }
  33. const getMyCurriculum = async()=>{
  34. const token = await SecureStore.getItemAsync('token')
  35. let id = await SecureStore.getItemAsync('id')
  36. let user_id = parseInt(id)
  37. let courses = []
  38. let numbers = []
  39. try {
  40. let response = await axios(`http://8c4029a33a9a.ngrok.io/api/get_all_courses_by_semester?user_id=${user_id}&year=${year}&semestre=${semester}`, {
  41. method: 'GET',
  42. headers: {
  43. 'content-type': 'application/json',
  44. Authorization: `Token ${token}`
  45. },
  46. })
  47. response = response.data.list // javaScript object
  48. // setting a column with numbers
  49. for (let i = 1; i < response.length + 1; i++){
  50. numbers.push(i)
  51. }
  52. setTableTitle(numbers)
  53. // convert javascript array of objects to a javascript 2d array
  54. response.map((data)=>{
  55. let info = [data.code, data.name, data.creditos, data.grade]
  56. courses.push(info)
  57. })
  58. setTableData(courses)
  59. } catch(error){
  60. console.log(error)
  61. }
  62. }
  63. useEffect(()=>{
  64. console.log('dimelo')
  65. getMyCurriculum()
  66. getMyGPA()
  67. }, [year, semester, gpa])
  68. return (
  69. <View style={styles.container}>
  70. <Text>Total GPA: {gpa}</Text>
  71. <Table borderStyle={{borderWidth: 2, borderColor: '#0f0f0f'}}>
  72. <Row data={tableHead} flexArr={[0.9, 3.5, 10, 2.3, 2.3]} style={styles.head} textStyle={styles.text}/>
  73. <TableWrapper style={styles.wrapper}>
  74. <Col data ={tableTitle} style={styles.title} heightArr={[28,28]} textStyle={styles.text}/>
  75. <Rows data={tableData} flexArr={[3.5,10,2.3,2.3]} style={styles.row} textStyle={styles.text} />
  76. </TableWrapper>
  77. </Table>
  78. <View style={{flexDirection: 'row'}}>
  79. <View style={{margin: 8}}>
  80. <Text>Year</Text>
  81. <Picker
  82. selectedValue={year}
  83. style={{ width: 50}}
  84. onValueChange={(itemValue, itemIndex) => setYear(itemValue) }>
  85. <Picker.Item label="1" value="1" />
  86. <Picker.Item label="2" value="2" />
  87. <Picker.Item label="3" value="3" />
  88. <Picker.Item label="4" value="4" />
  89. <Picker.Item label="5" value="5" />
  90. <Picker.Item label="6" value="6" />
  91. </Picker>
  92. </View>
  93. <View style={{margin: 8}}>
  94. <Text>Semester</Text>
  95. <Picker
  96. selectedValue={semester}
  97. style={{ width: 50}}
  98. onValueChange={(itemValue, itemIndex) => setSemester(itemValue) }>
  99. <Picker.Item label="1" value="1" />
  100. <Picker.Item label="2" value="2" />
  101. <Picker.Item label="3" value="3" />
  102. </Picker>
  103. </View>
  104. </View>
  105. </View>
  106. );
  107. }
  108. export default MyCurriculum
  109. const styles = StyleSheet.create({
  110. container: { flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#fff' },
  111. head: { height: 40, backgroundColor: '#e82020' },
  112. wrapper: { flexDirection: 'row' },
  113. title: { flex: 1, backgroundColor: '#e82020' },
  114. row: { height: 28 },
  115. text: { textAlign: 'center', fontSize:10 }
  116. });