No Description

Search.js 16KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884
  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 City = [
  41. {
  42. item: 'None',
  43. id: -1,
  44. },
  45. {
  46. item: 'Adjuntas',
  47. id: 0,
  48. },
  49. {
  50. item: 'Aguada',
  51. id: 1,
  52. },
  53. {
  54. item: 'Aguadilla',
  55. id: 2,
  56. },
  57. {
  58. item: 'Aguas Buenas',
  59. id: 3,
  60. },
  61. {
  62. item: 'Aibonito',
  63. id: 4,
  64. },
  65. {
  66. item: 'Arecibo',
  67. id: 5,
  68. },
  69. {
  70. item: 'Arroyo',
  71. id: 6,
  72. },
  73. {
  74. item: 'Añasco',
  75. id: 7,
  76. },
  77. {
  78. item: 'Barceloneta',
  79. id: 8,
  80. },
  81. {
  82. item: 'Barranquitas',
  83. id: 9,
  84. },
  85. {
  86. item: 'Bayamón',
  87. id: 10,
  88. },
  89. {
  90. item: 'Cabo Rojo',
  91. id: 11,
  92. },
  93. {
  94. item: 'Caguas',
  95. id: 12,
  96. },
  97. {
  98. item: 'Camuy',
  99. id: 13,
  100. },
  101. {
  102. item: 'Canóvanas',
  103. id: 14,
  104. },
  105. {
  106. item: 'Carolina',
  107. id: 15,
  108. },
  109. {
  110. item: 'Cataño',
  111. id: 16,
  112. },
  113. {
  114. item: 'Cayey',
  115. id: 17,
  116. },
  117. {
  118. item: 'Ceiba',
  119. id: 18,
  120. },
  121. {
  122. item: 'Ciales',
  123. id: 19,
  124. },
  125. {
  126. item: 'Cidra',
  127. id: 20,
  128. },
  129. {
  130. item: 'Coamo',
  131. id: 21,
  132. },
  133. {
  134. item: 'Comerío',
  135. id: 22,
  136. },
  137. {
  138. item: 'Corozal',
  139. id: 23,
  140. },
  141. {
  142. item: 'Culebra',
  143. id: 24,
  144. },
  145. {
  146. item: 'Dorado',
  147. id: 25,
  148. },
  149. {
  150. item: 'Fajardo',
  151. id: 26,
  152. },
  153. {
  154. item: 'Florida',
  155. id: 27,
  156. },
  157. {
  158. item: 'Guayama',
  159. id: 28,
  160. },
  161. {
  162. item: 'Guayanilla',
  163. id: 29,
  164. },
  165. {
  166. item: 'Guaynabo',
  167. id: 30,
  168. },
  169. {
  170. item: 'Gurabo',
  171. id: 31,
  172. },
  173. {
  174. item: 'Guánica',
  175. id: 32,
  176. },
  177. {
  178. item: 'Hatillo',
  179. id: 33,
  180. },
  181. {
  182. item: 'Hormigueros',
  183. id: 34,
  184. },
  185. {
  186. item: 'Humacao',
  187. id: 35,
  188. },
  189. {
  190. item: 'Isabela',
  191. id: 36,
  192. },
  193. {
  194. item: 'Jayuya',
  195. id: 37,
  196. },
  197. {
  198. item: 'Juana Díaz',
  199. id: 38,
  200. },
  201. {
  202. item: 'Juncos',
  203. id: 39,
  204. },
  205. {
  206. item: 'Lajas',
  207. id: 40,
  208. },
  209. {
  210. item: 'Lares',
  211. id: 41,
  212. },
  213. {
  214. item: 'Las Marías',
  215. id: 42,
  216. },
  217. {
  218. item: 'Las Piedras',
  219. id: 43,
  220. },
  221. {
  222. item: 'Loíza',
  223. id: 44,
  224. },
  225. {
  226. item: 'Luquillo',
  227. id: 45,
  228. },
  229. {
  230. item: 'Manatí',
  231. id: 46,
  232. },
  233. {
  234. item: 'Maricao',
  235. id: 47,
  236. },
  237. {
  238. item: 'Maunabo',
  239. id: 48,
  240. },
  241. {
  242. item: 'Mayagüez',
  243. id: 49,
  244. },
  245. {
  246. item: 'Moca',
  247. id: 50,
  248. },
  249. {
  250. item: 'Morovis',
  251. id: 51,
  252. },
  253. {
  254. item: 'Naguabo',
  255. id: 52,
  256. },
  257. {
  258. item: 'Naranjito',
  259. id: 53,
  260. },
  261. {
  262. item: 'Orocovis',
  263. id: 54,
  264. },
  265. {
  266. item: 'Patillas',
  267. id: 55,
  268. },
  269. {
  270. item: 'Peñuelas',
  271. id: 56,
  272. },
  273. {
  274. item: 'Ponce',
  275. id: 57,
  276. },
  277. {
  278. item: 'Quebradillas',
  279. id: 58,
  280. },
  281. {
  282. item: 'Rincón',
  283. id: 59,
  284. },
  285. {
  286. item: 'Rio Grande',
  287. id: 60,
  288. },
  289. {
  290. item: 'Sabana Grande',
  291. id: 61,
  292. },
  293. {
  294. item: 'Salinas',
  295. id: 62,
  296. },
  297. {
  298. item: 'San Germán',
  299. id: 63,
  300. },
  301. {
  302. item: 'San Juan',
  303. id: 64,
  304. },
  305. {
  306. item: 'San Lorenzo',
  307. id: 65,
  308. },
  309. {
  310. item: 'San Sebastián',
  311. id: 66,
  312. },
  313. {
  314. item: 'Santa Isabel',
  315. id: 67,
  316. },
  317. {
  318. item: 'Toa Alta',
  319. id: 68,
  320. },
  321. {
  322. item: 'Toa Baja',
  323. id: 69,
  324. },
  325. {
  326. item: 'Trujillo Alto',
  327. id: 70,
  328. },
  329. {
  330. item: 'Utuado',
  331. id: 71,
  332. },
  333. {
  334. item: 'Vega Alta',
  335. id: 72,
  336. },
  337. {
  338. item: 'Vega Baja',
  339. id: 73,
  340. },
  341. {
  342. item: 'Vieques',
  343. id: 74,
  344. },
  345. {
  346. item: 'Villalba',
  347. id: 75,
  348. },
  349. {
  350. item: 'Yabucoa',
  351. id: 76,
  352. },
  353. {
  354. item: 'Yauco',
  355. id: 77,
  356. },
  357. ]
  358. function Search({route, navigation }) {
  359. const u_token = route.params.U_Token;
  360. const username = route.params.Username;
  361. console.log("U__token: ", u_token)
  362. const [users, setUsers] = useState([])
  363. const [selectedTags, setSelectedTags] = useState([])
  364. const [selectedCity, setSelectedCity] = useState([])
  365. const fetchUsers = (tags, city) => {
  366. //if the array that have the interpreter tags
  367. //and the day tags are empty we dont send the query seeing as the user
  368. //is not searching for anything yet
  369. // console.log(tags.length)
  370. // console.log(city.id)
  371. const users = []
  372. if (tags.length === 0 && (typeof city.id ==="undefined" || city.id === -1)) {
  373. setUsers(users)
  374. return
  375. }
  376. //reset the users usestate to empty
  377. const db = firebase.firestore()
  378. var query = db.collection('Interpreters')
  379. for (let i = 0; i < tags.length; i++) {
  380. //Reset Flag.
  381. mapflag = false
  382. //check which tags where called in the search
  383. if (tags[i].id === 'PL') {
  384. console.log('Presencial')
  385. query = query.where('face_to_face', '==', true)
  386. mapflag = true
  387. }
  388. if (tags[i].id == 'ON') {
  389. query = query.where('virtual', '==', true)
  390. }
  391. if (tags[i].id == 'IL') {
  392. query = query.where('personal', '==', true)
  393. }
  394. if (tags[i].id == 'GL') {
  395. query = query.where('group', '==', true)
  396. }
  397. if (tags[i].id == 'ESP') {
  398. query = query.where('spanish', '==', true)
  399. }
  400. if (tags[i].id == 'ING') {
  401. query = query.where('english', '==', true)
  402. }
  403. }
  404. switch(city.id){
  405. case 0:
  406. query = query.where('city', '==', 'Adjuntas')
  407. break;
  408. case 1:
  409. query = query.where('city', '==', 'Aguada')
  410. break;
  411. case 2:
  412. query = query.where('city', '==', 'Aguadilla')
  413. break;
  414. case 3:
  415. query = query.where('city', '==', 'Aguas Buenas')
  416. break;
  417. case 4:
  418. query = query.where('city', '==', 'Aibonito')
  419. break;
  420. case 5:
  421. query = query.where('city', '==', 'Arecibo')
  422. break;
  423. case 6:
  424. query = query.where('city', '==', 'Arroyo')
  425. break;
  426. case 7:
  427. query = query.where('city', '==', 'Añasco')
  428. break;
  429. case 8:
  430. query = query.where('city', '==', 'Barceloneta')
  431. break;
  432. case 9:
  433. query = query.where('city', '==', 'Barranquitas')
  434. break;
  435. case 10:
  436. query = query.where('city', '==', 'Bayamón')
  437. break;
  438. case 11:
  439. query = query.where('city', '==', 'Cabo Rojo')
  440. break;
  441. case 12:
  442. query = query.where('city', '==', 'Caguas')
  443. break;
  444. case 13:
  445. query = query.where('city', '==', 'Camuy')
  446. break;
  447. case 14:
  448. query = query.where('city', '==', 'Canóvanas')
  449. break;
  450. case 15:
  451. query = query.where('city', '==', 'Carolina')
  452. break;
  453. case 16:
  454. query = query.where('city', '==', 'Cataño')
  455. break;
  456. case 17:
  457. query = query.where('city', '==', 'Cayey')
  458. break;
  459. case 18:
  460. query = query.where('city', '==', 'Ceiba')
  461. break;
  462. case 19:
  463. query = query.where('city', '==', 'Ciales')
  464. break;
  465. case 20:
  466. query = query.where('city', '==', 'Cidra')
  467. break;
  468. case 21:
  469. query = query.where('city', '==', 'Coamo')
  470. break;
  471. case 22:
  472. query = query.where('city', '==', 'Comerío')
  473. break;
  474. case 23:
  475. query = query.where('city', '==', 'Corozal')
  476. break;
  477. case 24:
  478. query = query.where('city', '==', 'Culebra')
  479. break;
  480. case 25:
  481. query = query.where('city', '==', 'Dorado')
  482. break;
  483. case 26:
  484. query = query.where('city', '==', 'Fajardo')
  485. break;
  486. case 27:
  487. query = query.where('city', '==', 'Florida')
  488. break;
  489. case 28:
  490. query = query.where('city', '==', 'Guánica')
  491. break;
  492. case 29:
  493. query = query.where('city', '==', 'Guayama')
  494. break;
  495. case 30:
  496. query = query.where('city', '==', 'Guayanilla')
  497. break;
  498. case 31:
  499. query = query.where('city', '==', 'Guaynabo')
  500. break;
  501. case 32:
  502. query = query.where('city', '==', 'Gurabo')
  503. break;
  504. case 33:
  505. query = query.where('city', '==', 'Hatillo')
  506. break;
  507. case 34:
  508. query = query.where('city', '==', 'Hormigueros')
  509. break;
  510. case 35:
  511. query = query.where('city', '==', 'Humacao')
  512. break;
  513. case 36:
  514. query = query.where('city', '==', 'Isabela')
  515. break;
  516. case 37:
  517. query = query.where('city', '==', 'Jayuya')
  518. break;
  519. case 38:
  520. query = query.where('city', '==', 'Juana Díaz')
  521. break;
  522. case 39:
  523. query = query.where('city', '==', 'Juncos')
  524. break;
  525. case 40:
  526. query = query.where('city', '==', 'Lajas')
  527. break;
  528. case 41:
  529. query = query.where('city', '==', 'Lares')
  530. break;
  531. case 42:
  532. query = query.where('city', '==', 'Las Marías')
  533. break;
  534. case 43:
  535. query = query.where('city', '==', 'Las Piedras')
  536. break;
  537. case 44:
  538. query = query.where('city', '==', 'Loíza')
  539. break;
  540. case 45:
  541. query = query.where('city', '==', 'Luquillo')
  542. break;
  543. case 46:
  544. query = query.where('city', '==', 'Manatí')
  545. break;
  546. case 47:
  547. query = query.where('city', '==', 'Maricao')
  548. break;
  549. case 48:
  550. query = query.where('city', '==', 'Maunabo')
  551. break;
  552. case 49:
  553. query = query.where('city', '==', 'Mayagüez')
  554. break;
  555. case 50:
  556. query = query.where('city', '==', 'Moca')
  557. break;
  558. case 51:
  559. query = query.where('city', '==', 'Morovis')
  560. break;
  561. case 52:
  562. query = query.where('city', '==', 'Naguabo')
  563. break;
  564. case 53:
  565. query = query.where('city', '==', 'Naranjito')
  566. break;
  567. case 54:
  568. query = query.where('city', '==', 'Orocovis')
  569. break;
  570. case 55:
  571. query = query.where('city', '==', 'Patillas')
  572. break;
  573. case 56:
  574. query = query.where('city', '==', 'Peñuelas')
  575. break;
  576. case 57:
  577. query = query.where('city', '==', 'Ponce')
  578. break;
  579. case 58:
  580. query = query.where('city', '==', 'Quebradillas')
  581. break;
  582. case 59:
  583. query = query.where('city', '==', 'Rincón')
  584. break;
  585. case 60:
  586. query = query.where('city', '==', 'Río Grande')
  587. break;
  588. case 61:
  589. query = query.where('city', '==', 'Sabana Grande')
  590. break;
  591. case 62:
  592. query = query.where('city', '==', 'Salinas')
  593. break;
  594. case 63:
  595. query = query.where('city', '==', 'San Germán')
  596. break;
  597. case 64:
  598. query = query.where('city', '==', 'San Juan')
  599. break;
  600. case 65:
  601. query = query.where('city', '==', 'San Lorenzo')
  602. break;
  603. case 66:
  604. query = query.where('city', '==', 'San Sebastián')
  605. break;
  606. case 67:
  607. query = query.where('city', '==', 'Santa Isabel')
  608. break;
  609. case 68:
  610. query = query.where('city', '==', 'Toa Alta')
  611. break;
  612. case 69:
  613. query = query.where('city', '==', 'Toa Baja')
  614. break;
  615. case 70:
  616. query = query.where('city', '==', 'Trujillo Alto')
  617. break;
  618. case 71:
  619. query = query.where('city', '==', 'Utuado')
  620. break;
  621. case 72:
  622. query = query.where('city', '==', 'Vega Alta')
  623. break;
  624. case 73:
  625. query = query.where('city', '==', 'Vega Baja')
  626. break;
  627. case 74:
  628. query = query.where('city', '==', 'Vieques')
  629. break;
  630. case 75:
  631. query = query.where('city', '==', 'Villalba')
  632. break;
  633. case 76:
  634. query = query.where('city', '==', 'Yabucoa')
  635. break;
  636. case 77:
  637. query = query.where('city', '==', 'Yauco')
  638. break;
  639. default:
  640. }
  641. query.get().then(querySnapshot => {
  642. console.log('Total users: ', querySnapshot.size);
  643. //traverse the query snapshot
  644. //add the user to the users array
  645. querySnapshot.forEach(documentSnapshot => {
  646. //save the user id and the user data
  647. const user = {
  648. id: documentSnapshot.id,
  649. data: documentSnapshot.data()
  650. }
  651. users.push(user)
  652. setUsers(users)
  653. });
  654. });
  655. console.log('These are the users after the query is executed: ', users)
  656. }
  657. return (
  658. <ScrollView>
  659. <View style={{ margin: 30 }}>
  660. <View style={{ width: '100%', alignItems: 'center' }}>
  661. <Text style={{ fontSize: 30, paddingBottom: 20 }}>Busqueda</Text>
  662. </View>
  663. <Text style={{ fontSize: 20, paddingBottom: 10 }}>Pueblo</Text>
  664. <SelectBox
  665. label="Selecciona"
  666. options={City}
  667. value={selectedCity}
  668. onChange={onChange()}
  669. hideInputFilter={false}
  670. arrowIconColor="#E4CD05"
  671. toggleIconColor='#E4CD05'
  672. searchIconColor='#E4CD05'
  673. />
  674. <Text style={{ fontSize: 20, paddingBottom: 10, paddingTop:20 }}>Tags de interprete</Text>
  675. <SelectBox
  676. label="Selecciona multiple"
  677. options={Tags}
  678. selectedValues={selectedTags}
  679. onMultiSelect={onMultiChange()}
  680. onTapClose={onMultiChange()}
  681. isMulti
  682. arrowIconColor='#E4CD05'
  683. toggleIconColor='#E4CD05'
  684. searchIconColor='#E4CD05'
  685. multiOptionContainerStyle = {{
  686. backgroundColor: '#E4CD05',
  687. borderColor: '#E4CD05',
  688. borderWidth: 1,
  689. borderRadius: 5,
  690. marginBottom: 10,
  691. marginTop: 10,
  692. padding: 10,
  693. }}
  694. multiOptionsLabelStyle = {{
  695. color: '#000000',
  696. fontSize: 20,
  697. }}
  698. />
  699. <View style={{ width: '100%', paddingTop:40, paddingBottom: 30 }}>
  700. {/* button that will fetch the users */}
  701. <Button title='Buscar' onPress={() => fetchUsers(selectedTags, selectedCity)}/>
  702. </View>
  703. <FlatList
  704. numColumns={1}
  705. horizontal={false}
  706. data={users}
  707. renderItem={({ item, }) => {
  708. return (
  709. <View>
  710. <View style={{ flexDirection: "row", paddingBottom: 20, paddingTop: 20, justifyContent: "space-between" }}>
  711. <Text>{item.data.username}</Text>
  712. <Text>{item.data.precio}</Text>
  713. <Button title='Buscar' onPress={() => { dothing(item.id, item.data.markedDates, item.data.push_token, u_token, item.data.username) }}/>
  714. </View>
  715. <View style={{ borderBottomColor: 'black', borderBottomWidth: 1 }} />
  716. </View>
  717. )
  718. }}
  719. />
  720. </View>
  721. </ScrollView>
  722. );
  723. function onMultiChange() {
  724. return (item) => setSelectedTags(xorBy(selectedTags, [item], 'id'))
  725. }
  726. function onChange(){
  727. return (item) => setSelectedCity(item)
  728. }
  729. function dothing(item_id, item_dates, i_token, u_token, I_username) {
  730. console.log('This is the item id: ', item_id, "With i_token: ", i_token, " u_token : ", u_token)
  731. console.log('These are the marked dates', item_dates)
  732. 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})
  733. }
  734. }
  735. const styles = StyleSheet.create({
  736. button: {
  737. alignItems: "center",
  738. backgroundColor: 'transparent'
  739. },
  740. });
  741. export default Search