No Description

Search.js 6.7KB

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