Merge branch 'SomeBranch' of https://git.ccom.uprrp.edu/CCOM4030/AnCaJuLu into SomeBranch

"added noticias code"

App.js

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

Datos.js

@@ -1,116 +1,19 @@
 import React, {useState} from 'react';
-import { View, Text, Pressable, StyleSheet} from 'react-native';
+import { View, Text, Pressable, StyleSheet, Alert} from 'react-native';
 import DropDownPicker from 'react-native-dropdown-picker';
-//import {styles} from "./styles"
+import { Table, TableWrapper, Row, Rows, Col, Cols, Cell } from 'react-native-table-component';
+import { parse } from 'json2csv'
+import {styles} from "./styles"
   
-const styles = StyleSheet.create({
-	
-	buttons: {
-		flexDirection: 'row',
-		justifyContent: 'center',
-		marginTop: 40,
-		marginBottom: 30,
-		margin: 30,
-		borderColor: "grey",
-		borderRadius: 8,
-		padding: (30, 16),
-		backgroundColor: "black",
-		marginTop: 0,
-	}, 
-	navContainer: {
-	  flexDirection: 'row',
-	  justifyContent: "space-evenly",
-	  borderColor: "black",
-	  borderWidth: 5,
-	  borderRadius: 8,
-	  paddingTop: 20,
-	  backgroundColor: "gray",
-	  marginTop: 5,
-  }, 
-	buttonContainer: {
-	  flexDirection: 'column',
-	  backgroundColor: '#f0f8ff',
-	  alignItems: 'center',
-	  justifyContent: 'center',
-	  paddingTop:100,
-	  marginTop: 40,
-	},
-	container: {
-	  flexDirection: 'column',
-	  justifyContent: 'center',
-	  backgroundColor: '#f0f8ff',
-	  alignItems: 'center',
-	  justifyContent: 'center',
-	  paddingTop:20,
-	  marginTop: 20,
-	},
-	containerbackground:{
-	  
-	  backgroundColor: '#f0f8ff'
-	},
-	intro: {
-		fontWeight: "bold",
-		color:"#black",
-		fontSize: 30,
-	},
-  
-	sub: {
-	  color:"#black",  
-	  fontWeight: "bold",
-	  fontSize: 15,
-	  paddingBottom:10,
-  },
   
-	Navsub: {
-		color:"#black",  
-		fontWeight: "bold",
-		fontSize: 30,
-		paddingBottom:10,
-	},
-	scrollView:{
-		marginHorizontal: 20
-	},
-	listItem:{
-		fontSize: 30,
-		color: "white",
-		textDecorationLines: "underline"
-	},
-	listButtons:{
-		fontSize: 15,
-		color: "white",
-		textDecorationLines: "underline"  
-	},
-	buttonsVer: {
-		flexDirection: 'column',
-		justifyContent: 'center',
-		marginTop: 40,
-		marginBottom: 30,
-		margin: 30,
-		borderColor: "grey",
-	},
-	bottom: {
-	  flex: 0.3,
-	  backgroundColor: "gray",
-	  borderWidth: 5,
-	  alignItems: 'center',
-	  borderBottomLeftRadius: 20,
-	  borderBottomRightRadius: 20,
-	
-  },text: {
-	  fontSize: 16,
-	  lineHeight: 21,
-	  fontWeight: 'bold',
-	  letterSpacing: 0.25,
-	  color: 'white',
-	},
-  });  
-const queryBase = "https://api.census.gov/data/2020/acs/acs5/profile?get=group"
-const queryEnd = "&in=state:72"
+var allData
+var allTitle
+
 var table = ""
 var pueblo = ""
 
 //where data will be stored
-var information = "data goes here"
+var information
 
 function Picker() {    
 
@@ -268,38 +171,86 @@ function updatePueblo(value){
         
 //calls data query
 function loadDoc(query) {
+	console.log("load")
     var xhttp = new XMLHttpRequest();
     xhttp.onreadystatechange = function() {
-        if (this.readyState == 4 && this.status == 200) {
+        if (this.readyState == 4) {
             information = this.responseText;
-            organize()
+			
+			if(this.status == 200){console.log("received response");organize()}
             }
-        };
-        
+        }
         xhttp.open("GET", query, true);
-        xhttp.send();  
+        xhttp.send(null);  
         }
         
-    function fetchData() {
+		
+function fetchData() {
             
-        console.log("fetching data")
-        var query = queryBase + "(" + table + ")&for=county:" + pueblo + queryEnd 
-        
+        var query = "https://api.census.gov/data/2020/acs/acs5/profile?get=group" + "(" + table + ")&for=county:" + pueblo + "&in=state:72"
         if(pueblo && table)
         {loadDoc(query)}
 
         else
-            {Alert.alert("Please fill every parameter before calling!")}
+        {Alert.alert("Please fill every parameter before calling!")}
             
     }
 
 
 
+function DataTable() {
+    let tableHead = ['Variable', 'Estimate', 'MoE']
+    let tableTitle = allTitle
+    let tableData = allData
+    return (
+      <View style={styles.tablecontainer}>
+        <Table borderStyle={{borderWidth: 1}}>
+          <Row data={tableHead} flexArr={[1, 2, 1, 1]} style={styles.head} textStyle={styles.tabletext}/>
+          <TableWrapper style={styles.wrapper}>
+            <Col data={tableTitle} style={styles.title} heightArr={[28,28]} textStyle={styles.tabletext}/>
+            <Rows data={tableData} flexArr={[2, 1, 1]} style={styles.row} textStyle={styles.tabletext}/>
+          </TableWrapper>
+        </Table>
+      </View>
+    )
+}
+
 //organize data make it pretty
 //add loading thing while this organizes all the data !!!
 
 function organize(){
 	
+	let bigData = JSON.parse(information)
+	bigData = parse(bigData)
+	var variables = []
+	var estimates = []
+	var moe = []
+	
+	let divData = bigData.split(",")
+	let num = Math.floor(divData.length/3) + 1
+	for(let i = num; i < Math.floor(divData.length/3*2); i++){
+		variables.push(divData[i])
+		estimates.push(divData[i+num])
+		moe.push(divData[i+num*1.5])
+		
+	}
+	
+	//console.log(variables)
+	//console.log(estimates)
+	//console.log(moe)
+	let tableContents = []
+	for(let i = 0; i < estimates.length; i++)
+	{
+		tableContents.push([estimates[i],moe[i]])
+	}
+	
+	allTitle = variables
+	allData = tableContents
+	
+	information = <DataTable />
+	
+	
+	/*
 	var stringDiv = JSON.stringify(information)
 	stringDiv = stringDiv.replace('[[', '');
 	stringDiv = stringDiv.replace(']]', '');
@@ -326,10 +277,14 @@ function organize(){
 	console.log("vars:",variables)
 	console.log("val:",value)
 	console.log("est:",est)
+	*/
 
 	
 }
 
+
+
+
 function json_2_csv(information){
 
 	const csv = parse(obj);
@@ -350,12 +305,24 @@ function getInfo(){
 
 class DataButton extends React.Component{
 	
+	
 	state = {
-		click: false
+		updated: 1,
+		notUpdated: 0
 	}
 	
-	pullData = () => {fetchData(); this.setState({click: true})}
+	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(){
+		if(this.state.current == 1){
+			this.setState({current: 0})
+		}
+	}
 	
+	state = {current: 0}
 	
 	render() {
 		return(
@@ -365,7 +332,7 @@ class DataButton extends React.Component{
                         <Text style={styles.text}> Fetch Data</Text>
                     </Pressable>
                    
-                        <Text style={styles.sub}>{getInfo()}</Text> 
+                        <Text style={styles.sub}>{information}</Text> 
                     
             </View>
 	    );