Merge branch 'Freehand' of https://git.ccom.uprrp.edu/ccorrada/ErEduGilMor

config/availability.js

@@ -1,323 +1,5 @@
 export const availability = [
-    {
-        name: 'Cities',
-        id: 0,
-        children: [
-            {
-                name: 'Adjuntas',
-                id: 0,
-            },
-            {
-                name: 'Aguada',
-                id: 1,
-            },
-            {
-                name: 'Aguadilla',
-                id: 2,
-            },
-            {
-                name: 'Aguas Buenas',
-                id: 3,
-            },
-            {
-                name: 'Aibonito',
-                id: 4,
-            },
-            {
-                name: 'Arecibo',
-                id: 5,
-            },
-            {
-                name: 'Arroyo',
-                id: 6,
-            },
-            {
-                name: 'Añasco',
-                id: 7,
-            },
-            {
-                name: 'Barceloneta',
-                id: 8,
-            },
-            {
-                name: 'Barranquitas',
-                id: 9,
-            },
-            {
-                name: 'Bayamón',
-                id: 10,
-            },
-            {
-                name: 'Cabo Rojo',
-                id: 11,
-            },
-            {
-                name: 'Caguas',
-                id: 12,
-            },
-            {
-                name: 'Camuy',
-                id: 13,
-            },
-            {
-                name: 'Canóvanas',
-                id: 14,
-            },
-            {
-                name: 'Carolina',
-                id: 15,
-            },
-            {
-                name: 'Cataño',
-                id: 16,
-            },
-            {
-                name: 'Cayey',
-                id: 17,
-            },
-            {
-                name: 'Ceiba',
-                id: 18,
-            },
-            {
-                name: 'Ciales',
-                id: 19,
-            },
-            {
-                name: 'Cidra',
-                id: 20,
-            },
-            {
-                name: 'Coamo',
-                id: 21,
-            },
-            {
-                name: 'Comerío',
-                id: 22,
-            },
-            {
-                name: 'Corozal',
-                id: 23,
-            },
-            {
-                name: 'Culebra',
-                id: 24,
-            },
-            {
-                name: 'Dorado',
-                id: 25,
-            },
-            {
-                name: 'Fajardo',
-                id: 26,
-            },
-            {
-                name: 'Florida',
-                id: 27,
-            },
-            {
-                name: 'Guayama',
-                id: 28,
-            },
-            {
-                name: 'Guayanilla',
-                id: 29,
-            },
-            {
-                name: 'Guaynabo',
-                id: 30,
-            },
-            {
-                name: 'Gurabo',
-                id: 31,
-            },
-            {
-                name: 'Guánica',
-                id: 32,
-            },
-            {
-                name: 'Hatillo',
-                id: 33,
-            },
-            {
-                name: 'Hormigueros',
-                id: 34,
-            },
-            {
-                name: 'Humacao',
-                id: 35,
-            },
-            {
-                name: 'Isabela',
-                id: 36,
-            },
-            {
-                name: 'Jayuya',
-                id: 37,
-            },
-            {
-                name: 'Juana Díaz',
-                id: 38,
-            },
-            {
-                name: 'Juncos',
-                id: 39,
-            },
-            {
-                name: 'Lajas',
-                id: 40,
-            },
-            {
-                name: 'Lares',
-                id: 41,
-            },
-            {
-                name: 'Las Marías',
-                id: 42,
-            },
-            {
-                name: 'Las Piedras',
-                id: 43,
-            },
-            {
-                name: 'Loíza',
-                id: 44,
-            },
-            {
-                name: 'Luquillo',
-                id: 45,
-            },
-            {
-                name: 'Manatí',
-                id: 46,
-            },
-            {
-                name: 'Maricao',
-                id: 47,
-            },
-            {
-                name: 'Maunabo',
-                id: 48,
-            },
-            {
-                name: 'Mayagüez',
-                id: 49,
-            },
-            {
-                name: 'Moca',
-                id: 50,
-            },
-            {
-                name: 'Morovis',
-                id: 51,
-            },
-            {
-                name: 'Naguabo',
-                id: 52,
-            },
-            {
-                name: 'Naranjito',
-                id: 53,
-            },
-            {
-                name: 'Orocovis',
-                id: 54,
-            },
-            {
-                name: 'Patillas',
-                id: 55,
-            },
-            {
-                name: 'Peñuelas',
-                id: 56,
-            },
-            {
-                name: 'Ponce',
-                id: 57,
-            },
-            {
-                name: 'Quebradillas',
-                id: 58,
-            },
-            {
-                name: 'Rincón',
-                id: 59,
-            },
-            {
-                name: 'Rio Grande',
-                id: 60,
-            },
-            {
-                name: 'Sabana Grande',
-                id: 61,
-            },
-            {
-                name: 'Salinas',
-                id: 62,
-            },
-            {
-                name: 'San Germán',
-                id: 63,
-            },
-            {
-                name: 'San Juan',
-                id: 64,
-            },
-            {
-                name: 'San Lorenzo',
-                id: 65,
-            },
-            {
-                name: 'San Sebastián',
-                id: 66,
-            },
-            {
-                name: 'Santa Isabel',
-                id: 67,
-            },
-            {
-                name: 'Toa Alta',
-                id: 68,
-            },
-            {
-                name: 'Toa Baja',
-                id: 69,
-            },
-            {
-                name: 'Trujillo Alto',
-                id: 70,
-            },
-            {
-                name: 'Utuado',
-                id: 71,
-            },
-            {
-                name: 'Vega Alta',
-                id: 72,
-            },
-            {
-                name: 'Vega Baja',
-                id: 73,
-            },
-            {
-                name: 'Vieques',
-                id: 74,
-            },
-            {
-                name: 'Villalba',
-                id: 75,
-            },
-            {
-                name: 'Yabucoa',
-                id: 76,
-            },
-            {
-                name: 'Yauco',
-                id: 77,
-            },
-        ],
-    },
-
+   
     {
         name: 'Languages',
         id: 1,

screens/main/AvailabilityScreen.js

@@ -7,6 +7,7 @@ import SectionedMultiSelect from 'react-native-sectioned-multi-select';
 import Icon from 'react-native-vector-icons/MaterialIcons';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
+import { Picker } from "@react-native-picker/picker";
 
 import { fetchUser } from "../../redux/actions";
 import { styles } from "../../config/styles";
@@ -16,13 +17,16 @@ export class AvailabilityScreen extends Component {
     constructor(props) {
         super(props);
         this.state = {
+            //x : this.route.params.availabilityData.selectedItems,
+            //y : this.route.params.availabilityData.markedDates,
             english: false,
             spanish: false,
             virtual: false,
             face_to_face: false,
             personal: false,
             group: false,
-            cities: [],
+            city: 'San Juan',
+            //cities: [],
             selectedItems: [],
             markedDates: {}
         };
@@ -33,6 +37,12 @@ export class AvailabilityScreen extends Component {
     };
 
     componentDidMount(){
+        /*if (x != undefined){
+            this.setState({selectedItems : x});
+        };
+        if (y != undefined){
+            this.setState({markedDates : y});
+        }*/
         this.props.fetchUser();
         this.forceUpdate(() => {this.handleUpdate()})
     };
@@ -40,10 +50,11 @@ export class AvailabilityScreen extends Component {
     handleUpdate(){
         const { currentUser } = this.props;
         if (currentUser != undefined){
-            if (currentUser.hasOwnProperty('selectedItems') && currentUser.hasOwnProperty('markedDates'))
+            if (currentUser.hasOwnProperty('selectedItems') && currentUser.hasOwnProperty('markedDates') && currentUser.hasOwnProperty('city'))
             this.setState( {selectedItems: currentUser.selectedItems});
             this.setState( {markedDates: currentUser.markedDates});
-        }    
+            this.setState({city: currentUser.city})
+        }
     };
 
     onSave(){
@@ -79,9 +90,9 @@ export class AvailabilityScreen extends Component {
                     }
                 }
             }
-            else{
+            /*else{
                 this.state.cities.push(value);
-            }
+            }*/
         })
         firebase.firestore().collection('Interpreters')
             .doc(firebase.auth().currentUser.uid)
@@ -123,6 +134,87 @@ export class AvailabilityScreen extends Component {
                     onSelectedItemsChange={this.onSelectedItemsChange}
                     selectedItems={this.state.selectedItems}
                 />
+                <Picker selectedValue={this.state.city} onValueChange={(itemValue, itemIndex) => this.setState({city : itemValue})}>
+                    <Picker.Item label='Adjuntas' value={'Adjuntas'}/>
+                    <Picker.Item label='Aguada' value={'Aguada'}/>
+                    <Picker.Item label='Adjuntas' value={'Adjuntas'}/>
+                    <Picker.Item label='Aguadilla' value={'Aguadilla'}/>
+                    <Picker.Item label='Aguas Buenas' value={'Aguas Buenas'}/>
+                    <Picker.Item label='Aibonito' value={'Aibonito'}/>
+                    <Picker.Item label='Arecibo' value={'Arecibo'}/>
+                    <Picker.Item label='Arroyo' value={'Arroyo'}/>
+                    <Picker.Item label='Añasco' value={'Añasco'}/>
+                    <Picker.Item label='Barceloneta' value={'Barceloneta'}/>
+                    <Picker.Item label='Barranquitas' value={'Barranquitas'}/>
+                    <Picker.Item label='Bayamón' value={'Bayamón'}/>
+                    <Picker.Item label='Cabo Rojo' value={'Cabo Rojo'}/>
+                    <Picker.Item label='Caguas' value={'Caguas'}/>
+                    <Picker.Item label='Camuy' value={'Camuy'}/>
+                    <Picker.Item label='Canóvanas' value={'Canóvanas'}/>
+                    <Picker.Item label='Carolina' value={'Carolina'}/>
+                    <Picker.Item label='Cataño' value={'Cataño'}/>
+                    <Picker.Item label='Cayey' value={'Cayey'}/>
+                    <Picker.Item label='Ceiba' value={'Ceiba'}/>
+                    <Picker.Item label='Ciales' value={'Ciales'}/>
+                    <Picker.Item label='Cidra' value={'Cidra'}/>
+                    <Picker.Item label='Coamo' value={'Coamo'}/>
+                    <Picker.Item label='Comerío' value={'Comerío'}/>
+                    <Picker.Item label='Corozal' value={'Corozal'}/>
+                    <Picker.Item label='Culebra' value={'Culebra'}/>
+                    <Picker.Item label='Dorado' value={'Dorado'}/>
+                    <Picker.Item label='Fajardo' value={'Fajardo'}/>
+                    <Picker.Item label='Florida' value={'Florida'}/>
+                    <Picker.Item label='Guayama' value={'Guayama'}/>
+                    <Picker.Item label='Guayanilla' value={'Guayanilla'}/>
+                    <Picker.Item label='Guaynabo' value={'Guaynabo'}/>
+                    <Picker.Item label='Gurabo' value={'Gurabo'}/>
+                    <Picker.Item label='Guánica' value={'Guánica'}/>
+                    <Picker.Item label='Hatillo' value={'Hatillo'}/>
+                    <Picker.Item label='Hormigueros' value={'Hormigueros'}/>
+                    <Picker.Item label='Humacao' value={'Humacao'}/>
+                    <Picker.Item label='Isabela' value={'Isabela'}/>
+                    <Picker.Item label='Jayuya' value={'Jayuya'}/>
+                    <Picker.Item label='Juana Díaz' value={'Juana Díaz'}/>
+                    <Picker.Item label='Juncos' value={'Juncos'}/>
+                    <Picker.Item label='Lajas' value={'Lajas'}/>
+                    <Picker.Item label='Lares' value={'Lares'}/>
+                    <Picker.Item label='Las Marías' value={'Las Marías'}/>
+                    <Picker.Item label='Las Piedras' value={'Las Piedras'}/>
+                    <Picker.Item label='Loíza' value={'Loíza'}/>
+                    <Picker.Item label='Luquillo' value={'Luquillo'}/>
+                    <Picker.Item label='Manatí' value={'Manatí'}/>
+                    <Picker.Item label='Maricao' value={'Maricao'}/>
+                    <Picker.Item label='Maunabo' value={'Maunabo'}/>
+                    <Picker.Item label='Mayagüez' value={'Mayagüez'}/>
+                    <Picker.Item label='Moca' value={'Moca'}/>
+                    <Picker.Item label='Morovis' value={'Morovis'}/>
+                    <Picker.Item label='Naguabo' value={'Naguabo'}/>
+                    <Picker.Item label='Naranjito' value={'Naranjito'}/>
+                    <Picker.Item label='Orocovis' value={'Orocovis'}/>
+                    <Picker.Item label='Patillas' value={'Patillas'}/>
+                    <Picker.Item label='Peñuelas' value={'Peñuelas'}/>
+                    <Picker.Item label='Ponce' value={'Ponce'}/>
+                    <Picker.Item label='Quebradillas' value={'Quebradillas'}/>
+                    <Picker.Item label='Rincón' value={'Rincón'}/>
+                    <Picker.Item label='Rio Grande' value={'Rio Grande'}/>
+                    <Picker.Item label='Sabana Grande' value={'Sabana Grande'}/>
+                    <Picker.Item label='Salinas' value={'Salinas'}/>
+                    <Picker.Item label='San Germán' value={'San Germán'}/>
+                    <Picker.Item label='San Juan' value={'San Juan'}/>
+                    <Picker.Item label='San Lorenzo' value={'San Lorenzo'}/>
+                    <Picker.Item label='San Sebastián' value={'San Sebastián'}/>
+                    <Picker.Item label='Santa Isabel' value={'Santa Isabel'}/>
+                    <Picker.Item label='Toa Alta' value={'Toa Alta'}/>
+                    <Picker.Item label='Toa Baja' value={'Toa Baja'}/>
+                    <Picker.Item label='Trujillo Alto' value={'Trujillo Alto'}/>
+                    <Picker.Item label='Utuado' value={'Utuado'}/>
+                    <Picker.Item label='Vega Alta' value={'Vega Alta'}/>
+                    <Picker.Item label='Vega Baja' value={'Vega Baja'}/>
+                    <Picker.Item label='Vieques' value={'Vieques'}/>
+                    <Picker.Item label='Villalba' value={'Villalba'}/>
+                    <Picker.Item label='Yabucoa' value={'Yabucoa'}/>
+                    <Picker.Item label='Yauco' value={'Yauco'}/>
+                </Picker>
                 <Button title='Save' onPress={() => {this.onSave()}}/>
             </ScrollView>
         );

screens/main/Search.js

@@ -44,7 +44,326 @@ const Tags = [
 ]
 
 
+const City = [
+  {
+    item: 'None',
+    id: -1,
+  },
+  {
+      item: 'Adjuntas',
+      id: 0,
+  },
+  {
+      item: 'Aguada',
+      id: 1,
+  },
+  {
+      item: 'Aguadilla',
+      id: 2,
+  },
+  {
+      item: 'Aguas Buenas',
+      id: 3,
+  },
+  {
+      item: 'Aibonito',
+      id: 4,
+  },
+  {
+      item: 'Arecibo',
+      id: 5,
+  },
+  {
+      item: 'Arroyo',
+      id: 6,
+  },
+  {
+      item: 'Añasco',
+      id: 7,
+  },
+  {
+      item: 'Barceloneta',
+      id: 8,
+  },
+  {
+      item: 'Barranquitas',
+      id: 9,
+  },
+  {
+      item: 'Bayamón',
+      id: 10,
+  },
+  {
+      item: 'Cabo Rojo',
+      id: 11,
+  },
+  {
+      item: 'Caguas',
+      id: 12,
+  },
+  {
+      item: 'Camuy',
+      id: 13,
+  },
+  {
+      item: 'Canóvanas',
+      id: 14,
+  },
+  {
+      item: 'Carolina',
+      id: 15,
+  },
+  {
+      item: 'Cataño',
+      id: 16,
+  },
+  {
+      item: 'Cayey',
+      id: 17,
+  },
+  {
+      item: 'Ceiba',
+      id: 18,
+  },
+  {
+      item: 'Ciales',
+      id: 19,
+  },
+  {
+      item: 'Cidra',
+      id: 20,
+  },
+  {
+      item: 'Coamo',
+      id: 21,
+  },
+  {
+      item: 'Comerío',
+      id: 22,
+  },
+  {
+      item: 'Corozal',
+      id: 23,
+  },
+  {
+      item: 'Culebra',
+      id: 24,
+  },
+  {
+      item: 'Dorado',
+      id: 25,
+  },
+  {
+      item: 'Fajardo',
+      id: 26,
+  },
+  {
+      item: 'Florida',
+      id: 27,
+  },
+  {
+      item: 'Guayama',
+      id: 28,
+  },
+  {
+      item: 'Guayanilla',
+      id: 29,
+  },
+  {
+      item: 'Guaynabo',
+      id: 30,
+  },
+  {
+      item: 'Gurabo',
+      id: 31,
+  },
+  {
+      item: 'Guánica',
+      id: 32,
+  },
+  {
+      item: 'Hatillo',
+      id: 33,
+  },
+  {
+      item: 'Hormigueros',
+      id: 34,
+  },
+  {
+      item: 'Humacao',
+      id: 35,
+  },
+  {
+      item: 'Isabela',
+      id: 36,
+  },
+  {
+      item: 'Jayuya',
+      id: 37,
+  },
+  {
+      item: 'Juana Díaz',
+      id: 38,
+  },
+  {
+      item: 'Juncos',
+      id: 39,
+  },
+  {
+      item: 'Lajas',
+      id: 40,
+  },
+  {
+      item: 'Lares',
+      id: 41,
+  },
+  {
+      item: 'Las Marías',
+      id: 42,
+  },
+  {
+      item: 'Las Piedras',
+      id: 43,
+  },
+  {
+      item: 'Loíza',
+      id: 44,
+  },
+  {
+      item: 'Luquillo',
+      id: 45,
+  },
+  {
+      item: 'Manatí',
+      id: 46,
+  },
+  {
+      item: 'Maricao',
+      id: 47,
+  },
+  {
+      item: 'Maunabo',
+      id: 48,
+  },
+  {
+      item: 'Mayagüez',
+      id: 49,
+  },
+  {
+      item: 'Moca',
+      id: 50,
+  },
+  {
+      item: 'Morovis',
+      id: 51,
+  },
+  {
+      item: 'Naguabo',
+      id: 52,
+  },
+  {
+      item: 'Naranjito',
+      id: 53,
+  },
+  {
+      item: 'Orocovis',
+      id: 54,
+  },
+  {
+      item: 'Patillas',
+      id: 55,
+  },
+  {
+      item: 'Peñuelas',
+      id: 56,
+  },
+  {
+      item: 'Ponce',
+      id: 57,
+  },
+  {
+      item: 'Quebradillas',
+      id: 58,
+  },
+  {
+      item: 'Rincón',
+      id: 59,
+  },
+  {
+      item: 'Rio Grande',
+      id: 60,
+  },
+  {
+      item: 'Sabana Grande',
+      id: 61,
+  },
+  {
+      item: 'Salinas',
+      id: 62,
+  },
+  {
+      item: 'San Germán',
+      id: 63,
+  },
+  {
+      item: 'San Juan',
+      id: 64,
+  },
+  {
+      item: 'San Lorenzo',
+      id: 65,
+  },
+  {
+      item: 'San Sebastián',
+      id: 66,
+  },
+  {
+      item: 'Santa Isabel',
+      id: 67,
+  },
+  {
+      item: 'Toa Alta',
+      id: 68,
+  },
+  {
+      item: 'Toa Baja',
+      id: 69,
+  },
+  {
+      item: 'Trujillo Alto',
+      id: 70,
+  },
+  {
+      item: 'Utuado',
+      id: 71,
+  },
+  {
+      item: 'Vega Alta',
+      id: 72,
+  },
+  {
+      item: 'Vega Baja',
+      id: 73,
+  },
+  {
+      item: 'Vieques',
+      id: 74,
+  },
+  {
+      item: 'Villalba',
+      id: 75,
+  },
+  {
+      item: 'Yabucoa',
+      id: 76,
+  },
+  {
+      item: 'Yauco',
+      id: 77,
+  },
+  
 
+]
 
 
 function Search({route, navigation }) {
@@ -55,14 +374,18 @@ function Search({route, navigation }) {
   
   const [users, setUsers] = useState([])
   const [selectedTags, setSelectedTags] = useState([])
+  const [selectedCity, setSelectedCity] = useState([])
+
 
   
-  const fetchUsers = (tags) => {
+  const fetchUsers = (tags, city) => {
     
     //if the array that have the interpreter tags
     //and the day tags are empty we dont send the query seeing as the user
     //is not searching for anything yet 
-    if (tags.length === 0) {
+    // console.log(tags.length)
+    // console.log(city.id)
+    if (tags.length === 0 && (typeof city.id ==="undefined" || city.id === -1)) {
       return
     }
 
@@ -101,6 +424,328 @@ function Search({route, navigation }) {
       }
   }
   
+
+    
+    switch(city.id){
+      case 0:
+        query = query.where('city', '==', 'Adjuntas')
+        break;
+
+
+      case 1:
+        query = query.where('city', '==', 'Aguada')
+        break;
+
+      case 2:
+        query = query.where('city', '==', 'Aguadilla')
+        break;
+
+      case 3:
+        query = query.where('city', '==', 'Aguas Buenas')
+        break;
+      
+      case 4:
+        query = query.where('city', '==', 'Aibonito')
+        break;
+      
+      case 5:
+        query = query.where('city', '==', 'Arecibo')
+        break;
+      
+      case 6:
+        query = query.where('city', '==', 'Arroyo')
+        break;
+      
+      case 7:
+        query = query.where('city', '==', 'Añasco')
+        break;
+      
+      case 8:
+        query = query.where('city', '==', 'Barceloneta')
+        break;
+      
+      case 9:
+        query = query.where('city', '==', 'Barranquitas')
+        break;
+      
+      case 10:
+        query = query.where('city', '==', 'Bayamón')
+        break;
+      
+      case 11:
+        query = query.where('city', '==', 'Cabo Rojo')
+        break;
+      
+      case 12:
+        query = query.where('city', '==', 'Caguas')
+        break;
+      
+      case 13:
+        query = query.where('city', '==', 'Camuy')
+        break;
+      
+      case 14:
+        query = query.where('city', '==', 'Canóvanas')
+        break;
+      
+      case 15:
+        query = query.where('city', '==', 'Carolina')
+        break;
+
+      case 16:
+        query = query.where('city', '==', 'Cataño')
+        break;
+
+      case 17:
+        query = query.where('city', '==', 'Cayey')
+        break;
+
+      case 18:
+        query = query.where('city', '==', 'Ceiba')
+        break;
+
+      case 19:
+        query = query.where('city', '==', 'Ciales')
+        break;
+      
+      case 20:
+        query = query.where('city', '==', 'Cidra')
+        break;
+
+      case 21:
+        query = query.where('city', '==', 'Coamo')
+        break;
+
+      case 22:
+        query = query.where('city', '==', 'Comerío')
+        break;
+
+      case 23:
+        query = query.where('city', '==', 'Corozal')
+        break;
+
+      case 24:
+        query = query.where('city', '==', 'Culebra')
+        break;
+      
+      case 25:
+        query = query.where('city', '==', 'Dorado')
+        break;
+
+      case 26:
+        query = query.where('city', '==', 'Fajardo')
+        break;
+
+      case 27:
+        query = query.where('city', '==', 'Florida')
+        break;
+
+      case 28:
+        query = query.where('city', '==', 'Guánica')
+        break;
+      
+      case 29:
+        query = query.where('city', '==', 'Guayama')
+        break;
+
+      case 30:
+        query = query.where('city', '==', 'Guayanilla')
+        break;
+      
+      case 31:
+        query = query.where('city', '==', 'Guaynabo')
+        break;
+
+      case 32:
+        query = query.where('city', '==', 'Gurabo')
+        break;
+
+      case 33:
+        query = query.where('city', '==', 'Hatillo')
+        break;
+
+      case 34:
+        query = query.where('city', '==', 'Hormigueros')
+        break;
+
+      case 35:
+        query = query.where('city', '==', 'Humacao')
+        break;
+
+      case 36:
+        query = query.where('city', '==', 'Isabela')
+        break;
+
+      case 37:
+        query = query.where('city', '==', 'Jayuya')
+        break;
+
+      case 38:
+        query = query.where('city', '==', 'Juana Díaz')
+        break;
+      
+      case 39:
+        query = query.where('city', '==', 'Juncos')
+        break;
+
+      case 40:
+        query = query.where('city', '==', 'Lajas')
+        break;
+
+      case 41:
+        query = query.where('city', '==', 'Lares')
+        break;
+
+      case 42:
+        query = query.where('city', '==', 'Las Marías')
+        break;
+
+      case 43:
+        query = query.where('city', '==', 'Las Piedras')
+        break;
+
+      case 44:
+        query = query.where('city', '==', 'Loíza')
+        break;
+
+      case 45:
+        query = query.where('city', '==', 'Luquillo')
+        break;
+
+      case 46:
+        query = query.where('city', '==', 'Manatí')
+        break;
+
+      case 47:
+        query = query.where('city', '==', 'Maricao')
+        break;
+
+      case 48:
+        query = query.where('city', '==', 'Maunabo')
+        break;
+
+      case 49:
+        query = query.where('city', '==', 'Mayagüez')
+        break;
+
+      case 50:
+        query = query.where('city', '==', 'Moca')
+        break;
+
+      case 51:
+        query = query.where('city', '==', 'Morovis')
+        break;
+
+      case 52:
+        query = query.where('city', '==', 'Naguabo')
+        break;
+
+      case 53:
+        query = query.where('city', '==', 'Naranjito')
+        break;
+
+      case 54:
+        query = query.where('city', '==', 'Orocovis')
+        break;
+
+      case 55:
+        query = query.where('city', '==', 'Patillas')
+        break;
+
+      case 56:
+        query = query.where('city', '==', 'Peñuelas')
+        break;
+
+      case 57:
+        query = query.where('city', '==', 'Ponce')
+        break;
+
+      case 58:
+        query = query.where('city', '==', 'Quebradillas')
+        break;
+
+      case 59:
+        query = query.where('city', '==', 'Rincón')
+        break;
+
+      case 60:
+        query = query.where('city', '==', 'Río Grande')
+        break;
+
+      case 61:
+        query = query.where('city', '==', 'Sabana Grande')
+        break;
+
+      case 62:
+        query = query.where('city', '==', 'Salinas')
+        break;
+
+      case 63:
+        query = query.where('city', '==', 'San Germán')
+        break;
+
+      case 64:
+        query = query.where('city', '==', 'San Juan')
+        break;
+        
+
+      case 65:
+        query = query.where('city', '==', 'San Lorenzo')
+        break;
+
+      case 66:
+        query = query.where('city', '==', 'San Sebastián')
+        break;
+
+      case 67:
+        query = query.where('city', '==', 'Santa Isabel')
+        break;
+
+      case 68:
+        query = query.where('city', '==', 'Toa Alta')
+        break;
+
+      case 69:
+        query = query.where('city', '==', 'Toa Baja')
+        break;
+
+      case 70:
+        query = query.where('city', '==', 'Trujillo Alto')
+        break;
+
+      case 71:
+        query = query.where('city', '==', 'Utuado')
+        break;
+
+      case 72:
+        query = query.where('city', '==', 'Vega Alta')
+        break;
+
+      case 73:
+        query = query.where('city', '==', 'Vega Baja')
+        break;
+
+      case 74:
+        query = query.where('city', '==', 'Vieques')
+        break;
+
+      case 75:
+        query = query.where('city', '==', 'Villalba')
+        break;
+
+      case 76:
+        query = query.where('city', '==', 'Yabucoa')
+        break;
+
+      case 77:
+        query = query.where('city', '==', 'Yauco')
+        break;
+
+      default:
+
+    }
+
+  
     query.get().then(querySnapshot => {
       console.log('Total users: ', querySnapshot.size);
       //traverse the query snapshot
@@ -125,10 +770,33 @@ function Search({route, navigation }) {
     <ScrollView>
     <View style={{ margin: 30 }}>
       <View style={{ width: '100%', alignItems: 'center' }}>
-        <Text style={{ fontSize: 30, paddingBottom: 20 }}>Busqueda</Text>
+        <Text style={{ fontSize: 30, paddingBottom: 20 }}>Search</Text>
       </View>
-      <Text style={{ fontSize: 20, paddingBottom: 10 }}>Filtro de Interpretes</Text>
+
+      <Text style={{ fontSize: 20, paddingBottom: 10 }}>Interpreter city</Text>
+      <SelectBox
+        label="Select single"
+        options={City}
+        value={selectedCity}
+        onChange={onChange()}
+        hideInputFilter={false}
+        arrowIconColor="#E4CD05"
+        toggleIconColor='#E4CD05'
+        searchIconColor='#E4CD05'
+
+
+      />
+      <Text style={{ fontSize: 20, paddingBottom: 10 }}>Interpreter Tags</Text>
+
+      
+
       <SelectBox
+        label="Select multiple"
+        options={Tags}
+        selectedValues={selectedTags}
+        onMultiSelect={onMultiChange()}
+        onTapClose={onMultiChange()}
+        isMulti
         arrowIconColor='#E4CD05'
         toggleIconColor='#E4CD05'
         searchIconColor='#E4CD05'
@@ -145,16 +813,12 @@ function Search({route, navigation }) {
           color: '#000000',
           fontSize: 20,
         }}
-        label="Select multiple"
-        options={Tags}
-        selectedValues={selectedTags}
-        onMultiSelect={onMultiChange()}
-        onTapClose={onMultiChange()}
-        isMulti
-      />
+
+          />
+
 
       {/* button that will fetch the users */}
-      <Button title='Buscar' onPress={() => fetchUsers(selectedTags)}/>
+      <Button title='Buscar' onPress={() => fetchUsers(selectedTags, selectedCity)}/>
 
 
       <FlatList
@@ -183,6 +847,10 @@ function Search({route, navigation }) {
   function onMultiChange() {
     return (item) => setSelectedTags(xorBy(selectedTags, [item], 'id'))
   }
+
+  function onChange(){
+    return (item) => setSelectedCity(item)
+  }
   
   function dothing(item_id, item_dates, i_token, u_token, I_username) {
     console.log('This is the item id: ', item_id, "With i_token: ", i_token, " u_token : ", u_token)