App

App.js

@@ -1,6 +1,6 @@
 import { StatusBar } from 'expo-status-bar';
 import React, {useState, useEffect} from 'react';
-import { View, Image, StyleSheet, Text, Button, ScrollView, Pressable} from 'react-native';
+import { View, Image, StyleSheet, Text, Button, ScrollView, Pressable, Alert} from 'react-native';
 import data from './transfer.json' 
 import DropDownPicker from 'react-native-dropdown-picker';
 
@@ -11,6 +11,7 @@ var organizedData
 var information = "data goes here"
 
 //organize data make it pretty
+
 function organize(){
 	
 	
@@ -52,11 +53,13 @@ function loadDoc(query) {
   
 }
 
-
+//query to copy paste later
 //"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("fetching data")
@@ -65,7 +68,10 @@ function fetchData() {
 	
 	console.log(query)
 	
-	loadDoc(query)
+	if(pueblo && table)
+	{loadDoc(query)}
+	else
+	{Alert.alert("Please fill every parameter before calling!")}
 	
 }
 
@@ -132,82 +138,43 @@ const styles = StyleSheet.create({
 const handlePress = () => false
 
 
-//data parsing goes here
 
-function importJSON() {
-	var stuff = JSON.stringify(data)
-	return stuff
+//return INFO
+
+function getInfo(){
+	console.log(information[6])
+	return information
 }
 
+//button to press to call data
 
-//data display
+//again it only loads the data on the second button press. if anyone knows how to fix this please checked
+//please
+//please
 
-function DataDisplay({valueTable, valuePueblo}) {
-  const [tableValue, setTableValue] = useState(null);
-  const [puebloValue, setPuebloValue] = useState(null);
-  
-  console.log("tableOption:",valueTable)
-  console.log("puebloOption:",valuePueblo)
+class DataButton extends React.Component{
 	
-//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
+	state = {
+		click: false
+	}
 	
-
-  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>
-  );
+	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
+//Parameter Picker
 
 function Picker() {
 	
@@ -215,7 +182,6 @@ 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'},
@@ -229,7 +195,6 @@ function Picker() {
   
   //pueblo
   const [openPueblo, setOpenPueblo] = useState(false);
-  //const [puebloOption, setPuebloOption] = useState(0);
   const [valuePueblo, setValuePueblo] = useState(null);
   const [pueblo, setPueblo] = useState([
     {label: 'Adjuntas', value: '001'},
@@ -312,9 +277,6 @@ function Picker() {
 	{label: 'Yauco', value: '153'}
   ]);
   
-  
-  //make sure pickers are closed when another opens
-  
 
   return (
   <View>
@@ -325,9 +287,9 @@ function Picker() {
       setOpen={setOpenTable}
       setValue={setValueTable}
       setItems={setTable}
-	  //onChangeValue={(valueTable) => {
-	//	setTableOption(current => valueTable);
-	//	}}
+	  onChangeValue = {(valueTable) => {
+		updateTable(valueTable);
+		}}
 	  onOpen = {() => {setOpenPueblo(false)}}
 	  zIndex={3000}
 	  zIndexInverse={1000}
@@ -342,9 +304,9 @@ function Picker() {
       setOpen={setOpenPueblo}
       setValue={setValuePueblo}
       setItems={setPueblo}
-	  //onChangeValue={(valuePueblo) => {
-	//	setPuebloOption(current => valuePueblo);
-	//	}}
+	  onChangeValue = {(valuePueblo) => {
+		updatePueblo(valuePueblo);
+		}}
 	  onOpen = {() => {setOpenTable(false)}}
 	  zIndex={1000}
       zIndexInverse={3000}
@@ -352,16 +314,15 @@ function Picker() {
 	  searchPlaceholder="Busqueda..."
     />
 	
-	<DataDisplay valueTable={valueTable} valuePueblo={valuePueblo} />
-	
 	</View>
   );
 }
 
 
-
 //actual application
 
+//change different page states to separate components later?
+
 class App extends React.Component {
 
 
@@ -405,10 +366,12 @@ vars = {
 			
 		  
 			<Text style={styles.intro}>DATA VIEWING PROJECT</Text>		
-			
+				
 			<Picker />
 			
 			<Image source={require('./testimg.gif')} />
+				
+			<DataButton />
 			
 		 </View>
 		</ScrollView></View>

app.json

@@ -1,11 +1,11 @@
 {
   "expo": {
-    "name": "App",
+    "name": "Census",
     "slug": "Test",
     "version": "47.0.0",
     "assetBundlePatterns": [
       "**/*"
     ]
   },
-  "name": "Test"
+  "name": "Census"
 }

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "test",
+  "name": "Census",
   "version": "1.0.0",
   "main": "index.js",
   "scripts": {