No Description

Search.js 5.1KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206
  1. import React, { useState } from 'react'
  2. import { Text, View, StyleSheet, FlatList, TouchableOpacity, Button, ScrollView } from 'react-native'
  3. import SelectBox from 'react-native-multi-selectbox'
  4. import { xorBy } from 'lodash'
  5. import firebase from 'firebase'
  6. import { firebaseConfig } from '../../config/firebaseConfig'
  7. //Flag to indicate an IRL appointment.
  8. var mapflag = false
  9. if (firebase.apps.length === 0) {
  10. firebase.initializeApp(firebaseConfig)
  11. }
  12. require('firebase/firestore')
  13. // Options data must contain 'item' & 'id' keys
  14. const Tags = [
  15. {
  16. item: 'Presencial',
  17. id: 'PL',
  18. },
  19. {
  20. item: 'Online',
  21. id: 'ON',
  22. },
  23. {
  24. item: 'Individual',
  25. id: 'IL',
  26. },
  27. {
  28. item: 'Grupal',
  29. id: 'GL',
  30. },
  31. {
  32. item: 'Esp',
  33. id: 'ESP',
  34. },
  35. {
  36. item: 'Ing',
  37. id: 'ING',
  38. }
  39. ]
  40. function Search({route, navigation }) {
  41. const u_token = route.params.U_Token;
  42. const username = route.params.Username;
  43. console.log("U__token: ", u_token)
  44. const [users, setUsers] = useState([])
  45. const [selectedTags, setSelectedTags] = useState([])
  46. const fetchUsers = (tags) => {
  47. //if the array that have the interpreter tags
  48. //and the day tags are empty we dont send the query seeing as the user
  49. //is not searching for anything yet
  50. if (tags.length === 0) {
  51. return
  52. }
  53. //reset the users usestate to empty
  54. const users = []
  55. const db = firebase.firestore()
  56. var query = db.collection('Interpreters')
  57. for (let i = 0; i < tags.length; i++) {
  58. //Reset Flag.
  59. mapflag = false
  60. //check which tags where called in the search
  61. if (tags[i].id === 'PL') {
  62. console.log('Presencial')
  63. query = query.where('face_to_face', '==', true)
  64. mapflag = true
  65. }
  66. if (tags[i].id == 'ON') {
  67. query = query.where('virtual', '==', true)
  68. }
  69. if (tags[i].id == 'IL') {
  70. query = query.where('personal', '==', true)
  71. }
  72. if (tags[i].id == 'GL') {
  73. query = query.where('group', '==', true)
  74. }
  75. if (tags[i].id == 'ESP') {
  76. query = query.where('spanish', '==', true)
  77. }
  78. if (tags[i].id == 'ING') {
  79. query = query.where('english', '==', true)
  80. }
  81. }
  82. query.get().then(querySnapshot => {
  83. console.log('Total users: ', querySnapshot.size);
  84. //traverse the query snapshot
  85. //add the user to the users array
  86. querySnapshot.forEach(documentSnapshot => {
  87. //save the user id and the user data
  88. const user = {
  89. id: documentSnapshot.id,
  90. data: documentSnapshot.data()
  91. }
  92. users.push(user)
  93. setUsers(users)
  94. });
  95. });
  96. console.log('These are the users after the query is executed: ', users)
  97. }
  98. return (
  99. <ScrollView>
  100. <View style={{ margin: 30 }}>
  101. <View style={{ width: '100%', alignItems: 'center' }}>
  102. <Text style={{ fontSize: 30, paddingBottom: 20 }}>Busqueda</Text>
  103. </View>
  104. <Text style={{ fontSize: 20, paddingBottom: 10 }}>Filtro de Interpretes</Text>
  105. <SelectBox
  106. arrowIconColor='#E4CD05'
  107. toggleIconColor='#E4CD05'
  108. searchIconColor='#E4CD05'
  109. multiOptionContainerStyle = {{
  110. backgroundColor: '#E4CD05',
  111. borderColor: '#E4CD05',
  112. borderWidth: 1,
  113. borderRadius: 5,
  114. marginBottom: 10,
  115. marginTop: 10,
  116. padding: 10,
  117. }}
  118. multiOptionsLabelStyle = {{
  119. color: '#000000',
  120. fontSize: 20,
  121. }}
  122. label="Select multiple"
  123. options={Tags}
  124. selectedValues={selectedTags}
  125. onMultiSelect={onMultiChange()}
  126. onTapClose={onMultiChange()}
  127. isMulti
  128. />
  129. {/* button that will fetch the users */}
  130. <Button title='Buscar' onPress={() => fetchUsers(selectedTags)}/>
  131. <FlatList
  132. numColumns={1}
  133. horizontal={false}
  134. data={users}
  135. renderItem={({ item, }) => {
  136. return (
  137. <View>
  138. <View style={{ flexDirection: "row", paddingBottom: 20, paddingTop: 20, justifyContent: "space-between" }}>
  139. <Text>{item.data.username}</Text>
  140. <Text>{item.data.precio}</Text>
  141. <Button title='Buscar' onPress={() => { dothing(item.id, item.data.markedDates, item.data.push_token, u_token, item.data.username) }}/>
  142. </View>
  143. <View style={{ borderBottomColor: 'black', borderBottomWidth: 1 }} />
  144. </View>
  145. )
  146. }}
  147. />
  148. </View>
  149. </ScrollView>
  150. );
  151. function onMultiChange() {
  152. return (item) => setSelectedTags(xorBy(selectedTags, [item], 'id'))
  153. }
  154. function dothing(item_id, item_dates, i_token, u_token, I_username) {
  155. console.log('This is the item id: ', item_id, "With i_token: ", i_token, " u_token : ", u_token)
  156. console.log('These are the marked dates', item_dates)
  157. navigation.navigate('Calendar', {Intereprete_id: item_id, markedDates: item_dates, Flag: mapflag, I_Token: i_token, U_Token: u_token, Username: username, I_Username: I_username})
  158. }
  159. }
  160. const styles = StyleSheet.create({
  161. button: {
  162. alignItems: "center",
  163. backgroundColor: 'transparent'
  164. },
  165. });
  166. export default Search