Merge branch 'MocionesIUPI' of https://git.ccom.uprrp.edu/CCOM4030/JeLuOrRi into MocionesIUPI

MocionesIUPI/screens/HomeScreen.js

@@ -1,13 +1,39 @@
 import { propertiesListToString } from "@expo/config-plugins/build/android/Properties";
-import React from "react";
+import React, { useEffect, useState }from "react";
 import { StyleSheet, View, Text, Button } from 'react-native';
 import { globalStyles } from "../styles/global";
 
-export default function HomeScreen({ navigation }) {
-    
+export default App = ({ navigation }) => {
+    const [isLoading, setLoading] = useState(true);
+    const [Description, setDescription] = useState([]); // this is looking for 'Description' and it's content
+    const [Mocion, setMocion] = useState([]); // this is looking for 'Mocion' and it's content
+    const [PIN, setPIN] = useState([]); // this is looking for 'PIN' and it's content
+  
+    // this connects us to the API and fetches the json file with the mociones
+    const getMociones = async () => {
+       try {
+        const response = await fetch('http://10.190.1.140:5000/send?PIN=121071'); // connection to the website 
+        const json = await response.json();
+  
+        // setting the content of each category 
+        setMocion(json.Mocion); 
+        setDescription(json.Description);
+        setPIN(json.PIN);
+  
+      } catch (error) {
+        console.error(error);
+      } finally {
+        setLoading(false); // once found the loading icon will be replaced with the content of the json
+      }
+    }
+
     const pressHandler = () => {
         navigation.navigate('Pinpage')
     }
+    
+    useEffect(() => {
+        getMociones();
+      }, []);
 
     return (
         <View style = {globalStyles.container}>

MocionesIUPI/shared/card.js

@@ -0,0 +1,27 @@
+import React from "react";
+import { StyleSheet, View } from "react-native";
+
+export default function Card(props){
+    return (
+        <View style = {styles.card}>
+            <View style = {styles.cardContent}>
+                { props.childern }
+            </View>
+        </View>
+    )
+}
+
+const styles  = StyleSheet.create({
+  card: {
+    borderRadius: 6,
+    elevation: 3,
+    backgroundColor: '#fff', 
+    shadowOffset: { width: 1, height: 1},
+    shadowColor: '#333',
+    shadowOpacity: 0.3,
+  },
+
+  cardContent: {
+
+  },
+});