andrea.nieves7 1 year ago
parent
commit
2156676dbe
3 changed files with 138 additions and 74 deletions
  1. 138
    74
      App.js
  2. BIN
      Logo.jpeg
  3. BIN
      smallLogo.jpeg

+ 138
- 74
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, Alert} from 'react-native';
3
+import { View, Image, StyleSheet, Text, Button, ScrollView, Pressable} from 'react-native';
4 4
 import data from './transfer.json' 
5 5
 import DropDownPicker from 'react-native-dropdown-picker';
6 6
 
@@ -11,7 +11,6 @@ var organizedData
11 11
 var information = "data goes here"
12 12
 
13 13
 //organize data make it pretty
14
-
15 14
 function organize(){
16 15
 	
17 16
 	
@@ -53,12 +52,10 @@ function loadDoc(query) {
53 52
   
54 53
 }
55 54
 
56
-//query to copy paste later
57
-//"https://api.census.gov/data/2020/acs/acs5/profile?get=group(DP02PR)&for=county:127&in=state:72"
58 55
 
56
+//"https://api.census.gov/data/2020/acs/acs5/profile?get=group(DP02PR)&for=county:127&in=state:72"
59 57
 
60 58
 
61
-//function to create query to fetch data
62 59
 
63 60
 function fetchData() {
64 61
 	
@@ -68,10 +65,7 @@ function fetchData() {
68 65
 	
69 66
 	console.log(query)
70 67
 	
71
-	if(pueblo && table)
72
-	{loadDoc(query)}
73
-	else
74
-	{Alert.alert("Please fill every parameter before calling!")}
68
+	loadDoc(query)
75 69
 	
76 70
 }
77 71
 
@@ -85,29 +79,50 @@ const styles = StyleSheet.create({
85 79
 	  marginBottom: 30,
86 80
 	  margin: 30,
87 81
 	  borderColor: "grey",
82
+	  borderRadius: 8,
83
+	  padding: (30, 16),
84
+	  backgroundColor: "#008CBA",
85
+	  marginTop: 0
88 86
   }, 
87
+  buttonContainer: {
88
+    flexDirection: 'column',
89
+    backgroundColor: 'black',
90
+    alignItems: 'center',
91
+    justifyContent: 'center',
92
+	paddingTop:100,
93
+	marginTop: 20,
94
+  },
89 95
   container: {
90 96
     flexDirection: 'column',
91 97
 	justifyContent: 'center',
92 98
     backgroundColor: 'black',
93 99
     alignItems: 'center',
94 100
     justifyContent: 'center',
101
+	paddingTop:20,
95 102
 	marginTop: 20,
96 103
   },
97 104
   containerbackground:{
98 105
 	
99
-    backgroundColor: '#063970',
100
-	marginTop: 20
106
+    backgroundColor: '#063970'
101 107
   },
102 108
   intro: {
103 109
 	  fontWeight: "bold",
104 110
       color:"#beb2c8",
105 111
 	  fontSize: 30,
106
-	 
107 112
   },
113
+
108 114
   sub: {
109
-      color:"#D7D6D6",  
110
-	  fontSize: 20
115
+	color:"#beb2c8",  
116
+	fontWeight: "bold",
117
+	fontSize: 15,
118
+	paddingBottom:10,
119
+},
120
+
121
+  Navsub: {
122
+      color:"#beb2c8",  
123
+	  fontWeight: "bold",
124
+	  fontSize: 30,
125
+	  paddingBottom:10,
111 126
   },
112 127
   scrollView:{
113 128
 	  marginHorizontal: 20
@@ -138,43 +153,82 @@ const styles = StyleSheet.create({
138 153
 const handlePress = () => false
139 154
 
140 155
 
156
+//data parsing goes here
141 157
 
142
-//return INFO
143
-
144
-function getInfo(){
145
-	console.log(information[6])
146
-	return information
158
+function importJSON() {
159
+	var stuff = JSON.stringify(data)
160
+	return stuff
147 161
 }
148 162
 
149
-//button to press to call data
150 163
 
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
164
+//data display
154 165
 
155
-class DataButton extends React.Component{
156
-	
157
-	state = {
158
-		click: false
159
-	}
160
-	
161
-	pullData = () => {fetchData(); this.setState({click: true})}
166
+function DataDisplay({valueTable, valuePueblo}) {
167
+  const [tableValue, setTableValue] = useState(null);
168
+  const [puebloValue, setPuebloValue] = useState(null);
169
+  
170
+  console.log("tableOption:",valueTable)
171
+  console.log("puebloOption:",valuePueblo)
162 172
 	
173
+//theres something wrong with this, its applying the previous value of valueTable and valuePueblo instead of the actual value
174
+
175
+  useEffect(() => {
176
+    setTableValue(valueTable);
177
+	console.log("tableValue:",tableValue)
178
+	//if not undefined
179
+	if(tableValue){updateTable(tableValue);}   
180
+  }, [valueTable]); // add props as dependencies
181
+  
182
+  useEffect(() => {
183
+    setPuebloValue(valuePueblo);
184
+	console.log("puebloValue:",puebloValue)
185
+    if(puebloValue){updatePueblo(puebloValue)};
186
+  }, [valuePueblo]); // add props as dependencies
163 187
 	
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
-	);}	
188
+
189
+  return (
190
+  <View>
191
+    <Text style={styles.sub}>{information}</Text>
192
+	<Button
193
+		onPress = {fetchData()}
194
+		title = "Fetch Data"
195
+		color = "black"
196
+		/>
197
+   </View>	  
198
+  );
199
+}
200
+
201
+//data pick
202
+/*
203
+function Parent() {
204
+  const [parentOption, setParentOption] = useState(0);
205
+
206
+  return (
207
+    <View>
208
+		<Pressable onPress = {() => setParentOption(current => 1)}>
209
+			<Text style = {styles.listItem}> DP02PR </Text>
210
+		</Pressable>
211
+			
212
+		<Pressable onPress = {() => setParentOption(current => 2)}>
213
+			<Text style = {styles.listItem}> DP03PR </Text>
214
+		</Pressable>
215
+			
216
+		<Pressable onPress = {() => setParentOption(current => 3)}>
217
+			<Text style = {styles.listItem}> DP04PR </Text>
218
+		</Pressable>
219
+			
220
+		<Pressable onPress = {() => setParentOption(current => 4)}>
221
+			<Text style = {styles.listItem}> DP05PR </Text>
222
+		</Pressable>
223
+
224
+		<DataDisplay parentOption={parentOption} />
225
+    </View>
226
+  );
175 227
 }
228
+*/
229
+
176 230
 
177
-//Parameter Picker
231
+//picker test
178 232
 
179 233
 function Picker() {
180 234
 	
@@ -182,6 +236,7 @@ function Picker() {
182 236
   
183 237
   
184 238
   const [openTable, setOpenTable] = useState(false);
239
+  //const [tableOption, setTableOption] = useState(0);
185 240
   const [valueTable, setValueTable] = useState(null);
186 241
   const [table, setTable] = useState([
187 242
     {label:'DP02PR', value: 'DP02PR'},
@@ -195,6 +250,7 @@ function Picker() {
195 250
   
196 251
   //pueblo
197 252
   const [openPueblo, setOpenPueblo] = useState(false);
253
+  //const [puebloOption, setPuebloOption] = useState(0);
198 254
   const [valuePueblo, setValuePueblo] = useState(null);
199 255
   const [pueblo, setPueblo] = useState([
200 256
     {label: 'Adjuntas', value: '001'},
@@ -277,6 +333,9 @@ function Picker() {
277 333
 	{label: 'Yauco', value: '153'}
278 334
   ]);
279 335
   
336
+  
337
+  //make sure pickers are closed when another opens
338
+  
280 339
 
281 340
   return (
282 341
   <View>
@@ -287,9 +346,9 @@ function Picker() {
287 346
       setOpen={setOpenTable}
288 347
       setValue={setValueTable}
289 348
       setItems={setTable}
290
-	  onChangeValue = {(valueTable) => {
291
-		updateTable(valueTable);
292
-		}}
349
+	  //onChangeValue={(valueTable) => {
350
+	//	setTableOption(current => valueTable);
351
+	//	}}
293 352
 	  onOpen = {() => {setOpenPueblo(false)}}
294 353
 	  zIndex={3000}
295 354
 	  zIndexInverse={1000}
@@ -304,9 +363,9 @@ function Picker() {
304 363
       setOpen={setOpenPueblo}
305 364
       setValue={setValuePueblo}
306 365
       setItems={setPueblo}
307
-	  onChangeValue = {(valuePueblo) => {
308
-		updatePueblo(valuePueblo);
309
-		}}
366
+	  //onChangeValue={(valuePueblo) => {
367
+	//	setPuebloOption(current => valuePueblo);
368
+	//	}}
310 369
 	  onOpen = {() => {setOpenTable(false)}}
311 370
 	  zIndex={1000}
312 371
       zIndexInverse={3000}
@@ -314,14 +373,15 @@ function Picker() {
314 373
 	  searchPlaceholder="Busqueda..."
315 374
     />
316 375
 	
376
+	<DataDisplay valueTable={valueTable} valuePueblo={valuePueblo} />
377
+	
317 378
 	</View>
318 379
   );
319 380
 }
320 381
 
321 382
 
322
-//actual application
323 383
 
324
-//change different page states to separate components later?
384
+//actual application
325 385
 
326 386
 class App extends React.Component {
327 387
 
@@ -332,17 +392,18 @@ vars = {
332 392
 
333 393
 		<View style = {styles.containerbackground}>
334 394
 		<ScrollView style={styles.scrollView}>
335
-		  <View style = {styles.container}>
395
+		  	<View style = {styles.container}>
336 396
 		  
337 397
 		  
338
-			<Text style={styles.intro}>BIENVENIDO!!!!</Text>
339
-		
340
-			<Text style={styles.sub}>Aqui podra mantenerse al tanto con las 
341
-			ultimas noticias relacionadas al censo</Text>
342
-			 
343
-			<Image source={require('./testimg.gif')} />
344
-			
345
-		  </View> 
398
+				<Text style={styles.intro}>BIENVENIDO!!!!</Text>
399
+	
400
+				<Image source={require('./Logo.jpeg')} />
401
+			</View>
402
+			<View style = {styles.container}>
403
+				<Text style={styles.sub}>Aqui podra mantenerse al tanto con las 
404
+					ultimas noticias relacionadas al censo y tambien verificar 
405
+					las tablas por municipio.</Text>
406
+		   </View>
346 407
 		  </ScrollView>
347 408
 		</View>,
348 409
 		 
@@ -350,11 +411,13 @@ vars = {
350 411
 		<View style = {styles.containerbackground}>
351 412
 		<ScrollView style={styles.scrollView}>
352 413
 		 <View style = {styles.container}>
353
-		  
354
-		  
414
+		 	
355 415
 			<Text style={styles.intro}>Noticias</Text>
416
+			
417
+			<Image source={require('./Logo.jpeg')} />
418
+		  
356 419
 			 
357
-			<Image source={require('./testimg.gif')} />
420
+			
358 421
 			
359 422
 		 </View>
360 423
 		</ScrollView></View>,
@@ -365,13 +428,11 @@ vars = {
365 428
 		 <View style = {styles.container}>
366 429
 			
367 430
 		  
368
-			<Text style={styles.intro}>DATA VIEWING PROJECT</Text>		
369
-				
431
+			<Text style={styles.intro}>DATA VIEWING</Text>		
432
+			
370 433
 			<Picker />
371 434
 			
372 435
 			<Image source={require('./testimg.gif')} />
373
-				
374
-			<DataButton />
375 436
 			
376 437
 		 </View>
377 438
 		</ScrollView></View>
@@ -400,24 +461,27 @@ setNews = () => this.setState({ current: this.vars.newsView })
400 461
 	  <View>
401 462
 		
402 463
 			<View style = {styles.containerbackground}>
403
-				<View style = {styles.container}>
404
-					<Text style={styles.sub}> Navegador</Text>
405
-						<View style = {styles.buttons}>
464
+				<View style = {styles.buttonContainer}>
465
+					<Text style={styles.Navsub}> Demographic Data Viewer</Text>
466
+						<Text style={styles.sub}> Navegador</Text>
467
+							<View style = {styles.buttons}>
468
+							
406 469
 			 		 			<Button
407 470
 								onPress = {this.setNews}
408 471
 				 				title = "Noticias"
409
-				 				color = "blue"
472
+				 				color = "white"
410 473
 			  					/>
411 474
 			  
412 475
 			  					<Button
413 476
 								 onPress = {this.setData}
414 477
 								 title = "Datos"
415
-								 color = "black"
478
+								 color = "white"
416 479
 			  					/>
417
-
418
-						</View>
480
+							</View>
481
+						
482
+						
419 483
 		  				{this.state.current}
420
-						</View>
484
+					</View>
421 485
 			</View>
422 486
 		</View>
423 487
       );

BIN
Logo.jpeg View File


BIN
smallLogo.jpeg View File