profile dividing user info and password

mobile-ui/components/LogIn.js

@@ -60,6 +60,7 @@ export default function LogIn({ navigation }) {
             navigation.navigate('Comunicados', {user})
           }else if(user.user_type == '3'){
             addUser(user);
+            // cambiar por ComunicadosGuarda luego
             navigation.navigate('Comunicados', {user})
           }
       })

mobile-ui/components/Profile.js

@@ -1,28 +1,167 @@
 import React, { useContext, useState } from "react";
 import { API } from "../environment/api";
-
 import {
   Box, Button,
   Center, FormControl, Heading, ScrollView, VStack
 } from "native-base";
-
-import { StyleSheet, TextInput } from "react-native";
+import { Dimensions, StyleSheet, TextInput } from "react-native";
 import { UserContext } from "../context/UserContext";
+import {SceneMap, TabView} from 'react-native-pager-view';
 
 export default function Profile({ navigation }) {
 
   const baseURL = `${API.BASE_URL}/user/updateUser/`
-  //const userData = JSON.parse(JSON.stringify(route.params));
   const [name, setName] = useState(); 
   const [apellido, setApellido] =useState(); 
   const [email, setEmail] = useState(); 
   const [password, setPassword] = useState();
+  const [index, setIndex] = useState(0); 
+
+  const [routes] = useState([{
+    key: "first", 
+    title: 'Información'
+  }, {
+  key: "second", 
+  title: 'Contraseña'}])
 
   const userData = useContext(UserContext)
   const id = userData.user._id;
 
   console.log(userData.user);
 
+  const ProfileView = () => {
+
+    <ScrollView width='100%' h='550' ml='36' _contentContainerStyle={{
+      px: "20px",
+      mb: "4",
+      minW: "72"
+    }}>
+             <Box safeArea p="2" w="90%" maxW="290" py="8">
+        <Heading size="lg" color="coolGray.800" _dark={{
+        color: "warmGray.50"
+      }} fontWeight="semibold">
+          Bienvenido {userData.user.name}
+        </Heading>
+        <Heading mt="1" color="coolGray.600" _dark={{
+        color: "warmGray.200"
+      }} fontWeight="medium" size="xs">
+          Modifique sus datos
+        </Heading>
+        <VStack space={3} mt="5">
+        <FormControl>
+            <FormControl.Label>DNI</FormControl.Label>
+            <TextInput type="text" defaultValue={userData.user.dni} editable={false} />
+          </FormControl>
+          {/* <FormControl>
+            <FormControl.Label>Teléfono</FormControl.Label>
+            <TextInput type="text" defaultValue={userData.user.phone} editable={false} />
+          </FormControl> */}
+          <FormControl>
+            <FormControl.Label>Nombre</FormControl.Label>
+            <TextInput style={styles.input} type="text" defaultValue={userData.user.name} onChangeText={(value) => setName(value) }/>
+          </FormControl>
+          <FormControl>
+            <FormControl.Label>Apellido</FormControl.Label>
+            <TextInput style={styles.input} type="text"defaultValue={userData.user.last_name} onChangeText={(value) => setApellido(value) } />
+          </FormControl>
+          <FormControl>
+            <FormControl.Label>Correo electrónico</FormControl.Label>
+            <TextInput style={styles.input} type="text" defaultValue={userData.user.email} onChangeText={(value) => setEmail(value) }/>
+          </FormControl>
+          <Button mt="2" backgroundColor="orange.300" onPress={() => updateInfo()}>
+            Actualizar
+          </Button>
+          <Button mt="6" colorScheme="error" onPress={() => navigation.navigate('Inicio')}>
+            Cerrar sesión
+          </Button>
+        </VStack>
+      </Box>
+
+      </ScrollView>
+
+  }
+
+  const PasswordView = () => {
+
+    <ScrollView width='100%' h='550' ml='36' _contentContainerStyle={{
+      px: "20px",
+      mb: "4",
+      minW: "72"
+    }}> 
+
+    <Box safeArea p="2" w="90%" maxW="290" py="8"> 
+    <Heading size="lg" color="coolGray.800" _dark={{
+        color: "warmGray.50"
+      }} fontWeight="semibold">
+          Bienvenido {userData.user.name}
+        </Heading>
+        <Heading mt="1" color="coolGray.600" _dark={{
+        color: "warmGray.200"
+      }} fontWeight="medium" size="xs">
+          Modifique sus contraseña
+        </Heading>
+
+        <VStack space={3} mt="5"> 
+        <FormControl>
+            <FormControl.Label>Contraseña actual</FormControl.Label>
+            <TextInput style={styles.input} type="password" defaultValue="" onChangeText={(value) => setPassword(value) }/>
+          </FormControl>
+          <FormControl>
+            <FormControl.Label>Nueva Contraseña</FormControl.Label>
+            <TextInput style={styles.input} type="password" defaultValue="" onChangeText={(value) => setPassword(value) }/>
+          </FormControl>
+
+          <FormControl>
+            <FormControl.Label>Confirmar nueva contraseña</FormControl.Label>
+            <TextInput style={styles.input} type="password" defaultValue="" onChangeText={(value) => setPassword(value) }/>
+          </FormControl>
+
+          <Button mt="2" backgroundColor="orange.300" onPress={() => updateInfo()}>
+            Actualizar contraseña
+          </Button>
+          
+        </VStack>
+    </Box>
+
+
+    </ScrollView>
+    
+  }
+
+  const initialLayout = {
+    width: Dimensions.get('window').width
+  }
+
+  const renderScene = SceneMap({
+    first: ProfileView, 
+    second: PasswordView
+  })
+
+
+  const renderTabBar = props => {
+    const inputRange = props.navigationState.routes.map((x, i) => i);
+    return <Box flexDirection="row">
+        {props.navigationState.routes.map((route, i) => {
+        const opacity = props.position.interpolate({
+          inputRange,
+          outputRange: inputRange.map(inputIndex => inputIndex === i ? 1 : 0.5)
+        });
+        const color = index === i ? useColorModeValue('#000', '#e5e5e5') : useColorModeValue('#1f2937', '#a1a1aa');
+        const borderColor = index === i ? 'cyan.500' : useColorModeValue('coolGray.200', 'gray.400');
+        return <Box borderBottomWidth="3" borderColor={borderColor} flex={1} alignItems="center" p="3" cursor="pointer">
+              <Pressable onPress={() => {
+            console.log(i);
+            setIndex(i);
+          }}>
+                <Animated.Text style={{
+              color
+            }}>{route.title}</Animated.Text>
+              </Pressable>
+            </Box>;
+      })}
+      </Box>;
+  };
+
   
   const updateInfo = async() => {
 
@@ -65,61 +204,17 @@ export default function Profile({ navigation }) {
       console.log("ERROR: " + error);
     }
   }
+
+
+
     return (
         <Center>
-
-          <ScrollView width='100%' h='550' ml='36' _contentContainerStyle={{
-      px: "20px",
-      mb: "4",
-      minW: "72"
-    }}>
-             <Box safeArea p="2" w="90%" maxW="290" py="8">
-        <Heading size="lg" color="coolGray.800" _dark={{
-        color: "warmGray.50"
-      }} fontWeight="semibold">
-          Bienvenido {userData.user.name}
-        </Heading>
-        <Heading mt="1" color="coolGray.600" _dark={{
-        color: "warmGray.200"
-      }} fontWeight="medium" size="xs">
-          Modifique sus datos
-        </Heading>
-        <VStack space={3} mt="5">
-        <FormControl>
-            <FormControl.Label>DNI</FormControl.Label>
-            <TextInput type="text" defaultValue={userData.user.dni} editable={false} />
-          </FormControl>
-          {/* <FormControl>
-            <FormControl.Label>Teléfono</FormControl.Label>
-            <TextInput type="text" defaultValue={userData.user.phone} editable={false} />
-          </FormControl> */}
-          <FormControl>
-            <FormControl.Label>Nombre</FormControl.Label>
-            <TextInput style={styles.input} type="text" defaultValue={userData.user.name} onChangeText={(value) => setName(value) }/>
-          </FormControl>
-          <FormControl>
-            <FormControl.Label>Apellido</FormControl.Label>
-            <TextInput style={styles.input} type="text"defaultValue={userData.user.last_name} onChangeText={(value) => setApellido(value) } />
-          </FormControl>
-          <FormControl>
-            <FormControl.Label>Correo electrónico</FormControl.Label>
-            <TextInput style={styles.input} type="text" defaultValue={userData.user.email} onChangeText={(value) => setEmail(value) }/>
-          </FormControl>
-          <FormControl>
-            <FormControl.Label>Contraseña actual</FormControl.Label>
-            <TextInput style={styles.input} type="password" defaultValue="" onChangeText={(value) => setPassword(value) }/>
-          </FormControl>
-          
-          <Button mt="2" backgroundColor="orange.300" onPress={() => updateInfo()}>
-            Actualizar
-          </Button>
-          <Button mt="6" colorScheme="error" onPress={() => navigation.navigate('Inicio')}>
-            Cerrar sesión
-          </Button>
-        </VStack>
-      </Box>
-
-      </ScrollView>
+        <TabView navigationState={{
+              index,
+              routes
+            }} renderScene={renderScene} renderTabBar={renderTabBar} onIndexChange={setIndex} initialLayout={initialLayout} style={{
+              marginTop: StatusBar.currentHeight
+            }} />;
     </Center>
 
   )

mobile-ui/package.json

@@ -39,7 +39,8 @@
     "react-native-table-component": "^1.2.2",
     "react-native-web": "0.17.1",
     "universal-cookie": "^4.0.4",
-    "@react-native-community/datetimepicker": "4.0.0"
+    "@react-native-community/datetimepicker": "4.0.0",
+    "react-native-pager-view": "5.4.9"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9"