# Conflicts:
#	MocionesIUPI/package-lock.json
#	MocionesIUPI/package.json
#	MocionesIUPI/routes/homeStack.js
#	MocionesIUPI/screens/HomeScreen.js
#	MocionesIUPI/screens/PincodeScreen.js

MocionesIUPI/package-lock.json

@@ -10,7 +10,6 @@
       "dependencies": {
         "@apollo/client": "^3.7.2",
         "@expo/webpack-config": "^0.17.2",
-        "deprecated-react-native-prop-types": "^2.2.0",
         "expo": "~47.0.6",
         "expo-status-bar": "~1.4.2",
         "graphql": "^15.8.0",
@@ -18,13 +17,14 @@
         "react": "18.1.0",
         "react-dom": "18.1.0",
         "react-native": "0.70.5",
+        "react-native-gesture-handler": "^2.8.0",
         "react-native-paper": "^3.12.0",
         "react-native-safe-area-context": "4.4.1",
         "react-native-screens": "~3.18.0",
-        "react-native-smooth-pincode-input": "^1.0.9",
-        "react-native-svg": "13.4.0",
+        "react-native-svg": "^13.4.0",
         "react-native-vector-icons": "^9.2.0",
         "react-native-web": "~0.18.9",
+        "react-navigation-drawer": "^2.7.2",
         "react-navigation-material-bottom-tabs": "^2.3.5",
         "react-navigation-stack": "^2.10.4",
         "styled-components": "^5.3.6",
@@ -1848,7 +1848,6 @@
       "version": "2.0.17",
       "resolved": "https://registry.npmjs.org/@egjs/hammerjs/-/hammerjs-2.0.17.tgz",
       "integrity": "sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==",
-      "peer": true,
       "dependencies": {
         "@types/hammerjs": "^2.0.36"
       },
@@ -5804,8 +5803,7 @@
     "node_modules/@types/hammerjs": {
       "version": "2.0.41",
       "resolved": "https://registry.npmjs.org/@types/hammerjs/-/hammerjs-2.0.41.tgz",
-      "integrity": "sha512-ewXv/ceBaJprikMcxCmWU1FKyMAQ2X7a9Gtmzw8fcg2kIePI1crERDM818W+XYrxqdBBOdlf2rm137bU+BltCA==",
-      "peer": true
+      "integrity": "sha512-ewXv/ceBaJprikMcxCmWU1FKyMAQ2X7a9Gtmzw8fcg2kIePI1crERDM818W+XYrxqdBBOdlf2rm137bU+BltCA=="
     },
     "node_modules/@types/html-minifier-terser": {
       "version": "5.1.2",
@@ -8215,6 +8213,14 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/core-js": {
+      "version": "2.6.12",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
+      "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
+      "deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.",
+      "hasInstallScript": true,
+      "peer": true
+    },
     "node_modules/core-js-compat": {
       "version": "3.26.1",
       "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.26.1.tgz",
@@ -8894,16 +8900,6 @@
         "node": ">= 0.6"
       }
     },
-    "node_modules/deprecated-react-native-prop-types": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/deprecated-react-native-prop-types/-/deprecated-react-native-prop-types-2.2.0.tgz",
-      "integrity": "sha512-SiessglRbgelU8sHCrGRImdlNKfVGSp0n6+K304d0rCdHGU8wladJkPmufxE2AkjN2jy71sgekNd9IvdZp9jZg==",
-      "dependencies": {
-        "@react-native/normalize-color": "*",
-        "invariant": "*",
-        "prop-types": "*"
-      }
-    },
     "node_modules/des.js": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/des.js/-/des.js-1.0.1.tgz",
@@ -9195,6 +9191,27 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/encoding": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz",
+      "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==",
+      "peer": true,
+      "dependencies": {
+        "iconv-lite": "^0.6.2"
+      }
+    },
+    "node_modules/encoding/node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "peer": true,
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/end-of-stream": {
       "version": "1.4.4",
       "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
@@ -12442,6 +12459,26 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/isomorphic-fetch": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz",
+      "integrity": "sha512-9c4TNAKYXM5PRyVcwUZrF3W09nQ+sO7+jydgs4ZGW9dhsLG2VOlISJABombdQqQRXCwuYG3sYV/puGf5rp0qmA==",
+      "peer": true,
+      "dependencies": {
+        "node-fetch": "^1.0.1",
+        "whatwg-fetch": ">=0.10.0"
+      }
+    },
+    "node_modules/isomorphic-fetch/node_modules/node-fetch": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz",
+      "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==",
+      "peer": true,
+      "dependencies": {
+        "encoding": "^0.1.11",
+        "is-stream": "^1.0.1"
+      }
+    },
     "node_modules/jest-get-type": {
       "version": "26.3.0",
       "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-26.3.0.tgz",
@@ -16826,14 +16863,6 @@
         "react": "18.1.0"
       }
     },
-    "node_modules/react-native-animatable": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/react-native-animatable/-/react-native-animatable-1.3.3.tgz",
-      "integrity": "sha512-2ckIxZQAsvWn25Ho+DK3d1mXIgj7tITkrS4pYDvx96WyOttSvzzFeQnM2od0+FUMzILbdHDsDEqZvnz1DYNQ1w==",
-      "dependencies": {
-        "prop-types": "^15.7.2"
-      }
-    },
     "node_modules/react-native-codegen": {
       "version": "0.70.6",
       "resolved": "https://registry.npmjs.org/react-native-codegen/-/react-native-codegen-0.70.6.tgz",
@@ -16849,7 +16878,6 @@
       "version": "2.8.0",
       "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.8.0.tgz",
       "integrity": "sha512-poOSfz/w0IyD6Qwq7aaIRRfEaVTl1ecQFoyiIbpOpfNTjm2B1niY2FLrdVQIOtIOe+K9nH55Qal04nr4jGkHdQ==",
-      "peer": true,
       "dependencies": {
         "@egjs/hammerjs": "^2.0.17",
         "hoist-non-react-statics": "^3.3.0",
@@ -16890,6 +16918,35 @@
         "react-native-vector-icons": "*"
       }
     },
+    "node_modules/react-native-reanimated": {
+      "version": "1.13.4",
+      "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-1.13.4.tgz",
+      "integrity": "sha512-sFbZFh0WanKTa0Fz7GXCZUjWpk/u04ytprcIs4Kb+ijfQHChXva3m3yQZfvbrhRbABJNHrdeuyDgJxDM2mcBgw==",
+      "peer": true,
+      "dependencies": {
+        "fbjs": "^1.0.0"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
+    "node_modules/react-native-reanimated/node_modules/fbjs": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-1.0.0.tgz",
+      "integrity": "sha512-MUgcMEJaFhCaF1QtWGnmq9ZDRAzECTCRAF7O6UZIlAlkTs1SasiX9aP0Iw7wfD2mJ7wDTNfg2w7u5fSCwJk1OA==",
+      "peer": true,
+      "dependencies": {
+        "core-js": "^2.4.1",
+        "fbjs-css-vars": "^1.0.0",
+        "isomorphic-fetch": "^2.1.1",
+        "loose-envify": "^1.0.0",
+        "object-assign": "^4.1.0",
+        "promise": "^7.1.1",
+        "setimmediate": "^1.0.5",
+        "ua-parser-js": "^0.7.18"
+      }
+    },
     "node_modules/react-native-safe-area-context": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-4.4.1.tgz",
@@ -16929,18 +16986,6 @@
         "react-native": "*"
       }
     },
-    "node_modules/react-native-smooth-pincode-input": {
-      "version": "1.0.9",
-      "resolved": "https://registry.npmjs.org/react-native-smooth-pincode-input/-/react-native-smooth-pincode-input-1.0.9.tgz",
-      "integrity": "sha512-4V4tyUGJaze55FHuJW/gYVOD3fc4Pd7cTIrv7liTRIXR49y09C2O3XqJUdgNR+UwTgLrTt/8L2lvEuEVUk3kig==",
-      "dependencies": {
-        "prop-types": "^15.5.10",
-        "react-native-animatable": "^1.3.0"
-      },
-      "peerDependencies": {
-        "react-native": "*"
-      }
-    },
     "node_modules/react-native-svg": {
       "version": "13.4.0",
       "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-13.4.0.tgz",
@@ -17158,6 +17203,20 @@
         "react-native": "*"
       }
     },
+    "node_modules/react-navigation-drawer": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/react-navigation-drawer/-/react-navigation-drawer-2.7.2.tgz",
+      "integrity": "sha512-AZgluZ8txCG+MrITF+VuHYAnnLaUQw/HvxHKWrAngy/CbmyEIgXEowvShCKMZDMa7PUtKY5+xuwgQtniGgGKsg==",
+      "deprecated": "This package is no longer supported. Please use @react-navigation/drawer instead. See https://reactnavigation.org/docs/drawer-navigator/ for usage guide",
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*",
+        "react-native-gesture-handler": "^1.0.12",
+        "react-native-reanimated": "^1.0.0",
+        "react-native-screens": ">=1.0.0 || >= 2.0.0-alpha.0 || >= 2.0.0-beta.0 || >= 2.0.0",
+        "react-navigation": "^4.1.1"
+      }
+    },
     "node_modules/react-navigation-material-bottom-tabs": {
       "version": "2.3.5",
       "resolved": "https://registry.npmjs.org/react-navigation-material-bottom-tabs/-/react-navigation-material-bottom-tabs-2.3.5.tgz",

MocionesIUPI/package.json

@@ -11,29 +11,26 @@
   "dependencies": {
     "@apollo/client": "^3.7.2",
     "@expo/webpack-config": "^0.17.2",
-    "deprecated-react-native-prop-types": "^2.2.0",
     "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-dom": "18.1.0",
     "react-native": "0.70.5",
+    "react-native-gesture-handler": "^2.8.0",
     "react-native-paper": "^3.12.0",
     "react-native-safe-area-context": "4.4.1",
     "react-native-screens": "~3.18.0",
-    "react-native-smooth-pincode-input": "^1.0.9",
+    "react-native-svg": "^13.4.0",
     "react-native-vector-icons": "^9.2.0",
     "react-native-web": "~0.18.9",
+    "react-navigation-drawer": "^2.7.2",
     "react-navigation-material-bottom-tabs": "^2.3.5",
     "react-navigation-stack": "^2.10.4",
-    "yarn": "^1.22.19",
-    "react-native-web": "~0.18.9",
     "styled-components": "^5.3.6",
     "styled-system": "^5.1.5",
-    "react-native-svg": "13.4.0",
-    "react-native-safe-area-context": "4.4.1"
+    "yarn": "^1.22.19"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9"

MocionesIUPI/routes/homeStack.js

@@ -3,32 +3,34 @@ import { createAppContainer } from 'react-navigation';
 import React from "react";
 
 import HomeScreen from '../screens/HomeScreen';
-import PincodeScreen from '../screens/PincodeScreen';
-import testscreen from '../screens/testscreen';
-
 import MocionScreen from '../screens/MocionScreen';
+import Header from '../shared/header';
 
 {/*Aqui deberan estar todas las pantallas de la aplicacion
    no olvide hacer 'import MyPage from './MyPage' */}
 const screens = {
     Home: {
         screen: HomeScreen,
-        backgroundColor: '#e81b39', // no se como hacer que despliegue color
+        navigationOptions: {
+           headerTitle: () => <Header />
+        }
     },
 
     Mocion: {
         screen: MocionScreen,
-    },
+        navigationOptions: {
+            headerTitle: () => <Header />
+        }
 
-    Pinpage: {
-        screen: PincodeScreen,
-    },
 
-    test: {
-        screen: testscreen,
     }
 }
 
-const HomeStack = createStackNavigator(screens);
+const HomeStack = createStackNavigator(screens, {
+    defaultNavigationOptions: {
+        title: 'MocinesIUPI',
+        headerStyle:  { backgroundColor: "#e81b39",}
+    }
+});
 
 export default createAppContainer(HomeStack);

MocionesIUPI/screens/HomeScreen.js

@@ -1,21 +1,39 @@
-import React from "react";
+import { propertiesListToString } from "@expo/config-plugins/build/android/Properties";
+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 [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 
+        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')
+        navigation.navigate('Mocion');
     }
+    
+    useEffect(() => {
+        getMociones();
+      }, []);
 
     return (
         <View style = {globalStyles.container}>
             <Text style = {globalStyles.tittleText}>Home Screen</Text>
-            <Button title='Ir a pagina de pin' onPress={pressHandler} />
+            <Button title="go to pin page" onPress={pressHandler}/>
         </View>
-        
-        
-
     )
-}
-
+}

MocionesIUPI/screens/MocionScreen.js

@@ -1,41 +1,41 @@
 import React, { useEffect, useState } from 'react';
-import { ActivityIndicator, FlatList, Text, View } from 'react-native';
+import { ActivityIndicator, Button, FlatList, Text, TouchableOpacity, View } from 'react-native';
+import { globalStyles } from '../styles/global';
+import Card from '../shared/card';
 
 export default App = () => {
   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://192.168.1.200:5000/send?PIN=613382'); // connection to the website 
+         const json = await response.json();
+   
+         // setting the content of each category 
+         setMocion(json.Mocion); 
+         setDescription(json.Description);
+       } catch (error) {
+         console.error(error);
+       } finally {
+         setLoading(false); // once found the loading icon will be replaced with the content of the json
+       }
+     }
 
-  // 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();
+     useEffect(() => {
+      getMociones();
+    }, []);
 
-      // 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
-    }
-  }
-
-  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
+  // this is for displaying the mocion on the screen
   return (
     <View style={{ flex: 1, padding: 24 }}>
+
       <Text>{Mocion}</Text>
       <Text>{Description}</Text>
-      <Text>{PIN}</Text>
+      <Button title= 'A favor' color={'#e81b39'} />
     </View>
   );
 };

MocionesIUPI/screens/PincodeScreen.js

@@ -3,15 +3,14 @@ import { StyleSheet, View, Text, Button } from 'react-native';
 import { globalStyles } from "../styles/global";
 import SmoothPinCodeInput from 'react-native-smooth-pincode-input';
 
-const pin = 123456;
 
-//comentario
+
 
 export default class App extends React.Component {
     
     pressHandler = () => {
     {/*Dentro del parentesis va el path al screen para redirigir*/}
-      this.props.navigation.navigate('test')
+      this.props.navigation.navigate('Mocion')
     }
 
     state = {
@@ -21,7 +20,7 @@ export default class App extends React.Component {
     pinInput = React.createRef();
   
     _checkCode = (code) => {
-      if (code != pin) {
+      if (code != this.props.navigation.state.params.Pin) { //this is for recieving the parameters from another screen
         this.pinInput.current.shake()
           .then(() => this.setState({ code: '' }));
       } else {
@@ -48,7 +47,7 @@ export default class App extends React.Component {
           </View>
           
           <View style={globalStyles.container}>
-            { pincode && <Button title='Ir a mocion' onPress={this.pressHandler} />}
+            { pincode && <Button title='Ir a mocion' color = {'#e81b39'} onPress={this.pressHandler} />}
           </View>
 
         </View>

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: {
+
+  },
+});

MocionesIUPI/shared/header.js

@@ -0,0 +1,42 @@
+import React from "react";
+import { StyleSheet, Text, View, Image } from 'react-native';
+import { MaterialIcons } from '@expo/vector-icons';
+
+export default function Header() {
+    return (
+        <View style = {styles.header}>
+            <View style = {styles.headerTitle}>
+              <Image source={require('../assets/logo.jpg')} style = {styles.headerImage}/>
+                <Text style = {styles.headerText}> MocinesIUPI </Text>
+            </View>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+  header: {
+    color: '#e81b3',
+    width: '100%',
+    height: '100%',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+
+  headerText: {
+    fontWeight: 'bold',
+    fontSize:20,
+    color: '#FFF',
+    letterSpacing: 1,
+  },
+
+  headerTitle: {
+    flexDirection: 'row',
+  },
+
+  headerImage: {
+    width: 42,
+    height: 42,
+    marginHorizontal: 15,
+  }
+});

MocionesIUPI/styles/global.js

@@ -14,6 +14,16 @@ export const globalStyles = StyleSheet.create({
   paragraph: {
     marginVertical: 8,
     lineHeight: 20,
+  },
+
+  button: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 12,
+    paddingHorizontal: 32,
+    borderRadius: 4,
+    elevation: 3,
+    backgroundColor: '#e81b39',
   }
 });