From b7f6bc70bb04e52a96dedccc6f87e404082ed9fa Mon Sep 17 00:00:00 2001
From: Maria Sanchez <paosanchez30@hotmail.com>
Date: Wed, 24 Aug 2022 20:38:31 -0600
Subject: [PATCH] top bar navigation profile

---
 mobile-ui/components/AreaComun.js |   4 +-
 mobile-ui/components/Profile.js   | 101 +++++++++++++++---------------
 mobile-ui/package.json            |   8 ++-
 3 files changed, 58 insertions(+), 55 deletions(-)

diff --git a/mobile-ui/components/AreaComun.js b/mobile-ui/components/AreaComun.js
index 01cd3807..735b6d56 100644
--- a/mobile-ui/components/AreaComun.js
+++ b/mobile-ui/components/AreaComun.js
@@ -144,13 +144,13 @@ export default function AreaComun({navigation}){
           <FormControl isRequired>
             <FormControl.Label>Hora de inicio</FormControl.Label>
             <View  >
-            <DateTimePicker mode="time" is24Hour={true} value={time} onChangeStart={onChangeStart}/>
+            <DateTimePicker mode="datetime" is24Hour value={time} onChangeStart={onChangeStart}/>
             </View>
           </FormControl>
           <FormControl isRequired>
             <FormControl.Label>Hora de finalización</FormControl.Label>
             <View  >
-            <DateTimePicker mode="time" is24Hour={true} value={endTime} onChangeEnd={onChangeEnd}/>
+            <DateTimePicker mode="datetime" is24Hour value={endTime} onChangeEnd={onChangeEnd}/>
             </View>
            
           </FormControl>
diff --git a/mobile-ui/components/Profile.js b/mobile-ui/components/Profile.js
index 1f42b353..55837943 100644
--- a/mobile-ui/components/Profile.js
+++ b/mobile-ui/components/Profile.js
@@ -4,9 +4,11 @@ import {
   Box, Button,
   Center, FormControl, Heading, ScrollView, VStack
 } from "native-base";
-import { Dimensions, StyleSheet, TextInput } from "react-native";
+import { Dimensions, StyleSheet, TextInput, useWindowDimensions } from "react-native";
 import { UserContext } from "../context/UserContext";
-import {SceneMap, TabView} from 'react-native-pager-view';
+import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
+
+const { Navigator, Screen } = createMaterialTopTabNavigator();
 
 export default function Profile({ navigation }) {
 
@@ -16,20 +18,21 @@ export default function Profile({ navigation }) {
   const [email, setEmail] = useState(); 
   const [password, setPassword] = useState();
   const [index, setIndex] = useState(0); 
+  const layout = useWindowDimensions(); 
 
-  const [routes] = useState([{
-    key: "first", 
-    title: 'Información'
-  }, {
-  key: "second", 
-  title: 'Contraseña'}])
+  // 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 = () => {
+  const ProfileView = () => (
 
     <ScrollView width='100%' h='550' ml='36' _contentContainerStyle={{
       px: "20px",
@@ -79,9 +82,9 @@ export default function Profile({ navigation }) {
 
       </ScrollView>
 
-  }
+  )
 
-  const PasswordView = () => {
+  const PasswordView = () => (
 
     <ScrollView width='100%' h='550' ml='36' _contentContainerStyle={{
       px: "20px",
@@ -126,41 +129,41 @@ export default function Profile({ navigation }) {
 
     </ScrollView>
     
-  }
+  )
 
-  const initialLayout = {
-    width: Dimensions.get('window').width
-  }
+  // const initialLayout = {
+  //   width: Dimensions.get('window').width
+  // }
 
-  const renderScene = SceneMap({
-    first: ProfileView, 
-    second: PasswordView
-  })
+  // 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 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() => {
@@ -208,14 +211,12 @@ export default function Profile({ navigation }) {
 
 
     return (
-        <Center>
-        <TabView navigationState={{
-              index,
-              routes
-            }} renderScene={renderScene} renderTabBar={renderTabBar} onIndexChange={setIndex} initialLayout={initialLayout} style={{
-              marginTop: StatusBar.currentHeight
-            }} />;
-    </Center>
+     
+          <Navigator>
+            <Screen name="Perfil" component={ProfileView} />
+            <Screen name="Contraseña" component={PasswordView} />
+        
+          </Navigator>
 
   )
 
diff --git a/mobile-ui/package.json b/mobile-ui/package.json
index 9e728a9c..dec3d08f 100644
--- a/mobile-ui/package.json
+++ b/mobile-ui/package.json
@@ -17,8 +17,10 @@
     "eject": "expo eject"
   },
   "dependencies": {
+    "@react-native-community/datetimepicker": "4.0.0",
     "@react-native-community/masked-view": "^0.1.11",
     "@react-navigation/bottom-tabs": "^6.3.2",
+    "@react-navigation/material-top-tabs": "^6.2.3",
     "@react-navigation/native": "^6.0.11",
     "@react-navigation/native-stack": "^6.7.0",
     "@react-navigation/stack": "^6.2.2",
@@ -31,16 +33,16 @@
     "react-dom": "17.0.1",
     "react-native": "0.64.3",
     "react-native-gesture-handler": "~2.1.0",
+    "react-native-pager-view": "5.4.9",
     "react-native-reanimated": "~2.3.1",
     "react-native-safe-area-context": "3.3.2",
     "react-native-screens": "~3.10.1",
     "react-native-simple-time-picker": "^1.3.11",
     "react-native-svg": "12.1.1",
+    "react-native-tab-view": "^3.1.1",
     "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-pager-view": "5.4.9"
+    "universal-cookie": "^4.0.4"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9"