123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344 |
- 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 (
- <Text style={styles.sub}>{information}</Text>
- );
- }
-
- //data pick
- /*
- function Parent() {
- const [parentOption, setParentOption] = useState(0);
-
- return (
- <View>
- <Pressable onPress = {() => setParentOption(current => 1)}>
- <Text style = {styles.listItem}> DP02PR </Text>
- </Pressable>
-
- <Pressable onPress = {() => setParentOption(current => 2)}>
- <Text style = {styles.listItem}> DP03PR </Text>
- </Pressable>
-
- <Pressable onPress = {() => setParentOption(current => 3)}>
- <Text style = {styles.listItem}> DP04PR </Text>
- </Pressable>
-
- <Pressable onPress = {() => setParentOption(current => 4)}>
- <Text style = {styles.listItem}> DP05PR </Text>
- </Pressable>
-
- <DataDisplay parentOption={parentOption} />
- </View>
- );
- }
- */
-
-
- //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 (
- <View>
- <DropDownPicker
- open={open}
- value={value}
- items={table}
- setOpen={setOpen}
- setValue={setValue}
- setItems={setTable}
- onChangeValue={(value) => {
- setOption(current => value);
- }}
-
- />
-
- <DataDisplay option={option} />
-
- </View>
- );
- }
-
-
-
- //actual application
-
- class App extends React.Component {
-
-
- vars = {
- welcome:
-
-
- <View style = {styles.containerbackground}>
- <ScrollView style={styles.scrollView}>
- <View style = {styles.container}>
-
-
- <Text style={styles.intro}>BIENVENIDO!!!!</Text>
-
- <Text style={styles.sub}>Aqui podra mantenerse al tanto con las
- ultimas noticias relacionadas al censo</Text>
-
- <Image source={require('./testimg.gif')} />
-
- </View>
- </ScrollView>
- </View>,
-
- newsView:
- <View style = {styles.containerbackground}>
- <ScrollView style={styles.scrollView}>
- <View style = {styles.container}>
-
-
- <Text style={styles.intro}>Noticias</Text>
-
- <Image source={require('./testimg.gif')} />
-
- </View>
- </ScrollView></View>,
-
- dataOp:
- <View style = {styles.containerbackground}>
- <ScrollView nestedScrollEnabled = {true} style={styles.scrollView}>
- <View style = {styles.container}>
-
-
- <Text style={styles.intro}>DATA VIEWING PROJECT</Text>
-
- <Picker />
-
- <Image source={require('./testimg.gif')} />
-
- </View>
- </ScrollView></View>
-
-
-
-
- }
- //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 (
- <View>
-
- <View style = {styles.containerbackground}>
- <View style = {styles.container}>
- <Text style={styles.sub}> Navegador</Text>
- <View style = {styles.buttons}>
- <Button
- onPress = {this.setNews}
- title = "Noticias"
- color = "blue"
- />
-
- <Button
- onPress = {this.setData}
- title = "Datos"
- color = "black"
- />
-
- </View>
- {this.state.current}
- </View>
- </View>
- </View>
- );
- }
- }
-
-
- export default App
|