No Description

Search.js 7.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290
  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. const Days = [
  41. {
  42. item: 'Lunes',
  43. id: 'L',
  44. },
  45. {
  46. item: 'Martes',
  47. id: 'M',
  48. },
  49. {
  50. item: 'Miercoles',
  51. id: 'W',
  52. },
  53. {
  54. item: 'Jueves',
  55. id: 'J',
  56. },
  57. {
  58. item: 'Viernes',
  59. id: 'V',
  60. },
  61. {
  62. item: 'Sabado',
  63. id: 'S',
  64. },
  65. {
  66. item: 'Domingo',
  67. id: 'D',
  68. },
  69. {
  70. item: 'Feriados',
  71. id: 'F',
  72. }
  73. ]
  74. function Search({route, navigation }) {
  75. const u_token = route.params.U_Token;
  76. const username = route.params.Username;
  77. console.log("U__token: ", u_token)
  78. const [users, setUsers] = useState([])
  79. const [selectedTags, setSelectedTags] = useState([])
  80. const [selectedDays, setSelectedDays] = useState([])
  81. const fetchUsers = (tags, days) => {
  82. //if the array that have the interpreter tags
  83. //and the day tags are empty we dont send the query seeing as the user
  84. //is not searching for anything yet
  85. if (tags.length === 0 && days.length === 0) {
  86. return
  87. }
  88. //reset the users usestate to empty
  89. const users = []
  90. const db = firebase.firestore()
  91. var query = db.collection('Interprete')
  92. for (let i = 0; i < tags.length; i++) {
  93. //Reset Flag.
  94. mapflag = false
  95. //check which tags where called in the search
  96. if (tags[i].id === 'PL') {
  97. console.log('Presencial')
  98. query = query.where('Modalidad.Presencial', '==', true)
  99. mapflag = true
  100. }
  101. if (tags[i].id == 'ON') {
  102. query = query.where('Modalidad.Online', '==', true)
  103. }
  104. if (tags[i].id == 'IL') {
  105. query = query.where('Cantidad.Individual', '==', true)
  106. }
  107. if (tags[i].id == 'GL') {
  108. query = query.where('Cantidad.Grupal', '==', true)
  109. }
  110. if (tags[i].id == 'ESP') {
  111. query = query.where('Lenguaje.Esp', '==', true)
  112. }
  113. if (tags[i].id == 'ING') {
  114. query = query.where('Lenguaje.Ing', '==', true)
  115. }
  116. }
  117. for(let i = 0; i < days.length; i++) {
  118. if (days[i].id === 'L') {
  119. query = query.where('dias.Lunes', '==', true)
  120. }
  121. if (days[i].id === 'M') {
  122. query = query.where('dias.Martes', '==', true)
  123. }
  124. if (days[i].id === 'W') {
  125. query = query.where('dias.Miercoles', '==', true)
  126. }
  127. if (days[i].id === 'J') {
  128. query = query.where('dias.Jueves', '==', true)
  129. }
  130. if (days[i].id === 'V') {
  131. query = query.where('dias.Viernes', '==', true)
  132. }
  133. if (days[i].id === 'S') {
  134. query = query.where('dias.Sabado', '==', true)
  135. }
  136. if (days[i].id === 'D') {
  137. query = query.where('dias.Domingo', '==', true)
  138. }
  139. if (days[i].id === 'F') {
  140. query = query.where('dias.Feriados', '==', true)
  141. }
  142. }
  143. query.get().then(querySnapshot => {
  144. console.log('Total users: ', querySnapshot.size);
  145. //traverse the query snapshot
  146. //add the user to the users array
  147. querySnapshot.forEach(documentSnapshot => {
  148. //save the user id and the user data
  149. const user = {
  150. id: documentSnapshot.id,
  151. data: documentSnapshot.data()
  152. }
  153. users.push(user)
  154. setUsers(users)
  155. });
  156. });
  157. console.log('These are the users after the query is executed: ', users)
  158. }
  159. return (
  160. <ScrollView>
  161. <View style={{ margin: 30 }}>
  162. <View style={{ width: '100%', alignItems: 'center' }}>
  163. <Text style={{ fontSize: 30, paddingBottom: 20 }}>Busqueda</Text>
  164. </View>
  165. <Text style={{ fontSize: 20, paddingBottom: 10 }}>Filtro de Interpretes</Text>
  166. <SelectBox
  167. arrowIconColor='#E4CD05'
  168. toggleIconColor='#E4CD05'
  169. searchIconColor='#E4CD05'
  170. multiOptionContainerStyle = {{
  171. backgroundColor: '#E4CD05',
  172. borderColor: '#E4CD05',
  173. borderWidth: 1,
  174. borderRadius: 5,
  175. marginBottom: 10,
  176. marginTop: 10,
  177. padding: 10,
  178. }}
  179. multiOptionsLabelStyle = {{
  180. color: '#000000',
  181. fontSize: 20,
  182. }}
  183. label="Select multiple"
  184. options={Tags}
  185. selectedValues={selectedTags}
  186. onMultiSelect={onMultiChange()}
  187. onTapClose={onMultiChange()}
  188. isMulti
  189. />
  190. <Text style={{ fontSize: 20, paddingBottom: 10 }}>Dias Disponibles</Text>
  191. <SelectBox
  192. arrowIconColor='#E4CD05'
  193. toggleIconColor='#E4CD05'
  194. searchIconColor='#E4CD05'
  195. multiOptionContainerStyle = {{
  196. backgroundColor: '#E4CD05',
  197. borderColor: '#E4CD05',
  198. borderWidth: 1,
  199. borderRadius: 5,
  200. marginBottom: 10,
  201. marginTop: 10,
  202. padding: 10,
  203. }}
  204. multiOptionsLabelStyle = {{
  205. color: '#000000',
  206. fontSize: 20,
  207. }}
  208. label="Select multiple"
  209. options={Days}
  210. selectedValues={selectedDays}
  211. onMultiSelect={(item) => setSelectedDays(xorBy(selectedDays, [item], 'id'))}
  212. onTapClose={(item) => setSelectedDays(xorBy(selectedDays, [item], 'id'))}
  213. isMulti
  214. />
  215. {/* button that will fetch the users */}
  216. <Button title='Buscar' onPress={() => fetchUsers(selectedTags, selectedDays)}/>
  217. <FlatList
  218. numColumns={1}
  219. horizontal={false}
  220. data={users}
  221. renderItem={({ item, }) => {
  222. return (
  223. <View>
  224. <View style={{ flexDirection: "row", paddingBottom: 20, paddingTop: 20, justifyContent: "space-between" }}>
  225. <Text>{item.data.username}</Text>
  226. <Text>{item.data.Precio}</Text>
  227. <Button title='Buscar' onPress={() => { dothing(item.id, item.data.push_token, u_token, item.data.username) }}/>
  228. </View>
  229. <View style={{ borderBottomColor: 'black', borderBottomWidth: 1 }} />
  230. </View>
  231. )
  232. }}
  233. />
  234. </View>
  235. </ScrollView>
  236. );
  237. function onMultiChange() {
  238. return (item) => setSelectedTags(xorBy(selectedTags, [item], 'id'))
  239. }
  240. function dothing(item, i_token, u_token, I_username) {
  241. console.log('This is the item id: ', item, "With i_token: ", i_token, " u_token : ", u_token)
  242. navigation.navigate('Calendar', {Intereprete_id: item, Flag: mapflag, I_Token: i_token, U_Token: u_token, Username: username, I_Username: I_username})
  243. }
  244. }
  245. const styles = StyleSheet.create({
  246. button: {
  247. alignItems: "center",
  248. backgroundColor: 'transparent'
  249. },
  250. });
  251. export default Search