From 51cdecd388250bf6fe72f0f9b2d6ae26d31d6e3b Mon Sep 17 00:00:00 2001
From: Maria Sanchez <paosanchez30@hotmail.com>
Date: Wed, 24 Aug 2022 11:15:27 -0600
Subject: [PATCH] separar vistas del guarda e inquilino

---
 mobile-ui/App.js                           | 23 ++++++++++++++++++++++
 mobile-ui/components/AreaComun.js          |  8 ++++----
 mobile-ui/components/Reservas.js           |  1 +
 mobile-ui/components/ReservasCard/index.js |  4 ++--
 4 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/mobile-ui/App.js b/mobile-ui/App.js
index ed2b930a..f7b25e24 100644
--- a/mobile-ui/App.js
+++ b/mobile-ui/App.js
@@ -44,6 +44,28 @@ function HomeTab({ route }) {
 
   )
 }
+
+function HomeTabGuarda({ route }) {
+  const { user } = useContext(UserContext);
+  const [selected, setSelected] = useState(0);
+
+  return (
+
+    <Tab.Navigator initialParams={user} initialRouteName="Comunicados" > 
+    <Tab.Screen  name="Comunicados" component={Home}  initialParams={user} options={{headerStyle: {
+      backgroundColor: "#D7A86E"
+    }, tabBarIcon: () => (<Icon mb="2" as={<MaterialCommunityIcons name={selected === 0 ? 'home' : 'home-outline'} />} color="#D7A86E" size="md" />)}} onclick={() => setSelected(0)}
+     />
+    <Tab.Screen  name="Invitados" component={Invitados} initialParams={user} options={{headerStyle: {
+      backgroundColor: "#D7A86E"
+    }, tabBarIcon: () => (<Icon mb="2" as={<MaterialCommunityIcons name={selected === 1 ? 'contacts' : 'contacts-outline'} />} color="#D7A86E" size="md" />)} } onclick={() => setSelected(1)}  /> 
+    <Tab.Screen  name="Perfil" component={Profile} initialParams={user} options={{headerStyle: {
+      backgroundColor: "#D7A86E"
+    }, tabBarIcon: () => (<Icon mb="2" as={<MaterialCommunityIcons name={selected === 2 ? 'account' : 'account-outline'} />} color="#D7A86E" size="md" />)}} onclick={() => setSelected(2)} /> 
+  </Tab.Navigator>
+
+  )
+}
 export default function App() {
   return (
     <NativeBaseProvider>
@@ -56,6 +78,7 @@ export default function App() {
               }
             }} />
             <Stack.Screen name="Comunicados" component={HomeTab} options={{ headerShown: false }} />
+            <Stack.Screen name="ComunicadosGuarda" component={HomeTabGuarda} options={{ headerShown: false }} />
             <Stack.Screen name="Password" component={RecoverPassword} />
             <Stack.Screen name="area" component={AreaComun} options={{
               headerStyle: {
diff --git a/mobile-ui/components/AreaComun.js b/mobile-ui/components/AreaComun.js
index 0ad1a059..01cd3807 100644
--- a/mobile-ui/components/AreaComun.js
+++ b/mobile-ui/components/AreaComun.js
@@ -24,8 +24,8 @@ export default function AreaComun({navigation}){
   const [selectedMinutes, setSelectedMinutes] = useState(0);
   const [endSelectedHours, setEndSelectedHours] = useState(0);
   const [endSelectedMinutes, setEndSelectedMinutes] = useState(0);
-  const [time, setTime] = useState(new Date(1598051730000))
-  const [endTime, setEndTime] = useState(new Date(1598051730000))
+  const [time, setTime] = useState(new Date())
+  const [endTime, setEndTime] = useState(new Date())
   const date = new Date(); 
 
     useEffect(() => {
@@ -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={onChange}/>
+            <DateTimePicker mode="time" is24Hour={true} value={time} onChangeStart={onChangeStart}/>
             </View>
           </FormControl>
           <FormControl isRequired>
             <FormControl.Label>Hora de finalización</FormControl.Label>
             <View  >
-            <DateTimePicker mode="time" is24Hour={true} value={time} onChangeEnd={onChange}/>
+            <DateTimePicker mode="time" is24Hour={true} value={endTime} onChangeEnd={onChangeEnd}/>
             </View>
            
           </FormControl>
diff --git a/mobile-ui/components/Reservas.js b/mobile-ui/components/Reservas.js
index 8ac0b01b..90d54b0c 100644
--- a/mobile-ui/components/Reservas.js
+++ b/mobile-ui/components/Reservas.js
@@ -70,6 +70,7 @@ export default function Reservas({navigation}) {
               startTime={item.start_time}
               endTime={item.finish_time}
               status={item.status}
+              name={item.common_area_name}
             />
           ))
         }
diff --git a/mobile-ui/components/ReservasCard/index.js b/mobile-ui/components/ReservasCard/index.js
index 800cd75b..c255f3de 100644
--- a/mobile-ui/components/ReservasCard/index.js
+++ b/mobile-ui/components/ReservasCard/index.js
@@ -11,7 +11,7 @@ import PropTypes from 'prop-types';
 
 import React from 'react';
 
-export const ReservasCard = ({ date, startTime, endTime, status}) => {
+export const ReservasCard = ({ date, startTime, endTime, status, name}) => {
     const dateFormated = format(new Date(date), "dd LL yyyy")
   
 
@@ -44,7 +44,7 @@ export const ReservasCard = ({ date, startTime, endTime, status}) => {
                         <Text bold={true} color='danger.50'> {status == 1 ? 'LIBRE' : 'RESERVADO'}</Text>
                     </Badge>
             <Heading size="md" ml="-1">
-              Reserva #1
+             {name}
             </Heading>
             <Text fontSize="xs" _light={{
             color: "violet.500"