import { StatusBar } from 'expo-status-bar';
import React, {useState, useEffect} from 'react';
import { View, Image, StyleSheet, Text, Button, ScrollView, Pressable} from 'react-native';
import data from './transfer.json'
import { Dropdown } from 'react-native-element-dropdown';
//where data will be put
var organizedData
//where data will be stored
var information = "data goes here"
//organize data make it pretty
function organize(){
}
//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()
}
};
xhttp.open("GET", query, true);
xhttp.send();
}
//"https://api.census.gov/data/2020/acs/acs5/profile?get=group(DP02PR)&for=county:127&in=state:72"
//change this to an external css file later
const styles = StyleSheet.create({
buttons: {
flexDirection: 'row',
justifyContent: 'center',
marginTop: 40,
marginBottom: 30,
margin: 30,
borderColor: "grey",
},
container: {
flexDirection: 'column',
justifyContent: 'center',
backgroundColor: 'black',
alignItems: 'center',
justifyContent: 'center',
marginTop: 20,
},
containerbackground:{
backgroundColor: '#063970',
marginTop: 20
},
intro: {
fontWeight: "bold",
color:"#beb2c8",
fontSize: 30,
},
sub: {
color:"#D7D6D6",
fontSize: 20
},
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",
}
});
//default button press
const handlePress = () => false
//data parsing goes here
function importJSON() {
var stuff = JSON.stringify(data)
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(DP03PR)&for=county:127&in=state:72")
break;
case 3:
loadDoc("https://api.census.gov/data/2020/acs/acs5/profile?get=group(DP04PR)&for=county:127&in=state:72")
break;
case 4:
loadDoc("https://api.census.gov/data/2020/acs/acs5/profile?get=group(DP05PR)&for=county:127&in=state:72")
break;
}
}
function DataDisplay({parentOption}) {
const [option, setOption] = useState(0);
useEffect(() => {
setOption(parentOption);
console.log(option)
updateInfo(option);
}, [parentOption]); // 👈️ add props as dependencies
return (
{information}
);
}
function Parent() {
const [parentOption, setParentOption] = useState(0);
return (
setParentOption(current => 1)}>
DP02PR
setParentOption(current => 2)}>
DP03PR
setParentOption(current => 3)}>
DP04PR
setParentOption(current => 4)}>
DP05PR
);
}
class App extends React.Component {
vars = {
welcome:
BIENVENIDO!!!!
Aqui podra mantenerse al tanto con las
ultimas noticias relacionadas al censo
,
newsView:
Noticias
,
dataOp:
DATA VIEWING PROJECT
}
//current state
state = {current: this.vars.welcome}
//state changing functions
setHome = () => this.setState({ current: this.vars.welcome })
setData = () => this.setState({current: this.vars.dataOp})
setNews = () => this.setState({ current: this.vars.newsView })
//render app
render() {
return (
Navegador
{this.state.current}
);
}
}
export default App