andrea.nieves7 1 year ago
parent
commit
d15ee9c68b
3 changed files with 51 additions and 88 deletions
  1. 48
    85
      App.js
  2. 2
    2
      app.json
  3. 1
    1
      package.json

+ 48
- 85
App.js View File

@@ -1,6 +1,6 @@
1 1
 import { StatusBar } from 'expo-status-bar';
2 2
 import React, {useState, useEffect} from 'react';
3
-import { View, Image, StyleSheet, Text, Button, ScrollView, Pressable} from 'react-native';
3
+import { View, Image, StyleSheet, Text, Button, ScrollView, Pressable, Alert} from 'react-native';
4 4
 import data from './transfer.json' 
5 5
 import DropDownPicker from 'react-native-dropdown-picker';
6 6
 
@@ -11,6 +11,7 @@ var organizedData
11 11
 var information = "data goes here"
12 12
 
13 13
 //organize data make it pretty
14
+
14 15
 function organize(){
15 16
 	
16 17
 	
@@ -52,11 +53,13 @@ function loadDoc(query) {
52 53
   
53 54
 }
54 55
 
55
-
56
+//query to copy paste later
56 57
 //"https://api.census.gov/data/2020/acs/acs5/profile?get=group(DP02PR)&for=county:127&in=state:72"
57 58
 
58 59
 
59 60
 
61
+//function to create query to fetch data
62
+
60 63
 function fetchData() {
61 64
 	
62 65
 	console.log("fetching data")
@@ -65,7 +68,10 @@ function fetchData() {
65 68
 	
66 69
 	console.log(query)
67 70
 	
68
-	loadDoc(query)
71
+	if(pueblo && table)
72
+	{loadDoc(query)}
73
+	else
74
+	{Alert.alert("Please fill every parameter before calling!")}
69 75
 	
70 76
 }
71 77
 
@@ -132,82 +138,43 @@ const styles = StyleSheet.create({
132 138
 const handlePress = () => false
133 139
 
134 140
 
135
-//data parsing goes here
136 141
 
137
-function importJSON() {
138
-	var stuff = JSON.stringify(data)
139
-	return stuff
142
+//return INFO
143
+
144
+function getInfo(){
145
+	console.log(information[6])
146
+	return information
140 147
 }
141 148
 
149
+//button to press to call data
142 150
 
143
-//data display
151
+//again it only loads the data on the second button press. if anyone knows how to fix this please checked
152
+//please
153
+//please
144 154
 
145
-function DataDisplay({valueTable, valuePueblo}) {
146
-  const [tableValue, setTableValue] = useState(null);
147
-  const [puebloValue, setPuebloValue] = useState(null);
148
-  
149
-  console.log("tableOption:",valueTable)
150
-  console.log("puebloOption:",valuePueblo)
155
+class DataButton extends React.Component{
151 156
 	
152
-//theres something wrong with this, its applying the previous value of valueTable and valuePueblo instead of the actual value
153
-
154
-  useEffect(() => {
155
-    setTableValue(valueTable);
156
-	console.log("tableValue:",tableValue)
157
-	//if not undefined
158
-	if(tableValue){updateTable(tableValue);}   
159
-  }, [valueTable]); // add props as dependencies
160
-  
161
-  useEffect(() => {
162
-    setPuebloValue(valuePueblo);
163
-	console.log("puebloValue:",puebloValue)
164
-    if(puebloValue){updatePueblo(puebloValue)};
165
-  }, [valuePueblo]); // add props as dependencies
157
+	state = {
158
+		click: false
159
+	}
166 160
 	
167
-
168
-  return (
169
-  <View>
170
-    <Text style={styles.sub}>{information}</Text>
171
-	<Button
172
-		onPress = {fetchData()}
173
-		title = "Fetch Data"
174
-		color = "black"
175
-		/>
176
-   </View>	  
177
-  );
178
-}
179
-
180
-//data pick
181
-/*
182
-function Parent() {
183
-  const [parentOption, setParentOption] = useState(0);
184
-
185
-  return (
186
-    <View>
187
-		<Pressable onPress = {() => setParentOption(current => 1)}>
188
-			<Text style = {styles.listItem}> DP02PR </Text>
189
-		</Pressable>
190
-			
191
-		<Pressable onPress = {() => setParentOption(current => 2)}>
192
-			<Text style = {styles.listItem}> DP03PR </Text>
193
-		</Pressable>
194
-			
195
-		<Pressable onPress = {() => setParentOption(current => 3)}>
196
-			<Text style = {styles.listItem}> DP04PR </Text>
197
-		</Pressable>
198
-			
199
-		<Pressable onPress = {() => setParentOption(current => 4)}>
200
-			<Text style = {styles.listItem}> DP05PR </Text>
201
-		</Pressable>
202
-
203
-		<DataDisplay parentOption={parentOption} />
204
-    </View>
205
-  );
161
+	pullData = () => {fetchData(); this.setState({click: true})}
162
+	
163
+	
164
+	render() {
165
+		return(
166
+		<View>
167
+			<Button
168
+			onPress = {this.pullData}
169
+			title = "Fetch Data"
170
+			color = "black"
171
+			/>
172
+			<Text style={styles.sub}>{getInfo()}</Text> 
173
+		</View>
174
+	);}	
206 175
 }
207
-*/
208 176
 
209
-
210
-//picker test
177
+//Parameter Picker
211 178
 
212 179
 function Picker() {
213 180
 	
@@ -215,7 +182,6 @@ function Picker() {
215 182
   
216 183
   
217 184
   const [openTable, setOpenTable] = useState(false);
218
-  //const [tableOption, setTableOption] = useState(0);
219 185
   const [valueTable, setValueTable] = useState(null);
220 186
   const [table, setTable] = useState([
221 187
     {label:'DP02PR', value: 'DP02PR'},
@@ -229,7 +195,6 @@ function Picker() {
229 195
   
230 196
   //pueblo
231 197
   const [openPueblo, setOpenPueblo] = useState(false);
232
-  //const [puebloOption, setPuebloOption] = useState(0);
233 198
   const [valuePueblo, setValuePueblo] = useState(null);
234 199
   const [pueblo, setPueblo] = useState([
235 200
     {label: 'Adjuntas', value: '001'},
@@ -312,9 +277,6 @@ function Picker() {
312 277
 	{label: 'Yauco', value: '153'}
313 278
   ]);
314 279
   
315
-  
316
-  //make sure pickers are closed when another opens
317
-  
318 280
 
319 281
   return (
320 282
   <View>
@@ -325,9 +287,9 @@ function Picker() {
325 287
       setOpen={setOpenTable}
326 288
       setValue={setValueTable}
327 289
       setItems={setTable}
328
-	  //onChangeValue={(valueTable) => {
329
-	//	setTableOption(current => valueTable);
330
-	//	}}
290
+	  onChangeValue = {(valueTable) => {
291
+		updateTable(valueTable);
292
+		}}
331 293
 	  onOpen = {() => {setOpenPueblo(false)}}
332 294
 	  zIndex={3000}
333 295
 	  zIndexInverse={1000}
@@ -342,9 +304,9 @@ function Picker() {
342 304
       setOpen={setOpenPueblo}
343 305
       setValue={setValuePueblo}
344 306
       setItems={setPueblo}
345
-	  //onChangeValue={(valuePueblo) => {
346
-	//	setPuebloOption(current => valuePueblo);
347
-	//	}}
307
+	  onChangeValue = {(valuePueblo) => {
308
+		updatePueblo(valuePueblo);
309
+		}}
348 310
 	  onOpen = {() => {setOpenTable(false)}}
349 311
 	  zIndex={1000}
350 312
       zIndexInverse={3000}
@@ -352,16 +314,15 @@ function Picker() {
352 314
 	  searchPlaceholder="Busqueda..."
353 315
     />
354 316
 	
355
-	<DataDisplay valueTable={valueTable} valuePueblo={valuePueblo} />
356
-	
357 317
 	</View>
358 318
   );
359 319
 }
360 320
 
361 321
 
362
-
363 322
 //actual application
364 323
 
324
+//change different page states to separate components later?
325
+
365 326
 class App extends React.Component {
366 327
 
367 328
 
@@ -405,10 +366,12 @@ vars = {
405 366
 			
406 367
 		  
407 368
 			<Text style={styles.intro}>DATA VIEWING PROJECT</Text>		
408
-			
369
+				
409 370
 			<Picker />
410 371
 			
411 372
 			<Image source={require('./testimg.gif')} />
373
+				
374
+			<DataButton />
412 375
 			
413 376
 		 </View>
414 377
 		</ScrollView></View>

+ 2
- 2
app.json View File

@@ -1,11 +1,11 @@
1 1
 {
2 2
   "expo": {
3
-    "name": "App",
3
+    "name": "Census",
4 4
     "slug": "Test",
5 5
     "version": "47.0.0",
6 6
     "assetBundlePatterns": [
7 7
       "**/*"
8 8
     ]
9 9
   },
10
-  "name": "Test"
10
+  "name": "Census"
11 11
 }

+ 1
- 1
package.json View File

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