No Description

Search.js 16KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874
  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. if (tags.length === 0 && (typeof city.id ==="undefined" || city.id === -1)) {
  372. return
  373. }
  374. //reset the users usestate to empty
  375. const users = []
  376. const db = firebase.firestore()
  377. var query = db.collection('Interpreters')
  378. for (let i = 0; i < tags.length; i++) {
  379. //Reset Flag.
  380. mapflag = false
  381. //check which tags where called in the search
  382. if (tags[i].id === 'PL') {
  383. console.log('Presencial')
  384. query = query.where('face_to_face', '==', true)
  385. mapflag = true
  386. }
  387. if (tags[i].id == 'ON') {
  388. query = query.where('virtual', '==', true)
  389. }
  390. if (tags[i].id == 'IL') {
  391. query = query.where('personal', '==', true)
  392. }
  393. if (tags[i].id == 'GL') {
  394. query = query.where('group', '==', true)
  395. }
  396. if (tags[i].id == 'ESP') {
  397. query = query.where('spanish', '==', true)
  398. }
  399. if (tags[i].id == 'ING') {
  400. query = query.where('english', '==', true)
  401. }
  402. }
  403. switch(city.id){
  404. case 0:
  405. query = query.where('city', '==', 'Adjuntas')
  406. break;
  407. case 1:
  408. query = query.where('city', '==', 'Aguada')
  409. break;
  410. case 2:
  411. query = query.where('city', '==', 'Aguadilla')
  412. break;
  413. case 3:
  414. query = query.where('city', '==', 'Aguas Buenas')
  415. break;
  416. case 4:
  417. query = query.where('city', '==', 'Aibonito')
  418. break;
  419. case 5:
  420. query = query.where('city', '==', 'Arecibo')
  421. break;
  422. case 6:
  423. query = query.where('city', '==', 'Arroyo')
  424. break;
  425. case 7:
  426. query = query.where('city', '==', 'Añasco')
  427. break;
  428. case 8:
  429. query = query.where('city', '==', 'Barceloneta')
  430. break;
  431. case 9:
  432. query = query.where('city', '==', 'Barranquitas')
  433. break;
  434. case 10:
  435. query = query.where('city', '==', 'Bayamón')
  436. break;
  437. case 11:
  438. query = query.where('city', '==', 'Cabo Rojo')
  439. break;
  440. case 12:
  441. query = query.where('city', '==', 'Caguas')
  442. break;
  443. case 13:
  444. query = query.where('city', '==', 'Camuy')
  445. break;
  446. case 14:
  447. query = query.where('city', '==', 'Canóvanas')
  448. break;
  449. case 15:
  450. query = query.where('city', '==', 'Carolina')
  451. break;
  452. case 16:
  453. query = query.where('city', '==', 'Cataño')
  454. break;
  455. case 17:
  456. query = query.where('city', '==', 'Cayey')
  457. break;
  458. case 18:
  459. query = query.where('city', '==', 'Ceiba')
  460. break;
  461. case 19:
  462. query = query.where('city', '==', 'Ciales')
  463. break;
  464. case 20:
  465. query = query.where('city', '==', 'Cidra')
  466. break;
  467. case 21:
  468. query = query.where('city', '==', 'Coamo')
  469. break;
  470. case 22:
  471. query = query.where('city', '==', 'Comerío')
  472. break;
  473. case 23:
  474. query = query.where('city', '==', 'Corozal')
  475. break;
  476. case 24:
  477. query = query.where('city', '==', 'Culebra')
  478. break;
  479. case 25:
  480. query = query.where('city', '==', 'Dorado')
  481. break;
  482. case 26:
  483. query = query.where('city', '==', 'Fajardo')
  484. break;
  485. case 27:
  486. query = query.where('city', '==', 'Florida')
  487. break;
  488. case 28:
  489. query = query.where('city', '==', 'Guánica')
  490. break;
  491. case 29:
  492. query = query.where('city', '==', 'Guayama')
  493. break;
  494. case 30:
  495. query = query.where('city', '==', 'Guayanilla')
  496. break;
  497. case 31:
  498. query = query.where('city', '==', 'Guaynabo')
  499. break;
  500. case 32:
  501. query = query.where('city', '==', 'Gurabo')
  502. break;
  503. case 33:
  504. query = query.where('city', '==', 'Hatillo')
  505. break;
  506. case 34:
  507. query = query.where('city', '==', 'Hormigueros')
  508. break;
  509. case 35:
  510. query = query.where('city', '==', 'Humacao')
  511. break;
  512. case 36:
  513. query = query.where('city', '==', 'Isabela')
  514. break;
  515. case 37:
  516. query = query.where('city', '==', 'Jayuya')
  517. break;
  518. case 38:
  519. query = query.where('city', '==', 'Juana Díaz')
  520. break;
  521. case 39:
  522. query = query.where('city', '==', 'Juncos')
  523. break;
  524. case 40:
  525. query = query.where('city', '==', 'Lajas')
  526. break;
  527. case 41:
  528. query = query.where('city', '==', 'Lares')
  529. break;
  530. case 42:
  531. query = query.where('city', '==', 'Las Marías')
  532. break;
  533. case 43:
  534. query = query.where('city', '==', 'Las Piedras')
  535. break;
  536. case 44:
  537. query = query.where('city', '==', 'Loíza')
  538. break;
  539. case 45:
  540. query = query.where('city', '==', 'Luquillo')
  541. break;
  542. case 46:
  543. query = query.where('city', '==', 'Manatí')
  544. break;
  545. case 47:
  546. query = query.where('city', '==', 'Maricao')
  547. break;
  548. case 48:
  549. query = query.where('city', '==', 'Maunabo')
  550. break;
  551. case 49:
  552. query = query.where('city', '==', 'Mayagüez')
  553. break;
  554. case 50:
  555. query = query.where('city', '==', 'Moca')
  556. break;
  557. case 51:
  558. query = query.where('city', '==', 'Morovis')
  559. break;
  560. case 52:
  561. query = query.where('city', '==', 'Naguabo')
  562. break;
  563. case 53:
  564. query = query.where('city', '==', 'Naranjito')
  565. break;
  566. case 54:
  567. query = query.where('city', '==', 'Orocovis')
  568. break;
  569. case 55:
  570. query = query.where('city', '==', 'Patillas')
  571. break;
  572. case 56:
  573. query = query.where('city', '==', 'Peñuelas')
  574. break;
  575. case 57:
  576. query = query.where('city', '==', 'Ponce')
  577. break;
  578. case 58:
  579. query = query.where('city', '==', 'Quebradillas')
  580. break;
  581. case 59:
  582. query = query.where('city', '==', 'Rincón')
  583. break;
  584. case 60:
  585. query = query.where('city', '==', 'Río Grande')
  586. break;
  587. case 61:
  588. query = query.where('city', '==', 'Sabana Grande')
  589. break;
  590. case 62:
  591. query = query.where('city', '==', 'Salinas')
  592. break;
  593. case 63:
  594. query = query.where('city', '==', 'San Germán')
  595. break;
  596. case 64:
  597. query = query.where('city', '==', 'San Juan')
  598. break;
  599. case 65:
  600. query = query.where('city', '==', 'San Lorenzo')
  601. break;
  602. case 66:
  603. query = query.where('city', '==', 'San Sebastián')
  604. break;
  605. case 67:
  606. query = query.where('city', '==', 'Santa Isabel')
  607. break;
  608. case 68:
  609. query = query.where('city', '==', 'Toa Alta')
  610. break;
  611. case 69:
  612. query = query.where('city', '==', 'Toa Baja')
  613. break;
  614. case 70:
  615. query = query.where('city', '==', 'Trujillo Alto')
  616. break;
  617. case 71:
  618. query = query.where('city', '==', 'Utuado')
  619. break;
  620. case 72:
  621. query = query.where('city', '==', 'Vega Alta')
  622. break;
  623. case 73:
  624. query = query.where('city', '==', 'Vega Baja')
  625. break;
  626. case 74:
  627. query = query.where('city', '==', 'Vieques')
  628. break;
  629. case 75:
  630. query = query.where('city', '==', 'Villalba')
  631. break;
  632. case 76:
  633. query = query.where('city', '==', 'Yabucoa')
  634. break;
  635. case 77:
  636. query = query.where('city', '==', 'Yauco')
  637. break;
  638. default:
  639. }
  640. query.get().then(querySnapshot => {
  641. console.log('Total users: ', querySnapshot.size);
  642. //traverse the query snapshot
  643. //add the user to the users array
  644. querySnapshot.forEach(documentSnapshot => {
  645. //save the user id and the user data
  646. const user = {
  647. id: documentSnapshot.id,
  648. data: documentSnapshot.data()
  649. }
  650. users.push(user)
  651. setUsers(users)
  652. });
  653. });
  654. console.log('These are the users after the query is executed: ', users)
  655. }
  656. return (
  657. <ScrollView>
  658. <View style={{ margin: 30 }}>
  659. <View style={{ width: '100%', alignItems: 'center' }}>
  660. <Text style={{ fontSize: 30, paddingBottom: 20 }}>Search</Text>
  661. </View>
  662. <Text style={{ fontSize: 20, paddingBottom: 10 }}>Interpreter city</Text>
  663. <SelectBox
  664. label="Select single"
  665. options={City}
  666. value={selectedCity}
  667. onChange={onChange()}
  668. hideInputFilter={false}
  669. arrowIconColor="#E4CD05"
  670. toggleIconColor='#E4CD05'
  671. searchIconColor='#E4CD05'
  672. />
  673. <Text style={{ fontSize: 20, paddingBottom: 10 }}>Interpreter Tags</Text>
  674. <SelectBox
  675. label="Select multiple"
  676. options={Tags}
  677. selectedValues={selectedTags}
  678. onMultiSelect={onMultiChange()}
  679. onTapClose={onMultiChange()}
  680. isMulti
  681. arrowIconColor='#E4CD05'
  682. toggleIconColor='#E4CD05'
  683. searchIconColor='#E4CD05'
  684. multiOptionContainerStyle = {{
  685. backgroundColor: '#E4CD05',
  686. borderColor: '#E4CD05',
  687. borderWidth: 1,
  688. borderRadius: 5,
  689. marginBottom: 10,
  690. marginTop: 10,
  691. padding: 10,
  692. }}
  693. multiOptionsLabelStyle = {{
  694. color: '#000000',
  695. fontSize: 20,
  696. }}
  697. />
  698. {/* button that will fetch the users */}
  699. <Button title='Buscar' onPress={() => fetchUsers(selectedTags, selectedCity)}/>
  700. <FlatList
  701. numColumns={1}
  702. horizontal={false}
  703. data={users}
  704. renderItem={({ item, }) => {
  705. return (
  706. <View>
  707. <View style={{ flexDirection: "row", paddingBottom: 20, paddingTop: 20, justifyContent: "space-between" }}>
  708. <Text>{item.data.username}</Text>
  709. <Text>{item.data.precio}</Text>
  710. <Button title='Buscar' onPress={() => { dothing(item.id, item.data.markedDates, item.data.push_token, u_token, item.data.username) }}/>
  711. </View>
  712. <View style={{ borderBottomColor: 'black', borderBottomWidth: 1 }} />
  713. </View>
  714. )
  715. }}
  716. />
  717. </View>
  718. </ScrollView>
  719. );
  720. function onMultiChange() {
  721. return (item) => setSelectedTags(xorBy(selectedTags, [item], 'id'))
  722. }
  723. function onChange(){
  724. return (item) => setSelectedCity(item)
  725. }
  726. function dothing(item_id, item_dates, i_token, u_token, I_username) {
  727. console.log('This is the item id: ', item_id, "With i_token: ", i_token, " u_token : ", u_token)
  728. console.log('These are the marked dates', item_dates)
  729. 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})
  730. }
  731. }
  732. const styles = StyleSheet.create({
  733. button: {
  734. alignItems: "center",
  735. backgroundColor: 'transparent'
  736. },
  737. });
  738. export default Search