App

App.js

@@ -22,14 +22,29 @@ function organize(){
 
 DropDownPicker.setListMode("SCROLLVIEW")
 
+//data query variables (global)
+
+const queryBase = "https://api.census.gov/data/2020/acs/acs5/profile?get=group"
+const queryEnd = "&in=state:72"
+var table = ""
+var pueblo = ""
+
+
+function updateTable(value){
+	table = value
+}
+
+function updatePueblo(value){
+	pueblo = value
+}
+
 //calls data query
 function loadDoc(query) {
   var xhttp = new XMLHttpRequest();
   xhttp.onreadystatechange = function() {
     if (this.readyState == 4 && this.status == 200) {
          information = this.responseText;
-		 console.log(information[6])
-		 organize()
+		 //organize()
   }
   };
   xhttp.open("GET", query, true);
@@ -42,6 +57,18 @@ function loadDoc(query) {
 
 
 
+function fetchData() {
+	
+	console.log("fetching data")
+	
+	var query = queryBase + "(" + table + ")&for=county:" + pueblo + queryEnd 
+	
+	console.log(query)
+	
+	loadDoc(query)
+	
+}
+
 //change this to an external css file later
 const styles = StyleSheet.create({
 	
@@ -112,48 +139,41 @@ function importJSON() {
 	return stuff
 }
 
-//calls update to data in data page
-
-function updateInfo(option){
-	
-	switch(option){
-	
-		case 0:
-			break;
-		case 1:
-			loadDoc("https://api.census.gov/data/2020/acs/acs5/profile?get=group(DP02PR)&for=county:127&in=state:72")
-			break;
-		case 2:
-			loadDoc("https://api.census.gov/data/2020/acs/acs5/profile?get=group(DP03)&for=county:127&in=state:72")
-			break;
-		case 3:
-			loadDoc("https://api.census.gov/data/2020/acs/acs5/profile?get=group(DP04)&for=county:127&in=state:72")
-			break;
-		case 4:
-			loadDoc("https://api.census.gov/data/2020/acs/acs5/profile?get=group(DP05)&for=county:127&in=state:72")
-			break;
-		
-	}
-}
-
-
-
 
 //data display
 
-function DataDisplay({option}) {
-  const [tableValue, setTableValue] = useState(0);
-
+function DataDisplay({valueTable, valuePueblo}) {
+  const [tableValue, setTableValue] = useState(null);
+  const [puebloValue, setPuebloValue] = useState(null);
+  
+  console.log("tableOption:",valueTable)
+  console.log("puebloOption:",valuePueblo)
+	
+//theres something wrong with this, its applying the previous value of valueTable and valuePueblo instead of the actual value
 
   useEffect(() => {
-    setTableValue(option * 1);
-	console.log(tableValue)
-    updateInfo(tableValue);
-  }, [option]); // add props as dependencies
-
+    setTableValue(valueTable);
+	console.log("tableValue:",tableValue)
+	//if not undefined
+	if(tableValue){updateTable(tableValue);}   
+  }, [valueTable]); // add props as dependencies
+  
+  useEffect(() => {
+    setPuebloValue(valuePueblo);
+	console.log("puebloValue:",puebloValue)
+    if(puebloValue){updatePueblo(puebloValue)};
+  }, [valuePueblo]); // add props as dependencies
+	
 
   return (
+  <View>
     <Text style={styles.sub}>{information}</Text>
+	<Button
+		onPress = {fetchData()}
+		title = "Fetch Data"
+		color = "black"
+		/>
+   </View>	  
   );
 }
 
@@ -194,44 +214,145 @@ function Picker() {
 	//table to pick from
   
   
-  const [open, setOpen] = useState(false);
-  const [option, setOption] = useState(0);
-  const [value, setValue] = useState(0);
+  const [openTable, setOpenTable] = useState(false);
+  //const [tableOption, setTableOption] = useState(0);
+  const [valueTable, setValueTable] = useState(null);
   const [table, setTable] = useState([
-    {label:'DP02PR', value: 1},
-    {label:'DP03', value: 2},
-	{label:'DP04', value: 3},
-    {label:'DP05', value: 4},
+    {label:'DP02PR', value: 'DP02PR'},
+    {label:'DP03', value: 'DP03'},
+	{label:'DP04', value: 'DP04'},
+    {label:'DP05', value: 'DP05'},
   ]);
     
   //cambiar pueblo
   
-  /*
+  
   //pueblo
-  const [open2, setOpen2] = useState(false);
-  const [value2, setValue2] = useState(null);
+  const [openPueblo, setOpenPueblo] = useState(false);
+  //const [puebloOption, setPuebloOption] = useState(0);
+  const [valuePueblo, setValuePueblo] = useState(null);
   const [pueblo, setPueblo] = useState([
-    {label: 'Apple', value: 'apple'},
-    {label: 'Banana', value: 'banana'}
+    {label: 'Adjuntas', value: '001'},
+    {label: 'Aguada', value: '003'},
+	{label: 'Aguadillas', value: '005'},
+    {label: 'Aguas Buenas', value: '007'},
+	{label: 'Aibonito', value: '009'},
+    {label: 'Añasco', value: '011'},
+	{label: 'Arecibo', value: '013'},
+    {label: 'Arroyo', value: '015'},
+	{label: 'Barceloneta', value: '017'},
+    {label: 'Barranquitas', value: '019'},
+	{label: 'Bayamón', value: '021'},
+    {label: 'Cabo Rojo', value: '023'},
+	{label: 'Caguas', value: '025'},
+    {label: 'Camuy', value: '027'},
+	{label: 'Canóvanas', value: '029'},
+	{label: 'Carolina', value: '031'},
+	{label: 'Cataño', value: '033'},
+	{label: 'Cayey', value: '035'},
+	{label: 'Ceiba', value: '037'},
+	{label: 'Ciales', value: '039'},
+	{label: 'Cidra', value: '041'},
+	{label: 'Coamo', value: '043'},
+	{label: 'Comerío', value: '045'},
+	{label: 'Corozal', value: '047'},
+	{label: 'Culebra', value: '049'},
+	{label: 'Dorado', value: '051'},
+	{label: 'Fajardo', value: '053'},
+	{label: 'Florida', value: '054'},
+	{label: 'Guánica', value: '055'},
+	{label: 'Guayama', value: '057'},
+	{label: 'Guayanilla', value: '059'},
+	{label: 'Guaynabo', value: '061'},	
+	{label: 'Gurabo', value: '063'},
+	{label: 'Hatillo', value: '065'},
+	{label: 'Hormigueros', value: '067'},
+	{label: 'Humacao', value: '069'},
+	{label: 'Isabela', value: '071'},
+	{label: 'Jayuya', value: '073'},
+	{label: 'Juana Díaz', value: '075'},
+	{label: 'Juncos', value: '077'},
+	{label: 'Lajas', value: '079'},
+	{label: 'Lares', value: '081'},
+	{label: 'Las Marías', value: '083'},
+	{label: 'Las Piedras', value: '085'},
+	{label: 'Loíza', value: '087'},
+	{label: 'Luquillo', value: '089'},
+	{label: 'Manatí', value: '091'},
+	{label: 'Maricao', value: '093'},
+	{label: 'Maunabo', value: '095'},
+	{label: 'Mayagüez', value: '097'},
+	{label: 'Moca', value: '099'},
+	{label: 'Morovis', value: '101'},
+	{label: 'Naguabo', value: '103'},
+	{label: 'Naranjito', value: '105'},
+	{label: 'Orocovis', value: '107'},
+	{label: 'Patillas', value: '109'},
+	{label: 'Peñuelas', value: '111'},
+	{label: 'Ponce', value: '113'},
+	{label: 'Quebradillas', value: '115'},
+	{label: 'Rincón', value: '117'},
+	{label: 'Río Grande', value: '119'},
+	{label: 'Sabana Grande', value: '121'},
+	{label: 'Salinas', value: '123'},
+	{label: 'San Germán', value: '125'},
+	{label: 'San Juan', value: '127'},
+	{label: 'San Lorenzo', value: '129'},
+	{label: 'San Sebastián', value: '131'},
+	{label: 'Santa Isabel', value: '133'},
+	{label: 'Toa Alta', value: '135'},
+	{label: 'Toa Baja', value: '137'},
+	{label: 'Trujillo Alto', value: '139'},
+	{label: 'Utuado', value: '141'},
+	{label: 'Vega Alta', value: '143'},
+	{label: 'Vega Baja', value: '145'},
+	{label: 'Vieques', value: '147'},
+	{label: 'Villalba', value: '149'},
+	{label: 'Yabucoa', value: '151'},
+	{label: 'Yauco', value: '153'}
   ]);
-  */
+  
+  
+  //make sure pickers are closed when another opens
+  
 
   return (
   <View>
     <DropDownPicker
-      open={open}
-      value={value}
+      open={openTable}
+      value={valueTable}
       items={table}
-      setOpen={setOpen}
-      setValue={setValue}
+      setOpen={setOpenTable}
+      setValue={setValueTable}
       setItems={setTable}
-	  onChangeValue={(value) => {
-		setOption(current => value);
-		}}
-
+	  //onChangeValue={(valueTable) => {
+	//	setTableOption(current => valueTable);
+	//	}}
+	  onOpen = {() => {setOpenPueblo(false)}}
+	  zIndex={3000}
+	  zIndexInverse={1000}
+	  placeholder="Tabla de Datos"
+    />
+	
+	<DropDownPicker
+      searchable={true}
+      open={openPueblo}
+      value={valuePueblo}
+      items={pueblo}
+      setOpen={setOpenPueblo}
+      setValue={setValuePueblo}
+      setItems={setPueblo}
+	  //onChangeValue={(valuePueblo) => {
+	//	setPuebloOption(current => valuePueblo);
+	//	}}
+	  onOpen = {() => {setOpenTable(false)}}
+	  zIndex={1000}
+      zIndexInverse={3000}
+	  placeholder="Pueblo"
+	  searchPlaceholder="Busqueda..."
     />
 	
-	<DataDisplay option={option} />
+	<DataDisplay valueTable={valueTable} valuePueblo={valuePueblo} />
 	
 	</View>
   );