No Description

Search.js 6.5KB

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