CCOM4030
/
AnCaJuLu
Suivre 1
Favoriser 0
Bifurcation 0
Code Tickets 0 Demandes d'ajout 0 Versions 0 Wiki Activité
Parcourir la source

Upload files to ''

andrea.nieves7 il y a 2 ans
Parent
74bc344fae
révision
4cf0586882
2 fichiers modifiés avec 548 ajouts et 128 suppressions
Vue séparée Afficher les stats Diff
  1. 99
    128
      App.js
  2. 449
    0
      Datos.js

+ 99
- 128
App.js Voir le fichier 

@@ -1,159 +1,130 @@
1 
-import { StatusBar } from 'expo-status-bar';
2 
-import React from 'react';
3 
-import { View, Image, StyleSheet, Text, Button, ScrollView } from 'react-native';
4 
-import data from './transfer.json'
1 
+import React, {useState, useEffect} from 'react';
2 
+import { View, Image, Text, Button, ScrollView, Pressable, Linking,StyleSheet} from 'react-native';
3 
+import {Picker, DataButton} from "./Datos"
4 
+import { styles } from './styles';
5 5
6 6
7 7
8 
+//actual application
8 9
9 
-//change this to an external css file later
10 
-const styles = StyleSheet.create({
11 
-
12 
-  buttons: {
13 
-	  flexDirection: 'row',
14 
-	  justifyContent: 'center',
15 
-	  marginTop: 30,
16 
-	  marginBottom: 30,
17 
-	  margin: "4px",
18 
-	  borderColor: "grey",
19 
-  },
20 
-  container: {
21 
-    flexDirection: 'column',
22 
-	justifyContent: 'center',
23 
-    backgroundColor: 'black',
24 
-    alignItems: 'center',
25 
-    justifyContent: 'center',
26 
-	marginTop: 20,
27 
-	marginBottom: 500
28 
-  },
29 
-  containerbackground:{
30 
-
31 
-    backgroundColor: '#063970',
32 
-	padding: "40px"
33 
-  },
34 
-  intro: {
35 
-	  fontWeight: "bold",
36 
-      color:"#beb2c8",
37 
-	  fontSize: 30,
38 
-
39 
-  },
40 
-  sub: {
41 
-      color:"#D7D6D6",
42 
-
43 
-	  fontSize: 20,
44 
-  },
45 
-  scrollView:{
46 
-	  marginHorizontal: 20
47 
-  }
48 
-});
49 
-
50 
-//default button press
51 
-
52 
-const handlePress = () => false
53 
-
54 
-
55 
-//data parsing goes here
56 
-
57 
-function importJSON() {
58 
-	var stuff = JSON.stringify(data)
59 
-	return stuff
60 
-}
10 
+class App extends React.Component {
61 11
62 
-//states
12 
+//the text at the end of a page gets cut off if anyone knows how to fix that?
13 
+vars = {
14 
+	welcome:
63 15
64 
-let states = {
65 
-
66 
-		welcome:
67 
-
16 
+	<View style = {styles.containerbackground}>
17 
+		<ScrollView style={styles.scrollView}>
18 
+			<View style = {styles.container}>
19 
+				<Text style={styles.intro}>Bienvenido!</Text>
20 
+			</View>
21 
+
22 
+			<View style = {styles.container}>
23 
+
24 
+				<Text style={styles.sub}>Aquí podra mantenerse al tanto con las
25 
+					últimas noticias relacionadas al Censo y tener acceso a los
26 
+					los Demographic Data Profiles de cada municipio de
27 
+					Puerto Rico.
28 
+				</Text>
29 
+			</View>
68 30
31 
+			<View style = {styles.bottom}>
32 
+				<Text style={styles.intro2}>Contactenos:</Text>
33 
+				<Text style={styles.sub}>Prof: Hernando Mattei Torres
34 
+				<Button onPress={() => Linking.openURL('mailto:hernando.mattei@upr.edu') }
35 
+				title="e-mail" /></Text>
36 
+				<Text style={styles.sub}>Angelica Rosario Santos
37 
+				<Button onPress={() => Linking.openURL('mailto:angelica.rosario2@upr.edu') }
38 
+				title="e-mail" /></Text>
39 
+				<Text style={styles.sub}>Data from:</Text>
40 
+				<Image source={require('./census-logos.png')} />
41 
+				<Button onPress={() => Linking.openURL('https://data.census.gov/profile?q=United+States&g=0100000US') }
42 
+				title="United States Census page" />
43 
+			</View>
44 
+		</ScrollView>
45 
+	</View>,
46 
+
47 
+
48 
+	newsView:
69 49 
 		<View style = {styles.containerbackground}>
70 
-		  <View style = {styles.container}>
71 
-
72 
-
73 
-			<Text style={styles.intro}>BIENVENIDO!!!!</Text>
74 
-
75 
-			<Text style={styles.sub}>Aqui podra mantenerse al tanto con las
76 
-			ultimas noticias relacionadas al censo</Text>
77 
-
78 
-			<Image source={require('./testimg.gif')} />
79 
-
80 
-		  </View>
50 
+			<ScrollView style={styles.scrollView}>
51 
+				<View style = {styles.container}>
52 
+
53 
+					<Text style={styles.intro}>Noticias</Text>
54 
+
55 
+					<Image source={require('./Logo.jpeg')} />
56 
+
57 
+				</View>
58 
+			</ScrollView>
81 59 
 		</View>,
82 
-
83 
-		dataView:
84 60
61 
+	dataOp:
85 62 
 		<View style = {styles.containerbackground}>
86 
-		<ScrollView style={styles.scrollView}>
87 
-		 <View style = {styles.container}>
88 
-
89 
-
90 
-			<Text style={styles.intro}>DATADATADATADATADATA</Text>
91 
-
92 
-			<Text style={styles.sub}>{importJSON()}</Text>
93 
-
94 
-			<Image source={require('./testimg.gif')} />
95 
-
96 
-		 </View>
97 
-		</ScrollView></View>,
63 
+			<ScrollView nestedScrollEnabled = {true} style={styles.scrollView}>
64 
+				<View style = {styles.container}>
65 
+					<Text style={styles.intro}>DATA VIEWING PROJECT</Text>
66 
+				</View>
98 67
68 
+
69 
+					<Picker />
70 
+
71 
+					<DataButton />
72 
+
99 73
100 
-		newsView:
101 
-		<View style = {styles.containerbackground}>
102 
-		<ScrollView style={styles.scrollView}>
103 
-		 <View style = {styles.container}>
104 
-
105 
-
106 
-			<Text style={styles.intro}>Noticias</Text>
107 
-
108 
-			<Image source={require('./testimg.gif')} />
74 
+			</ScrollView>
109 75
110 
-		 </View>
111 
-		</ScrollView></View>
76 
+		</View>
112 77
113 78
114 
-	}
79 
+}
115 80
116 81
82 
+	//current state
83 
+	state = {current: this.vars.welcome}
117 84
85 
+	//state changing functions
86 
+	setHome = () => this.setState({ current: this.vars.welcome })
118 87
119 
-class App extends React.Component {
120 88
121 
-//current state
122 
-state = {current: states.welcome}
89 
+	setData = () => this.setState({current: this.vars.dataOp})
90 
+
91 
+
92 
+	setNews = () => this.setState({ current: this.vars.newsView })
123 93
124 
-//state changing functions
125 
-setHome = () => this.setState({ current: states.welcome })
126 
-setData = () => this.setState({ current: states.dataView })
127 
-setNews = () => this.setState({ current: states.newsView })
128 
-
129 94
95 
+
130 96 
 	//render app
131 97 
    render() {
132 
-      return (
133 
-	  <View>
134 
-
135 
-			<View style = {styles.containerbackground}>
136 
-				<View style = {styles.container}>
137 
-					<Text style={styles.sub}> Navegador</Text>
138 
-						<View style = {styles.buttons}>
139 
-			 		 			<Button
140 
-								onPress = {this.setNews}
141 
-				 				title = "Noticias"
142 
-				 				color = "blue"
143 
-			  					/>
144 
-
145 
-			  					<Button
146 
-								 onPress = {this.setData}
147 
-								 title = "Datos"
148 
-								 color = "black"
149 
-			  					/>
98 
+		return (
99 
+			<View>
100 
+				<View style = {styles.containerbackground}>
101 
+					<View style = {styles.buttonContainer}>
102 
+
103 
+						<Text style={styles.Navsub}> Demographic Data Viewer</Text>
104 
+
105 
+						<View style = {styles.navContainer}>
106 
+							<Pressable style={styles.buttons} onPress = {this.setNews}>
107 
+								<Text style={styles.text}> Noticias</Text>
108 
+							</Pressable>
109 
+
110 
+							<Pressable style={styles.buttons} onPress = {this.setHome}>
111 
+								<Text style={styles.text}> Hogar</Text>
112 
+							</Pressable>
113 
+
114 
+							<Pressable style={styles.buttons} onPress = {this.setData}>
115 
+								<Text style={styles.text}> Datos</Text>
116 
+							</Pressable>
150 117
151 118 
 						</View>
152 
-		  				{this.state.current}
153 
-						</View>
119 
+
120 
+						{this.state.current}
121 
+
122 
+					</View>
123 
+
124 
+				</View>
125 
+
154 126 
 			</View>
155 
-		</View>
156 
-      );
127 
+		);
157 128 
    }
158 129 
 }
159 130

+ 449
- 0
Datos.js Voir le fichier 

@@ -0,0 +1,449 @@
1 
+import React, {useState} from 'react';
2 
+import { View, Text, Pressable, StyleSheet, Alert} from 'react-native';
3 
+import DropDownPicker from 'react-native-dropdown-picker';
4 
+import { Table, TableWrapper, Row, Rows, Col, Cols, Cell } from 'react-native-table-component';
5 
+import { parse } from 'json2csv'
6 
+//import {styles} from "./styles"
7 
+
8 
+
9 
+var allData
10 
+var allTitle
11 
+
12 
+const styles = StyleSheet.create({
13 
+
14 
+	buttons: {
15 
+		flexDirection: 'row',
16 
+		justifyContent: 'center',
17 
+		marginTop: 40,
18 
+		marginBottom: 30,
19 
+		margin: 30,
20 
+		borderColor: "grey",
21 
+		borderRadius: 8,
22 
+		padding: (30, 16),
23 
+		backgroundColor: "black",
24 
+		marginTop: 0,
25 
+	},
26 
+	navContainer: {
27 
+	  flexDirection: 'row',
28 
+	  justifyContent: "space-evenly",
29 
+	  borderColor: "black",
30 
+	  borderWidth: 5,
31 
+	  borderRadius: 8,
32 
+	  paddingTop: 20,
33 
+	  backgroundColor: "gray",
34 
+	  marginTop: 5,
35 
+  },
36 
+	buttonContainer: {
37 
+	  flexDirection: 'column',
38 
+	  backgroundColor: '#f0f8ff',
39 
+	  alignItems: 'center',
40 
+	  justifyContent: 'center',
41 
+	  paddingTop:100,
42 
+	  marginTop: 40,
43 
+	},
44 
+	container: {
45 
+	  flexDirection: 'column',
46 
+	  justifyContent: 'center',
47 
+	  backgroundColor: '#f0f8ff',
48 
+	  alignItems: 'center',
49 
+	  justifyContent: 'center',
50 
+	  paddingTop:20,
51 
+	  marginTop: 20,
52 
+	},
53 
+	containerbackground:{
54 
+
55 
+	  backgroundColor: '#f0f8ff'
56 
+	},
57 
+	intro: {
58 
+		fontWeight: "bold",
59 
+		color:"#black",
60 
+		fontSize: 30,
61 
+	},
62 
+
63 
+	sub: {
64 
+	  color:"#black",
65 
+	  fontWeight: "bold",
66 
+	  fontSize: 15,
67 
+	  paddingBottom:10,
68 
+  },
69 
+
70 
+	Navsub: {
71 
+		color:"#black",
72 
+		fontWeight: "bold",
73 
+		fontSize: 30,
74 
+		paddingBottom:10,
75 
+	},
76 
+	scrollView:{
77 
+		marginHorizontal: 20
78 
+	},
79 
+	listItem:{
80 
+		fontSize: 30,
81 
+		color: "white",
82 
+		textDecorationLines: "underline"
83 
+	},
84 
+	listButtons:{
85 
+		fontSize: 15,
86 
+		color: "white",
87 
+		textDecorationLines: "underline"
88 
+	},
89 
+	buttonsVer: {
90 
+		flexDirection: 'column',
91 
+		justifyContent: 'center',
92 
+		marginTop: 40,
93 
+		marginBottom: 30,
94 
+		margin: 30,
95 
+		borderColor: "grey",
96 
+	},
97 
+	bottom: {
98 
+	  flex: 0.3,
99 
+	  backgroundColor: "gray",
100 
+	  borderWidth: 5,
101 
+	  alignItems: 'center',
102 
+	  borderBottomLeftRadius: 20,
103 
+	  borderBottomRightRadius: 20,
104 
+
105 
+  },text: {
106 
+	  fontSize: 16,
107 
+	  lineHeight: 21,
108 
+	  fontWeight: 'bold',
109 
+	  letterSpacing: 0.25,
110 
+	  color: 'white',
111 
+	},
112 
+	tablecontainer: { flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#fff' },
113 
+	head: {  height: 40,  backgroundColor: '#f1f8ff'  },
114 
+	wrapper: { flexDirection: 'row' },
115 
+	title: { flex: 1, backgroundColor: '#f6f8fa' },
116 
+	row: {  height: 28  },
117 
+	tabletext: { textAlign: 'center' }
118 
+  });
119 
+var table = ""
120 
+var pueblo = ""
121 
+
122 
+//where data will be stored
123 
+var information
124 
+
125 
+function Picker() {
126 
+
127 
+    //table to pick from
128 
+
129 
+
130 
+  const [openTable, setOpenTable] = useState(false);
131 
+  const [valueTable, setValueTable] = useState(null);
132 
+  const [table, setTable] = useState([
133 
+    {label:'DP02PR', value: 'DP02PR'},
134 
+    {label:'DP03', value: 'DP03'},
135 
+	{label:'DP04', value: 'DP04'},
136 
+    {label:'DP05', value: 'DP05'},
137 
+  ]);
138 
+
139 
+  //cambiar pueblo
140 
+
141 
+
142 
+  //pueblo
143 
+  const [openPueblo, setOpenPueblo] = useState(false);
144 
+  const [valuePueblo, setValuePueblo] = useState(null);
145 
+  const [pueblo, setPueblo] = useState([
146 
+    {label: 'Adjuntas', value: '001'},
147 
+    {label: 'Aguada', value: '003'},
148 
+	{label: 'Aguadillas', value: '005'},
149 
+    {label: 'Aguas Buenas', value: '007'},
150 
+	{label: 'Aibonito', value: '009'},
151 
+    {label: 'Añasco', value: '011'},
152 
+	{label: 'Arecibo', value: '013'},
153 
+    {label: 'Arroyo', value: '015'},
154 
+	{label: 'Barceloneta', value: '017'},
155 
+    {label: 'Barranquitas', value: '019'},
156 
+	{label: 'Bayamón', value: '021'},
157 
+    {label: 'Cabo Rojo', value: '023'},
158 
+	{label: 'Caguas', value: '025'},
159 
+    {label: 'Camuy', value: '027'},
160 
+	{label: 'Canóvanas', value: '029'},
161 
+	{label: 'Carolina', value: '031'},
162 
+	{label: 'Cataño', value: '033'},
163 
+	{label: 'Cayey', value: '035'},
164 
+	{label: 'Ceiba', value: '037'},
165 
+	{label: 'Ciales', value: '039'},
166 
+	{label: 'Cidra', value: '041'},
167 
+	{label: 'Coamo', value: '043'},
168 
+	{label: 'Comerío', value: '045'},
169 
+	{label: 'Corozal', value: '047'},
170 
+	{label: 'Culebra', value: '049'},
171 
+	{label: 'Dorado', value: '051'},
172 
+	{label: 'Fajardo', value: '053'},
173 
+	{label: 'Florida', value: '054'},
174 
+	{label: 'Guánica', value: '055'},
175 
+	{label: 'Guayama', value: '057'},
176 
+	{label: 'Guayanilla', value: '059'},
177 
+	{label: 'Guaynabo', value: '061'},
178 
+	{label: 'Gurabo', value: '063'},
179 
+	{label: 'Hatillo', value: '065'},
180 
+	{label: 'Hormigueros', value: '067'},
181 
+	{label: 'Humacao', value: '069'},
182 
+	{label: 'Isabela', value: '071'},
183 
+	{label: 'Jayuya', value: '073'},
184 
+	{label: 'Juana Díaz', value: '075'},
185 
+	{label: 'Juncos', value: '077'},
186 
+	{label: 'Lajas', value: '079'},
187 
+	{label: 'Lares', value: '081'},
188 
+	{label: 'Las Marías', value: '083'},
189 
+	{label: 'Las Piedras', value: '085'},
190 
+	{label: 'Loíza', value: '087'},
191 
+	{label: 'Luquillo', value: '089'},
192 
+	{label: 'Manatí', value: '091'},
193 
+	{label: 'Maricao', value: '093'},
194 
+	{label: 'Maunabo', value: '095'},
195 
+	{label: 'Mayagüez', value: '097'},
196 
+	{label: 'Moca', value: '099'},
197 
+	{label: 'Morovis', value: '101'},
198 
+	{label: 'Naguabo', value: '103'},
199 
+	{label: 'Naranjito', value: '105'},
200 
+	{label: 'Orocovis', value: '107'},
201 
+	{label: 'Patillas', value: '109'},
202 
+	{label: 'Peñuelas', value: '111'},
203 
+	{label: 'Ponce', value: '113'},
204 
+	{label: 'Quebradillas', value: '115'},
205 
+	{label: 'Rincón', value: '117'},
206 
+	{label: 'Río Grande', value: '119'},
207 
+	{label: 'Sabana Grande', value: '121'},
208 
+	{label: 'Salinas', value: '123'},
209 
+	{label: 'San Germán', value: '125'},
210 
+	{label: 'San Juan', value: '127'},
211 
+	{label: 'San Lorenzo', value: '129'},
212 
+	{label: 'San Sebastián', value: '131'},
213 
+	{label: 'Santa Isabel', value: '133'},
214 
+	{label: 'Toa Alta', value: '135'},
215 
+	{label: 'Toa Baja', value: '137'},
216 
+	{label: 'Trujillo Alto', value: '139'},
217 
+	{label: 'Utuado', value: '141'},
218 
+	{label: 'Vega Alta', value: '143'},
219 
+	{label: 'Vega Baja', value: '145'},
220 
+	{label: 'Vieques', value: '147'},
221 
+	{label: 'Villalba', value: '149'},
222 
+	{label: 'Yabucoa', value: '151'},
223 
+	{label: 'Yauco', value: '153'}
224 
+  ]);
225 
+
226 
+
227 
+    return (
228 
+        <View>
229 
+            <DropDownPicker
230 
+                open={openTable}
231 
+                value={valueTable}
232 
+                items={table}
233 
+                setOpen={setOpenTable}
234 
+                setValue={setValueTable}
235 
+                setItems={setTable}
236 
+                onChangeValue = {(valueTable) => {
237 
+                    updateTable(valueTable);
238 
+                }}
239 
+                onOpen = {() => {setOpenPueblo(false)}}
240 
+                zIndex={3000}
241 
+                zIndexInverse={1000}
242 
+                placeholder="Tabla de Datos"
243 
+            />
244 
+
245 
+
246 
+            <DropDownPicker
247 
+                searchable={true}
248 
+                open={openPueblo}
249 
+                value={valuePueblo}
250 
+                items={pueblo}
251 
+                setOpen={setOpenPueblo}
252 
+                setValue={setValuePueblo}
253 
+                setItems={setPueblo}
254 
+                onChangeValue = {(valuePueblo) => {
255 
+                    updatePueblo(valuePueblo);
256 
+                }}
257 
+                onOpen = {() => {setOpenTable(false)}}
258 
+                zIndex={1000}
259 
+                zIndexInverse={3000}
260 
+                placeholder="Pueblo"
261 
+                searchPlaceholder="Busqueda..."
262 
+            />
263 
+
264 
+        </View>
265 
+
266 
+    );
267 
+}
268 
+
269 
+
270 
+
271 
+function updateTable(value){
272 
+    table = value
273 
+}
274 
+
275 
+function updatePueblo(value){
276 
+    pueblo = value
277 
+}
278 
+
279 
+//calls data query
280 
+function loadDoc(query) {
281 
+	console.log("load")
282 
+    var xhttp = new XMLHttpRequest();
283 
+    xhttp.onreadystatechange = function() {
284 
+        if (this.readyState == 4) {
285 
+            information = this.responseText;
286 
+
287 
+			if(this.status == 200){console.log("received response");organize()}
288 
+            }
289 
+        }
290 
+        xhttp.open("GET", query, true);
291 
+        xhttp.send(null);
292 
+        }
293 
+
294 
+
295 
+function fetchData() {
296 
+
297 
+        var query = "https://api.census.gov/data/2020/acs/acs5/profile?get=group" + "(" + table + ")&for=county:" + pueblo + "&in=state:72"
298 
+        if(pueblo && table)
299 
+        {loadDoc(query)}
300 
+
301 
+        else
302 
+        {Alert.alert("Please fill every parameter before calling!")}
303 
+
304 
+    }
305 
+
306 
+
307 
+
308 
+function DataTable() {
309 
+    let tableHead = ['Variable', 'Estimate', 'MoE']
310 
+    let tableTitle = allTitle
311 
+    let tableData = allData
312 
+    return (
313 
+      <View style={styles.tablecontainer}>
314 
+        <Table borderStyle={{borderWidth: 1}}>
315 
+          <Row data={tableHead} flexArr={[1, 2, 1, 1]} style={styles.head} textStyle={styles.tabletext}/>
316 
+          <TableWrapper style={styles.wrapper}>
317 
+            <Col data={tableTitle} style={styles.title} heightArr={[28,28]} textStyle={styles.tabletext}/>
318 
+            <Rows data={tableData} flexArr={[2, 1, 1]} style={styles.row} textStyle={styles.tabletext}/>
319 
+          </TableWrapper>
320 
+        </Table>
321 
+      </View>
322 
+    )
323 
+}
324 
+
325 
+//organize data make it pretty
326 
+//add loading thing while this organizes all the data !!!
327 
+
328 
+function organize(){
329 
+
330 
+	let bigData = JSON.parse(information)
331 
+	bigData = parse(bigData)
332 
+	var variables = []
333 
+	var estimates = []
334 
+	var moe = []
335 
+
336 
+	let divData = bigData.split(",")
337 
+	let num = Math.floor(divData.length/3) + 1
338 
+	for(let i = num; i < Math.floor(divData.length/3*2); i++){
339 
+		variables.push(divData[i])
340 
+		estimates.push(divData[i+num])
341 
+		moe.push(divData[i+num*1.5])
342 
+
343 
+	}
344 
+
345 
+	//console.log(variables)
346 
+	//console.log(estimates)
347 
+	//console.log(moe)
348 
+	let tableContents = []
349 
+	for(let i = 0; i < estimates.length; i++)
350 
+	{
351 
+		tableContents.push([estimates[i],moe[i]])
352 
+	}
353 
+
354 
+	allTitle = variables
355 
+	allData = tableContents
356 
+
357 
+	information = <DataTable />
358 
+
359 
+
360 
+	/*
361 
+	var stringDiv = JSON.stringify(information)
362 
+	stringDiv = stringDiv.replace('[[', '');
363 
+	stringDiv = stringDiv.replace(']]', '');
364 
+	stringDiv = stringDiv.split(',')
365 
+	//create smaller array variables
366 
+	let variables = []
367 
+	let value = []
368 
+	let est = []
369 
+
370 
+
371 
+	//theres a better way to do this but im not fixing it rn
372 
+	for(let i = 0; i<stringDiv.length; i++){
373 
+
374 
+		if(i<stringDiv.length/3)
375 
+		    {variables.push(stringDiv[i])}
376 
+		else if(i<stringDiv.length/3*2)
377 
+		    {value.push(stringDiv[i])}
378 
+		else
379 
+            {est.push(stringDiv[i])}
380 
+	}
381 
+
382 
+	//anyways this to format it
383 
+
384 
+	console.log("vars:",variables)
385 
+	console.log("val:",value)
386 
+	console.log("est:",est)
387 
+	*/
388 
+
389 
+
390 
+}
391 
+
392 
+
393 
+
394 
+
395 
+function json_2_csv(information){
396 
+
397 
+	const csv = parse(obj);
398 
+	console.log(csv);
399 
+}
400 
+
401 
+//fix
402 
+
403 
+DropDownPicker.setListMode("SCROLLVIEW")
404 
+
405 
+
406 
+//data parsing goes here
407 
+function getInfo(){
408 
+	return information
409 
+}
410 
+
411 
+//data display
412 
+
413 
+class DataButton extends React.Component{
414 
+
415 
+
416 
+	state = {
417 
+		updated: 1,
418 
+		notUpdated: 0
419 
+	}
420 
+
421 
+	pullData = () => {fetchData(); this.setState({current: 1})}
422 
+
423 
+
424 
+	//the reason you need to press the button twice is bc the http request doesnt finish in time
425 
+	//for information to be updated before its rerendered
426 
+	componentDidUpdate(){
427 
+		if(this.state.current == 1){
428 
+			this.setState({current: 0})
429 
+		}
430 
+	}
431 
+
432 
+	state = {current: 0}
433 
+
434 
+	render() {
435 
+		return(
436 
+            <View style = {styles.container}>
437 
+
438 
+                    <Pressable style={styles.buttons} onPress = {this.pullData}>
439 
+                        <Text style={styles.text}> Fetch Data</Text>
440 
+                    </Pressable>
441 
+
442 
+                        <Text style={styles.sub}>{information}</Text>
443 
+
444 
+            </View>
445 
+	    );
446 
+    }
447 
+}
448 
+
449 
+export { Picker, updateTable, updatePueblo,loadDoc,fetchData,DataButton};