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 DropDownPicker from 'react-native-dropdown-picker';
//where data will be put
var organizedData
//where data will be stored
var information = "data goes here"
//organize data make it pretty
function organize(){
}
//fix
DropDownPicker.setListMode("SCROLLVIEW")
//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(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);
useEffect(() => {
setTableValue(option * 1);
console.log(tableValue)
updateInfo(tableValue);
}, [option]); // add props as dependencies
return (
{information}
);
}
//data pick
/*
function Parent() {
const [parentOption, setParentOption] = useState(0);
return (
setParentOption(current => 1)}>
DP02PR
setParentOption(current => 2)}>
DP03PR
setParentOption(current => 3)}>
DP04PR
setParentOption(current => 4)}>
DP05PR
);
}
*/
//picker test
function Picker() {
//table to pick from
const [open, setOpen] = useState(false);
const [option, setOption] = useState(0);
const [value, setValue] = useState(0);
const [table, setTable] = useState([
{label:'DP02PR', value: 1},
{label:'DP03', value: 2},
{label:'DP04', value: 3},
{label:'DP05', value: 4},
]);
//cambiar pueblo
/*
//pueblo
const [open2, setOpen2] = useState(false);
const [value2, setValue2] = useState(null);
const [pueblo, setPueblo] = useState([
{label: 'Apple', value: 'apple'},
{label: 'Banana', value: 'banana'}
]);
*/
return (
{
setOption(current => value);
}}
/>
);
}
//actual application
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