From 03e78f24c572779b2d85a4fa3c98f95590b27347 Mon Sep 17 00:00:00 2001
From: Maria Sanchez <paosanchez30@hotmail.com>
Date: Mon, 22 Aug 2022 22:50:38 -0600
Subject: [PATCH] time picker reservas

---
 mobile-ui/components/AreaComun.js | 68 ++++++++++++++++++++-----------
 mobile-ui/package.json            |  1 +
 2 files changed, 45 insertions(+), 24 deletions(-)

diff --git a/mobile-ui/components/AreaComun.js b/mobile-ui/components/AreaComun.js
index c6b3a71c..6b2fd6d6 100644
--- a/mobile-ui/components/AreaComun.js
+++ b/mobile-ui/components/AreaComun.js
@@ -1,18 +1,17 @@
 import React, {useContext, useEffect, useState} from "react";
-
 import {
     Box, 
     Heading, 
     VStack, 
-    FormControl, 
-    Input, 
+    FormControl,
     Button,
     Center, 
-    Select, CheckIcon
+    Select, CheckIcon, ScrollView
   } from "native-base";
 import { UserContext } from "../context/UserContext";
 import { API } from "../environment/api";
-
+import {TimePicker} from 'react-native-simple-time-picker';
+import { View, StyleSheet } from "react-native";
 export default function AreaComun({navigation}){
 
   const { user } = useContext(UserContext)
@@ -20,6 +19,12 @@ export default function AreaComun({navigation}){
   const [areas, setAreas] = useState([])
   const [isRequesting, setIsRequesting] = useState(false);
 
+  const [selectedHours, setSelectedHours] = useState(0);
+  const [selectedMinutes, setSelectedMinutes] = useState(0);
+
+  const [endSelectedHours, setEndSelectedHours] = useState(0);
+  const [endSelectedMinutes, setEndSelectedMinutes] = useState(0);
+
     useEffect(() => {
 
       const onRequestReservasData = async () => {
@@ -68,6 +73,7 @@ export default function AreaComun({navigation}){
       }} fontWeight="medium" size="xs">
          Reserve su área común 
         </Heading>
+        <ScrollView showsVerticalScrollIndicator={false}> 
         <VStack space={3} mt="5">
         <FormControl isRequired>
             <FormControl.Label>Área común</FormControl.Label>
@@ -80,31 +86,34 @@ export default function AreaComun({navigation}){
           <Select.Item label={item.name} value={item.name} />
         ))}
           
-        
-          
         </Select>
           </FormControl>
           <FormControl isRequired>
             <FormControl.Label>Hora de inicio</FormControl.Label>
-            <Select selectedValue={service} minWidth="200" accessibilityLabel="Choose Service" placeholder="Hora de inicio" _selectedItem={{
-        bg: "teal.600",
-        endIcon: <CheckIcon size="5" />
-      }} mt={1} onValueChange={itemValue => setService(itemValue)}>
-          <Select.Item label="UX Research" value="ux" />
-          <Select.Item label="Web Development" value="web" />
-          
-        </Select>
+            <View height="80" >
+            <TimePicker 
+          selectedHours={selectedHours}
+          selectedMinutes={selectedMinutes}
+          onChange={(hours, minutes) => {
+            setSelectedHours(hours);
+            setSelectedMinutes(minutes);
+          }}/>
+            </View>
           </FormControl>
           <FormControl isRequired>
             <FormControl.Label>Hora de finalización</FormControl.Label>
-            <Select selectedValue={service} minWidth="200" accessibilityLabel="Choose Service" placeholder="Hora de finalización" _selectedItem={{
-        bg: "teal.600",
-        endIcon: <CheckIcon size="5" />
-      }} mt={1} onValueChange={itemValue => setService(itemValue)}>
-          <Select.Item label="UX Research" value="ux" />
-          <Select.Item label="Web Development" value="web" />
-          
-        </Select>
+            <View height="80" >
+            <TimePicker 
+          selectedHours={selectedHours}
+          //initial Hourse value
+          selectedMinutes={selectedMinutes}
+          //initial Minutes value
+          onChange={(hours, minutes) => {
+            setEndSelectedHours(hours);
+            setEndSelectedMinutes(minutes);
+          }}/>
+            </View>
+           
           </FormControl>
          
         
@@ -115,8 +124,19 @@ export default function AreaComun({navigation}){
             Cancelar
           </Button>
         </VStack>
+
+        </ScrollView>
       </Box>
         </Center>
        
     )
-}
\ No newline at end of file
+}
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 10,
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: 40
+  }
+});
\ No newline at end of file
diff --git a/mobile-ui/package.json b/mobile-ui/package.json
index b10c1e3c..586ada3c 100644
--- a/mobile-ui/package.json
+++ b/mobile-ui/package.json
@@ -34,6 +34,7 @@
     "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-web": "0.17.1",
     "universal-cookie": "^4.0.4"