working json

the code in this commit works, but the website needs to be online

the json the website sends doesnt work with the current code

MocionesIUPI/App.js

@@ -1,66 +1,40 @@
-import React from 'react';
-import { StatusBar } from 'expo-status-bar';
-import { render } from 'react-dom';
-import { StyleSheet, Text, View, ActivityIndicator } from 'react-native';
-
-export default class App extends React.Component {
-  
-  contructor(props) {
-    super(props);
-
-    this.state = {
-      isLoading: true,
-      dataSource: null,
-    }
-  }
-  
-  componentDidMount() {
-
-    return fetch('https://facebook.github.io/react-native/movies.json')
-      .then ( (response) => response.json() )
-      .then ( (responseJson) => {
-
-        this.setState({
-          isLoading: false,
-          dataSource: responseJson.movies,
-        })
-
-      })
-
-      .catch((error) => {
-        console.log(error)
-
-      });
-  }
-
-  render() {
-
-    if (this.state.isLoading){
-
-      return(
-        <View style={style.container}>
-          <ActivityIndicator />
-        </View>
-      )
-    } 
-    
-    else {
-      
-      return (
-        <View style={styles.container}>
-          <Text>Open up App.js to start working on your app!</Text>
-          <StatusBar style="auto" />
-        </View>
-      );
+import React, { useEffect, useState } from 'react';
+import { ActivityIndicator, FlatList, Text, View } from 'react-native';
+
+export default App = () => {
+  const [isLoading, setLoading] = useState(true);
+  const [data, setData] = useState([]);
+
+  // this connects us to the API and fetches the json file with the mociones
+  const getMociones = async () => {
+     try {
+      const response = await fetch('http://127.0.0.1:5000/send?PIN=121071');
+      const json = await response.json();
+      setData(json.Description);
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setLoading(false);
     }
   }
-}
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});
+  useEffect(() => {
+    getMociones();
+  }, []);
+
+  // here we want to display each mocion in a flatlist 
+  // it's supposed to be like buttons. Once clicked it would let you vote inside
+  return (
+    <View style={{ flex: 1, padding: 24 }}>
+      {isLoading ? <ActivityIndicator/> : (
+        <FlatList
+          data={data}
+          keyExtractor={({ id }, index) => id}
+          renderItem={({ item }) => (
+            <Text>{data}</Text>
+          )}
+        />
+      )}
+    </View>
+  );
+};

MocionesIUPI/package.json

@@ -9,13 +9,20 @@
     "web": "expo start --web"
   },
   "dependencies": {
+    "@apollo/client": "^3.7.2",
+    "@expo/webpack-config": "^0.17.2",
     "expo": "~47.0.6",
     "expo-status-bar": "~1.4.2",
+    "graphql": "^15.8.0",
+    "native-base": "^3.4.25",
     "react": "18.1.0",
+    "react-dom": "18.1.0",
     "react-native": "0.70.5",
     "react-native-web": "~0.18.9",
-    "react-dom": "18.1.0",
-    "@expo/webpack-config": "^0.17.2"
+    "styled-components": "^5.3.6",
+    "styled-system": "^5.1.5",
+    "react-native-svg": "13.4.0",
+    "react-native-safe-area-context": "4.4.1"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9"