Latest changes and some test implementation

App.js

@@ -129,4 +129,4 @@ vars = {
 }
 
 
-export default App
+export default App

Datos.js

@@ -1,277 +1,296 @@
-import React, {useState} from 'react';
-import { View, Text, Pressable, StyleSheet} from 'react-native';
-import DropDownPicker from 'react-native-dropdown-picker';
-import {styles} from "./styles"
-  
-const queryBase = "https://api.census.gov/data/2020/acs/acs5/profile?get=group"
-const queryEnd = "&in=state:72"
-var table = ""
-var pueblo = ""
-
-//where data will be stored
-var information = "data goes here"
-
-function Picker() {    
-
-    //table to pick from
-  
-  
-  const [openTable, setOpenTable] = useState(false);
-  const [valueTable, setValueTable] = useState(null);
-  const [table, setTable] = useState([
-    {label:'DP02PR', value: 'DP02PR'},
-    {label:'DP03', value: 'DP03'},
-	{label:'DP04', value: 'DP04'},
-    {label:'DP05', value: 'DP05'},
-  ]);
-    
-  //cambiar pueblo
-  
-  
-  //pueblo
-  const [openPueblo, setOpenPueblo] = useState(false);
-  const [valuePueblo, setValuePueblo] = useState(null);
-  const [pueblo, setPueblo] = useState([
-    {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'}
-  ]);
-  
-
-    return (
-        <View>
-            <DropDownPicker
-                open={openTable}
-                value={valueTable}
-                items={table}
-                setOpen={setOpenTable}
-                setValue={setValueTable}
-                setItems={setTable}
-                onChangeValue = {(valueTable) => {
-                    updateTable(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) => {
-                    updatePueblo(valuePueblo);
-                }}
-                onOpen = {() => {setOpenTable(false)}}
-                zIndex={1000}
-                zIndexInverse={3000}
-                placeholder="Pueblo"
-                searchPlaceholder="Busqueda..."
-            />
-                
-        </View>
-
-    );
-}
-
-
-        
-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;
-            organize()
-            }
-        };
-        
-        xhttp.open("GET", query, true);
-        xhttp.send();  
-        }
-        
-    function fetchData() {
-            
-        console.log("fetching data")
-        var query = queryBase + "(" + table + ")&for=county:" + pueblo + queryEnd 
-        
-        if(pueblo && table)
-        {loadDoc(query)}
-
-        else
-            {Alert.alert("Please fill every parameter before calling!")}
-            
-    }
-
-
-
-//organize data make it pretty
-//add loading thing while this organizes all the data !!!
-
-function organize(){
-	
-	var stringDiv = JSON.stringify(information)
-	stringDiv = stringDiv.replace('[[', '');
-	stringDiv = stringDiv.replace(']]', '');
-	stringDiv = stringDiv.split(',')
-	//create smaller array variables
-	let variables = []
-	let value = []
-	let est = []
-	
-	
-	//theres a better way to do this but im not fixing it rn
-	for(let i = 0; i<stringDiv.length; i++){
-
-		if(i<stringDiv.length/3)
-		    {variables.push(stringDiv[i])}
-		else if(i<stringDiv.length/3*2)
-		    {value.push(stringDiv[i])}
-		else
-            {est.push(stringDiv[i])}
-	}
-	
-	//anyways this to format it
-	
-	console.log("vars:",variables)
-	console.log("val:",value)
-	console.log("est:",est)
-
-	
-}
-
-function json_2_csv(information){
-
-	const csv = parse(obj);
-	console.log(csv);
-}
-
-//fix
-
-DropDownPicker.setListMode("SCROLLVIEW")
-
-
-//data parsing goes here
-function getInfo(){
-	if(!information)
-	{Alert.alert("Please try again later! Error retriving data")}
-	else
-	{return information}
-}
-
-//data display
-
-class DataButton extends React.Component{
-	
-	state = {
-		click: false
-	}
-	
-	pullData = () => {fetchData(); this.setState({click: true})}
-	
-	
-	render() {
-		return(
-            <View style = {styles.container}>
-                    
-                    <Pressable style={styles.buttons} onPress = {this.pullData}>
-                        <Text style={styles.text}> Fetch Data</Text>
-                    </Pressable>
-                   
-                        <Text style={styles.sub}>{getInfo()}</Text> 
-                    
-            </View>
-	    );
-    }	
-}
-
+import React, {useState} from 'react';
+import { View, Text, Pressable, StyleSheet, Alert} from 'react-native';
+import DropDownPicker from 'react-native-dropdown-picker';
+import {styles} from "./styles"
+  
+
+var table = ""
+var pueblo = ""
+
+//where data will be stored
+var information
+
+function Picker() {    
+
+    //table to pick from
+  
+  
+  const [openTable, setOpenTable] = useState(false);
+  const [valueTable, setValueTable] = useState(null);
+  const [table, setTable] = useState([
+    {label:'DP02PR', value: 'DP02PR'},
+    {label:'DP03', value: 'DP03'},
+	{label:'DP04', value: 'DP04'},
+    {label:'DP05', value: 'DP05'},
+  ]);
+    
+  //cambiar pueblo
+  
+  
+  //pueblo
+  const [openPueblo, setOpenPueblo] = useState(false);
+  const [valuePueblo, setValuePueblo] = useState(null);
+  const [pueblo, setPueblo] = useState([
+    {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'}
+  ]);
+  
+
+    return (
+        <View>
+            <DropDownPicker
+                open={openTable}
+                value={valueTable}
+                items={table}
+                setOpen={setOpenTable}
+                setValue={setValueTable}
+                setItems={setTable}
+                onChangeValue = {(valueTable) => {
+                    updateTable(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) => {
+                    updatePueblo(valuePueblo);
+                }}
+                onOpen = {() => {setOpenTable(false)}}
+                zIndex={1000}
+                zIndexInverse={3000}
+                placeholder="Pueblo"
+                searchPlaceholder="Busqueda..."
+            />
+                
+        </View>
+
+    );
+}
+
+
+        
+function updateTable(value){
+    table = value
+}
+        
+function updatePueblo(value){
+    pueblo = value
+}
+        
+//calls data query
+function loadDoc(query) {
+	console.log("load")
+    var xhttp = new XMLHttpRequest();
+    xhttp.onreadystatechange = function() {
+        if (this.readyState == 4) {
+            information = this.responseText;
+			
+			if(this.status == 200){console.log("received response");organize()}
+            }
+        }
+        xhttp.open("GET", query, true);
+        xhttp.send(null);  
+        }
+        
+		
+function fetchData() {
+            
+        var query = "http://127.0.0.1:5378/table?table=" + table + "&municipality=" + pueblo 
+        if(pueblo && table)
+        {loadDoc(query)}
+
+        else
+        {Alert.alert("Please fill every parameter before calling!")}
+            
+    }
+
+
+
+//organize data make it pretty
+//add loading thing while this organizes all the data !!!
+
+function organize(){
+
+	console.log(information)
+	
+	let bigData = JSON.parse(information)
+	
+	/*
+	var stringDiv = JSON.stringify(information)
+	stringDiv = stringDiv.replace('[[', '');
+	stringDiv = stringDiv.replace(']]', '');
+	stringDiv = stringDiv.split(',')
+	//create smaller array variables
+	let variables = []
+	let value = []
+	let est = []
+	
+	
+	//theres a better way to do this but im not fixing it rn
+	for(let i = 0; i<stringDiv.length; i++){
+
+		if(i<stringDiv.length/3)
+		    {variables.push(stringDiv[i])}
+		else if(i<stringDiv.length/3*2)
+		    {value.push(stringDiv[i])}
+		else
+            {est.push(stringDiv[i])}
+	}
+	
+	//anyways this to format it
+	
+	console.log("vars:",variables)
+	console.log("val:",value)
+	console.log("est:",est)
+	*/
+
+	
+}
+
+function json_2_csv(information){
+
+	const csv = parse(obj);
+	console.log(csv);
+}
+
+//fix
+
+DropDownPicker.setListMode("SCROLLVIEW")
+
+
+//data parsing goes here
+function getInfo(){
+	if(!information)
+	{Alert.alert("Please try again later! Error retriving data")}
+	else
+	{return information}
+}
+
+//data display
+
+class DataButton extends React.Component{
+	
+	
+	state = {
+		updated: 1,
+		notUpdated: 0
+	}
+	
+	pullData = () => {fetchData(); this.setState({current: 1})}
+	
+	
+	//the reason you need to press the button twice is bc the http request doesnt finish in time
+	//for information to be updated before its rerendered
+	componentDidUpdate(){
+		console.log(this.state)
+		if(this.state.current == 1){
+			console.log("updating")
+			this.setState({current: 0})
+		}
+	}
+	
+	state = {current: 0}
+	
+	render() {
+		return(
+            <View style = {styles.container}>
+                    
+                    <Pressable style={styles.buttons} onPress = {this.pullData}>
+                        <Text style={styles.text}> Fetch Data</Text>
+                    </Pressable>
+                   
+                        <Text style={styles.sub}>{information}</Text> 
+                    
+            </View>
+	    );
+    }	
+}
+
 export { Picker, updateTable, updatePueblo,loadDoc,fetchData,DataButton};