AnCaJuLu/App.js

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