app

App.js

 import { StatusBar } from 'expo-status-bar';
 import React, {useState, useEffect} from 'react';
-import { View, Image, StyleSheet, Text, Button, ScrollView, Pressable, Alert} from 'react-native';
+import { View, Image, StyleSheet, Text, Button, ScrollView, Pressable} from 'react-native';
 import data from './transfer.json' 
 import DropDownPicker from 'react-native-dropdown-picker';
 
 var information = "data goes here"
 
 //organize data make it pretty
-
 function organize(){
 	
 	
   
 }
 
-//query to copy paste later
-//"https://api.census.gov/data/2020/acs/acs5/profile?get=group(DP02PR)&for=county:127&in=state:72"
 
+//"https://api.census.gov/data/2020/acs/acs5/profile?get=group(DP02PR)&for=county:127&in=state:72"
 
 
-//function to create query to fetch data
 
 function fetchData() {
 	
 	
 	console.log(query)
 	
-	if(pueblo && table)
-	{loadDoc(query)}
-	else
-	{Alert.alert("Please fill every parameter before calling!")}
+	loadDoc(query)
 	
 }
 
 	  marginBottom: 30,
 	  margin: 30,
 	  borderColor: "grey",
+	  borderRadius: 8,
+	  padding: (30, 16),
+	  backgroundColor: "#008CBA",
+	  marginTop: 0
   }, 
+  buttonContainer: {
+    flexDirection: 'column',
+    backgroundColor: 'black',
+    alignItems: 'center',
+    justifyContent: 'center',
+	paddingTop:100,
+	marginTop: 20,
+  },
   container: {
     flexDirection: 'column',
 	justifyContent: 'center',
     backgroundColor: 'black',
     alignItems: 'center',
     justifyContent: 'center',
+	paddingTop:20,
 	marginTop: 20,
   },
   containerbackground:{
 	
-    backgroundColor: '#063970',
-	marginTop: 20
+    backgroundColor: '#063970'
   },
   intro: {
 	  fontWeight: "bold",
       color:"#beb2c8",
 	  fontSize: 30,
-	 
   },
+
   sub: {
-      color:"#D7D6D6",  
-	  fontSize: 20
+	color:"#beb2c8",  
+	fontWeight: "bold",
+	fontSize: 15,
+	paddingBottom:10,
+},
+
+  Navsub: {
+      color:"#beb2c8",  
+	  fontWeight: "bold",
+	  fontSize: 30,
+	  paddingBottom:10,
   },
   scrollView:{
 	  marginHorizontal: 20
 const handlePress = () => false
 
 
+//data parsing goes here
 
-//return INFO
-
-function getInfo(){
-	console.log(information[6])
-	return information
+function importJSON() {
+	var stuff = JSON.stringify(data)
+	return stuff
 }
 
-//button to press to call data
 
-//again it only loads the data on the second button press. if anyone knows how to fix this please checked
-//please
-//please
+//data display
 
-class DataButton extends React.Component{
-	
-	state = {
-		click: false
-	}
-	
-	pullData = () => {fetchData(); this.setState({click: true})}
+function DataDisplay({valueTable, valuePueblo}) {
+  const [tableValue, setTableValue] = useState(null);
+  const [puebloValue, setPuebloValue] = useState(null);
+  
+  console.log("tableOption:",valueTable)
+  console.log("puebloOption:",valuePueblo)
 	
+//theres something wrong with this, its applying the previous value of valueTable and valuePueblo instead of the actual value
+
+  useEffect(() => {
+    setTableValue(valueTable);
+	console.log("tableValue:",tableValue)
+	//if not undefined
+	if(tableValue){updateTable(tableValue);}   
+  }, [valueTable]); // add props as dependencies
+  
+  useEffect(() => {
+    setPuebloValue(valuePueblo);
+	console.log("puebloValue:",puebloValue)
+    if(puebloValue){updatePueblo(puebloValue)};
+  }, [valuePueblo]); // add props as dependencies
 	
-	render() {
-		return(
-		<View>
-			<Button
-			onPress = {this.pullData}
-			title = "Fetch Data"
-			color = "black"
-			/>
-			<Text style={styles.sub}>{getInfo()}</Text> 
-		</View>
-	);}	
+
+  return (
+  <View>
+    <Text style={styles.sub}>{information}</Text>
+	<Button
+		onPress = {fetchData()}
+		title = "Fetch Data"
+		color = "black"
+		/>
+   </View>	  
+  );
+}
+
+//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>
+  );
 }
+*/
+
 
-//Parameter Picker
+//picker test
 
 function Picker() {
 	
   
   
   const [openTable, setOpenTable] = useState(false);
+  //const [tableOption, setTableOption] = useState(0);
   const [valueTable, setValueTable] = useState(null);
   const [table, setTable] = useState([
     {label:'DP02PR', value: 'DP02PR'},
   
   //pueblo
   const [openPueblo, setOpenPueblo] = useState(false);
+  //const [puebloOption, setPuebloOption] = useState(0);
   const [valuePueblo, setValuePueblo] = useState(null);
   const [pueblo, setPueblo] = useState([
     {label: 'Adjuntas', value: '001'},
 	{label: 'Yauco', value: '153'}
   ]);
   
+  
+  //make sure pickers are closed when another opens
+  
 
   return (
   <View>
       setOpen={setOpenTable}
       setValue={setValueTable}
       setItems={setTable}
-	  onChangeValue = {(valueTable) => {
-		updateTable(valueTable);
-		}}
+	  //onChangeValue={(valueTable) => {
+	//	setTableOption(current => valueTable);
+	//	}}
 	  onOpen = {() => {setOpenPueblo(false)}}
 	  zIndex={3000}
 	  zIndexInverse={1000}
       setOpen={setOpenPueblo}
       setValue={setValuePueblo}
       setItems={setPueblo}
-	  onChangeValue = {(valuePueblo) => {
-		updatePueblo(valuePueblo);
-		}}
+	  //onChangeValue={(valuePueblo) => {
+	//	setPuebloOption(current => valuePueblo);
+	//	}}
 	  onOpen = {() => {setOpenTable(false)}}
 	  zIndex={1000}
       zIndexInverse={3000}
 	  searchPlaceholder="Busqueda..."
     />
 	
+	<DataDisplay valueTable={valueTable} valuePueblo={valuePueblo} />
+	
 	</View>
   );
 }
 
 
-//actual application
 
-//change different page states to separate components later?
+//actual application
 
 class App extends React.Component {
 
 
 		<View style = {styles.containerbackground}>
 		<ScrollView style={styles.scrollView}>
-		  <View style = {styles.container}>
+		  	<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> 
+				<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>
 		  </ScrollView>
 		</View>,
 		 
 		<View style = {styles.containerbackground}>
 		<ScrollView style={styles.scrollView}>
 		 <View style = {styles.container}>
-		  
-		  
+		 	
 			<Text style={styles.intro}>Noticias</Text>
+			
+			<Image source={require('./Logo.jpeg')} />
+		  
 			 
-			<Image source={require('./testimg.gif')} />
+			
 			
 		 </View>
 		</ScrollView></View>,
 		 <View style = {styles.container}>
 			
 		  
-			<Text style={styles.intro}>DATA VIEWING PROJECT</Text>		
-				
+			<Text style={styles.intro}>DATA VIEWING</Text>		
+			
 			<Picker />
 			
 			<Image source={require('./testimg.gif')} />
-				
-			<DataButton />
 			
 		 </View>
 		</ScrollView></View>
 	  <View>
 		
 			<View style = {styles.containerbackground}>
-				<View style = {styles.container}>
-					<Text style={styles.sub}> Navegador</Text>
-						<View style = {styles.buttons}>
+				<View style = {styles.buttonContainer}>
+					<Text style={styles.Navsub}> Demographic Data Viewer</Text>
+						<Text style={styles.sub}> Navegador</Text>
+							<View style = {styles.buttons}>
+							
 			 		 			<Button
 								onPress = {this.setNews}
 				 				title = "Noticias"
-				 				color = "blue"
+				 				color = "white"
 			  					/>
 			  
 			  					<Button
 								 onPress = {this.setData}
 								 title = "Datos"
-								 color = "black"
+								 color = "white"
 			  					/>
-
-						</View>
+							</View>
+						
+						
 		  				{this.state.current}
-						</View>
+					</View>
 			</View>
 		</View>
       );