AnCaJuLu/App.js

import React, {useState, useEffect, Component} from 'react';
import { View, Image, StyleSheet, Text, Button, ScrollView, Pressable, Linking} from 'react-native';
import DropDownPicker from 'react-native-dropdown-picker';
import { parse } from 'json2csv';
import { Table, TableWrapper, Row, Rows, Col, Cols, Cell } from 'react-native-table-component';

//import JSON;
//import { Dataframe, readJSON } from "danfojs";

//where data will be put
var organizedData

//where data will be stored
var information = "data goes here"

//organize data make it pretty

//add loading thing while this organizes all the data !!!

function organize(){
	
	var stringDiv = JSON.parse(information)
	var csv = parse(stringDiv)
	console.log(csv)
	
	//var csv is the variable with the thing you just pulled
	//put function and data cleaning here
	//just make sure you change the return value in 'getInfo()'
	//so it returns the actual organized table
	//or make getInfo() organize the table as well
	//and return that organized table
	//i leave this to you
	
}

//fix

DropDownPicker.setListMode("SCROLLVIEW")

//data query variables (global)

const queryBase = "https://api.census.gov/data/2020/acs/acs5/profile?get=group"
const queryEnd = "&in=state:72"
var table = ""
var pueblo = ""


function updateTable(value){
	table = value
}

function updatePueblo(value){
	pueblo = value
}

//calls data query
function loadDoc(query) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
         information = this.responseText;
		 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"



function fetchData() {
	
	console.log("fetching data")
	
	var query = queryBase + "(" + table + ")&for=county:" + pueblo + queryEnd 
	
	if(pueblo && table)
	{loadDoc(query)}
	else
	{Alert.alert("Please fill every parameter before calling!")}
	
}

//change this to an external css file later
const styles = StyleSheet.create({
	
  buttons: {
	  flexDirection: 'row',
	  justifyContent: 'center',
	  marginTop: 40,
	  marginBottom: 30,
	  margin: 30,
	  borderColor: "white",
	  borderRadius: 8,
	  paddingVertical: 15,
	  paddingHorizontal: 30,
	  backgroundColor: "#008CBA",
	  marginTop: 0
  }, 
  buttonContainer: {
    flexDirection: 'column',
    backgroundColor: 'black',
    // alignItems: 'center',
    justifyContent: 'center',
	paddingTop:5,
	marginTop: 30,
  },
  container: {
    flexDirection: 'column',
	justifyContent: 'center',
    backgroundColor: 'black',
    alignItems: 'center',
    justifyContent: 'center',
	paddingTop:20,
	marginTop: 20,
  },
  containerbackground:{
	
    backgroundColor: '#063970'
  },
  intro: {
	  fontWeight: "bold",
      color:"#beb2c8",
	  fontSize: 30,
  },
  intro2: {
	fontWeight: "bold",
	color:"#beb2c8",
	fontSize: 20,
},

  sub: {
	color:"#beb2c8",  
	fontWeight: "bold",
	fontSize: 15,
	paddingBottom:10,
},

  Navsub: {
      color:"#beb2c8",  
	  fontWeight: "bold",
	  fontSize: 30,
	  paddingBottom:10,
	  alignItems: 'center',
  },
  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 getInfo(){
	//console.log(information[6])
	if(!information)
	{Alert.alert("Please try again later! Error retriving data")}
	else
	{return information}

	
}

//data display

class DataButton extends React.Component{
	
	state = {
		click: false
	}
	
	pullData = () => {fetchData(); this.setState({click: true})}
	
	
	render() {
		return(
		<View>
			<Button
			onPress = {this.pullData}
			title = "Fetch Data"
			color = "black"
			/>
			<Text style={styles.sub}>{getInfo()}</Text> 
		</View>
	);}	
}


//picker test

function Picker() {
	
	//table to pick from
  
  
  const [openTable, setOpenTable] = useState(false);
  const [valueTable, setValueTable] = useState(null);
  const [table, setTable] = useState([
    {label:'DP02PR', value: 'DP02PR'},
    {label:'DP03', value: 'DP03'},
	{label:'DP04', value: 'DP04'},
    {label:'DP05', value: 'DP05'},
  ]);
    
  //cambiar pueblo
  
  
  //pueblo
  const [openPueblo, setOpenPueblo] = useState(false);
  const [valuePueblo, setValuePueblo] = useState(null);
  const [pueblo, setPueblo] = useState([
    {label: 'Adjuntas', value: '001'},
    {label: 'Aguada', value: '003'},
	{label: 'Aguadillas', value: '005'},
    {label: 'Aguas Buenas', value: '007'},
	{label: 'Aibonito', value: '009'},
    {label: 'Añasco', value: '011'},
	{label: 'Arecibo', value: '013'},
    {label: 'Arroyo', value: '015'},
	{label: 'Barceloneta', value: '017'},
    {label: 'Barranquitas', value: '019'},
	{label: 'Bayamón', value: '021'},
    {label: 'Cabo Rojo', value: '023'},
	{label: 'Caguas', value: '025'},
    {label: 'Camuy', value: '027'},
	{label: 'Canóvanas', value: '029'},
	{label: 'Carolina', value: '031'},
	{label: 'Cataño', value: '033'},
	{label: 'Cayey', value: '035'},
	{label: 'Ceiba', value: '037'},
	{label: 'Ciales', value: '039'},
	{label: 'Cidra', value: '041'},
	{label: 'Coamo', value: '043'},
	{label: 'Comerío', value: '045'},
	{label: 'Corozal', value: '047'},
	{label: 'Culebra', value: '049'},
	{label: 'Dorado', value: '051'},
	{label: 'Fajardo', value: '053'},
	{label: 'Florida', value: '054'},
	{label: 'Guánica', value: '055'},
	{label: 'Guayama', value: '057'},
	{label: 'Guayanilla', value: '059'},
	{label: 'Guaynabo', value: '061'},	
	{label: 'Gurabo', value: '063'},
	{label: 'Hatillo', value: '065'},
	{label: 'Hormigueros', value: '067'},
	{label: 'Humacao', value: '069'},
	{label: 'Isabela', value: '071'},
	{label: 'Jayuya', value: '073'},
	{label: 'Juana Díaz', value: '075'},
	{label: 'Juncos', value: '077'},
	{label: 'Lajas', value: '079'},
	{label: 'Lares', value: '081'},
	{label: 'Las Marías', value: '083'},
	{label: 'Las Piedras', value: '085'},
	{label: 'Loíza', value: '087'},
	{label: 'Luquillo', value: '089'},
	{label: 'Manatí', value: '091'},
	{label: 'Maricao', value: '093'},
	{label: 'Maunabo', value: '095'},
	{label: 'Mayagüez', value: '097'},
	{label: 'Moca', value: '099'},
	{label: 'Morovis', value: '101'},
	{label: 'Naguabo', value: '103'},
	{label: 'Naranjito', value: '105'},
	{label: 'Orocovis', value: '107'},
	{label: 'Patillas', value: '109'},
	{label: 'Peñuelas', value: '111'},
	{label: 'Ponce', value: '113'},
	{label: 'Quebradillas', value: '115'},
	{label: 'Rincón', value: '117'},
	{label: 'Río Grande', value: '119'},
	{label: 'Sabana Grande', value: '121'},
	{label: 'Salinas', value: '123'},
	{label: 'San Germán', value: '125'},
	{label: 'San Juan', value: '127'},
	{label: 'San Lorenzo', value: '129'},
	{label: 'San Sebastián', value: '131'},
	{label: 'Santa Isabel', value: '133'},
	{label: 'Toa Alta', value: '135'},
	{label: 'Toa Baja', value: '137'},
	{label: 'Trujillo Alto', value: '139'},
	{label: 'Utuado', value: '141'},
	{label: 'Vega Alta', value: '143'},
	{label: 'Vega Baja', value: '145'},
	{label: 'Vieques', value: '147'},
	{label: 'Villalba', value: '149'},
	{label: 'Yabucoa', value: '151'},
	{label: 'Yauco', value: '153'}
  ]);
  
  //add a thing here to select year to take info from
  

//add a dropdown in here 

  return (
  <View>
    <DropDownPicker
      open={openTable}
      value={valueTable}
      items={table}
      setOpen={setOpenTable}
      setValue={setValueTable}
      setItems={setTable}
	  onChangeValue = {(valueTable) => {
		updateTable(valueTable);
		}}
	  onOpen = {() => {setOpenPueblo(false)}}
	  zIndex={3000}
	  zIndexInverse={1000}
	  placeholder="Tabla de Datos"
    />
	
	<DropDownPicker
      searchable={true}
      open={openPueblo}
      value={valuePueblo}
      items={pueblo}
      setOpen={setOpenPueblo}
      setValue={setValuePueblo}
      setItems={setPueblo}
	  onChangeValue = {(valuePueblo) => {
		updatePueblo(valuePueblo);
		}}
	  onOpen = {() => {setOpenTable(false)}}
	  zIndex={1000}
      zIndexInverse={3000}
	  placeholder="Pueblo"
	  searchPlaceholder="Busqueda..."
    />
	
	
	
	</View>
  );

  
}



//actual application

class App extends React.Component {
	//Note: if prop-types could not be found within the project
	//run on terminal "npm install --save proptypes"

	// constructor(props) {
	// 	super(props);
	// 	this.setData = {
	// 	  HeadTable: ['Head1', 'Head2', 'Head3', 'Head4', 'Head5'],
	// 	  DataTable: [
	// 		['1', '2', '3', '4', '5'],
	// 		['a', 'b', 'c', 'd', 'e'],
	// 		['1', '2', '3', '4', '5'],
	// 		['a', 'b', 'c', 'd', 'e'],
	// 		['1', '2', '3', '4', '5']
	// 	  ]
	// 	}
	//   }
	

	//the text at the end of a page gets cut off if anyone knows how to fix that?
	vars = {
		welcome:
			<View style = {styles.containerbackground}>
		
		  	<View style = {styles.container}>
		  
		  
				<Text style={styles.intro}>BIENVENIDO!!!!</Text>
	
				<Image source={require('./Logo.jpeg')} />
			</View>
			<View style = {styles.container}>
				<Text style={styles.sub}>Aqui podra mantenerse al tanto con las 
					ultimas noticias relacionadas al censo y tambien verificar 
					las tablas por municipio.</Text>
		   </View>
		   <View style = {styles.container}>
				<Text style={styles.intro2}>Contactenos:</Text>
				<Text style={styles.sub}>Prof: Hernando Mattei Torres
				<Button onPress={() => Linking.openURL('mailto:hernando.mattei@upr.edu') }
      			title="e-mail" /></Text>
				<Text style={styles.sub}>Angelica Rosario Santos
				<Button onPress={() => Linking.openURL('mailto:angelica.rosario2@upr.edu') }
      			title="e-mail" /></Text>
				<Text style={styles.sub}>Data from:</Text>
				<Image source={require('./census-logos.png')} />
				<Button onPress={() => Linking.openURL('https://data.census.gov/profile?q=United+States&g=0100000US') }
      			title="United States Census page" />
		   </View>
		  
		</View>
		
		,
		newsView:
		<View style = {styles.containerbackground}>
		<ScrollView style={styles.scrollView}>
		 <View style = {styles.container}>
		 	
			<Text style={styles.intro}>Noticias</Text>
			
			<Image source={require('./Logo.jpeg')} />
		  
			 
			
			
		 </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')} />
				
			<DataButton />
			
			<Text style={styles.sub}>blehhhhhh bleh bleh bleh bleh bleh blehhhhhhhhhhhhhhhhh </Text>
			
			<View style={styles.container}>
      		{/* <Table borderStyle={{borderWidth: 1, borderColor: '#ffa1d2'}}>
        	<Row data={state.HeadTable} style={styles.HeadStyle} textStyle={styles.TableText}/>
        	<Rows data={state.DataTable} textStyle={styles.TableText}/>
      	</Table> */}
    </View>

		 </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}>
				<ScrollView style={styles.scrollView}>
				<View style = {styles.buttonContainer}>
					<Text style={styles.Navsub}> Demographic Data Viewer</Text>
						<Text style={styles.sub}> Navegador</Text>
							<Pressable style = {styles.buttons} onPress={this.setNews}>
							
			 		 			<Button
								title = "Noticias"
				 				color = "white"
			  					/>
			  
			  					
							</Pressable>
								
							<Pressable style = {styles.buttons} onPress={this.setData}>
							
			 		 			<Button
								title = "Datos"
				 				color = "white"
			  					/>
			  
			  					
							</Pressable>
						
		  				{this.state.current}
					</View>
					</ScrollView>
			</View>
		</View>
      );
   }
}


export default App