Merge pull request #178 from DeimosPr4/movil

Movil

.gitignore

@@ -1,2 +1,3 @@
 .log/
 node_modules
+.DS_Store

api-gateway/src/app.controller.ts

@@ -380,6 +380,8 @@ export class AppController {
     @Body('number_plate') number_plate: string,
     @Body('phone') phone: number,
     @Body('status') status: string,
+    @Body('tenant_id') tenant_id: string,
+    @Body('community_id') community_id: string,
     @Body('date_entry') date_entry: Date,
   ) {
     return this.appService.createGuest(
@@ -389,6 +391,8 @@ export class AppController {
       number_plate,
       phone,
       status,
+      tenant_id,
+      community_id,
       date_entry,
     );
   }
@@ -403,6 +407,12 @@ export class AppController {
     return this.appService.findGuest(paramGuestDNI);
   }
 
+  @Get('guest/findGuestUser/:id')
+  findGuestUser(@Param('id') paramGuestId: string) {
+    return this.appService.findGuestUser(paramGuestId);
+  }
+
+
   // #==== API Payment
 
   @Post('payment/createPayment')

api-gateway/src/app.service.ts

@@ -486,12 +486,14 @@ export class AppService {
     number_plate: string,
     phone: number,
     status: string,
+    tenant_id: string,
+    community_id: string,
     date_entry: Date,
   ) {
     const pattern = { cmd: 'createGuest' };
     const payload = {
       name: name, last_name: last_name, dni: dni, number_plate: number_plate, phone: phone,
-      status: status, date_entry: date_entry
+      status: status,tenant_id:tenant_id, community_id:community_id,date_entry: date_entry
     };
     return this.clientGuestApp
       .send<string>(pattern, payload)
@@ -514,7 +516,14 @@ export class AppService {
       .send<string>(pattern, payload)
       .pipe(map((message: string) => ({ message })));
   }
-
+  //GET parameter from API
+  findGuestUser(paramGuestId: string) {
+    const pattern = { cmd: 'findGuestUser' };
+    const payload = { di: paramGuestId };
+    return this.clientGuestApp
+      .send<string>(pattern, payload)
+      .pipe(map((message: string) => ({ message })));
+  }
   // ====================== PAYMENTS =============================== 
 
   //POST parameter from API

mobile-ui/.gitignore

@@ -10,4 +10,4 @@ npm-debug.*
 web-build/
 .vscode
 .DS_Store
-
+package-lock.json

mobile-ui/App.js

@@ -1,60 +1,75 @@
-import React,{useState} from "react";
+import React, { useContext, useState } from "react";
 import {
-  NativeBaseProvider, 
+  NativeBaseProvider,
   Icon
 } from "native-base";
 import { NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
-import { createBottomTabNavigator} from '@react-navigation/bottom-tabs';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import LogIn from "./components/LogIn";
 import Home from "./components/Home";
 import RecoverPassword from "./components/RecoverPassword";
 import Reservas from "./components/Reservas";
-import Profile from "./components/Profile"; 
+import Profile from "./components/Profile";
-import { MaterialCommunityIcons } from '@expo/vector-icons'; 
+import { MaterialCommunityIcons } from '@expo/vector-icons';
 import AreaComun from "./components/AreaComun";
+import { UserContext, UserContextProvider } from "./context/UserContext";
+import AgregarInvitados from "./components/AgregarInvitados";
+import Invitados from "./components/Invitados"
 
 const Stack = createNativeStackNavigator();
-const Tab = createBottomTabNavigator(); 
+const Tab = createBottomTabNavigator();
 
-
+function HomeTab({ route }) {
-
+  const { user } = useContext(UserContext);
-function HomeTab() {
+  const [selected, setSelected] = useState(0);
-
-const [selected, setSelected] = useState(0);
 
   return (
-    <Tab.Navigator initialRouteName="Comunicados" > 
+
-    <Tab.Screen  name="Comunicados" component={Home} options={{headerStyle: {
+    <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)} /> 
+    }, tabBarIcon: () => (<Icon mb="2" as={<MaterialCommunityIcons name={selected === 0 ? 'home' : 'home-outline'} />} color="#D7A86E" size="md" />)}} onclick={() => setSelected(0)}
-    <Tab.Screen  name="Reservas" component={Reservas } options={{headerStyle: {
+     /> 
+    <Tab.Screen  name="Reservas" component={Reservas } initialParams={user} options={{headerStyle: {
       backgroundColor: "#D7A86E"
     }, tabBarIcon: () => (<Icon mb="2" as={<MaterialCommunityIcons name={selected === 1 ? 'tree' : 'tree-outline'} />} color="#D7A86E" size="md" />)} } onclick={() => setSelected(1)}  /> 
-    <Tab.Screen  name="Perfil" component={Profile} options={{headerStyle: {
+        <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>
-
+      <UserContextProvider>
-    <NavigationContainer>
+        <NavigationContainer>
-      <Stack.Navigator initialRouteName="LogIn">
+          <Stack.Navigator initialRouteName="LogIn">
-        <Stack.Screen name="Inicio" component={LogIn} options={{headerStyle: {
+            <Stack.Screen name="Inicio" component={LogIn} options={{
-      backgroundColor: "#D7A86E"
+              headerStyle: {
-    }}} />
+                backgroundColor: "#D7A86E"
-        <Stack.Screen name="Comunicados" component={HomeTab} options={{headerShown: false}} />
+              }
-        <Stack.Screen name="Password" component={RecoverPassword} />
+            }} />
-        <Stack.Screen name="area" component={AreaComun} options={{headerStyle: {
+            <Stack.Screen name="Comunicados" component={HomeTab} options={{ headerShown: false }} />
-      backgroundColor: "#D7A86E"
+            <Stack.Screen name="Password" component={RecoverPassword} />
-    }}} />
+            <Stack.Screen name="area" component={AreaComun} options={{
-      </Stack.Navigator>
+              headerStyle: {
-
+                backgroundColor: "#D7A86E"
-    
+              }
-    </NavigationContainer>
+            }} />
+             <Stack.Screen name="invitado" component={AgregarInvitados} options={{
+              headerStyle: {
+                backgroundColor: "#D7A86E"
+              }
+            }} />
+          </Stack.Navigator>
+        </NavigationContainer>
+      </UserContextProvider>
     </NativeBaseProvider>
   );
-}
+}

mobile-ui/app.json

@@ -17,7 +17,16 @@
       "**/*"
     ],
     "ios": {
-      "supportsTablet": true
+      "supportsTablet": true,
+      "infoPlist": {
+        "NSAppTransportSecurity": {
+          "NSAllowsArbitraryLoads" : true,
+          "NSAllowsArbitraryLoadsForMedia": true, 
+          "NSAllowsArbitraryLoadsInWebContent": true, 
+          "NSExceptionAllowsInsecureHTTPLoads": true
+        }
+      },
+      "bundleIdentifier": "1.1.0"
     },
     "android": {
       "adaptiveIcon": {

mobile-ui/components/AgregarInvitados.js

@@ -0,0 +1,125 @@
+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 { UserContext } from "../context/UserContext";
+
+export default function AgregarInvitados({ navigation }) {
+
+  const baseURL = `${API.BASE_URL}/guest/createGuest/`;
+  const [name, setName] = useState(); 
+  const [apellido, setApellido] =useState(); 
+  const [dni, setDNI] = useState(); 
+  const [phone, setPhone] = useState();
+  const [number_plate, setNumber_plate] = useState();
+  const [tenant_id, setTenant_id] = useState();
+  const [community_id, setCommunity_id] = useState();
+  const { user } = useContext(UserContext);
+
+  const saveInvitado = async() => {
+
+    const data = {
+      "name": name,
+      "last_name": apellido,
+      "dni": dni,
+      "phone": phone,
+      "number_plate": number_plate,
+      "tenant_id": user.id,
+      "community_id": user.community_id
+    }
+
+    try {
+
+      await fetch(baseURL, {
+
+        cache: 'no-cache', 
+        method: 'POST', 
+        body: JSON.stringify(data), 
+        headers: {
+          'Content-Type': 'application/json'
+        }
+      })
+      .then(response => {
+        if (response.status != 201){
+          console.log('ocurrio un error ');
+        }else{
+          return response.json(); 
+        }
+      })
+      
+    } catch (error) {
+      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">
+          Registrar invitado
+        </Heading>
+        <Heading mt="1" color="coolGray.600" _dark={{
+        color: "warmGray.200"
+      }} fontWeight="medium" size="xs">
+         Registre el invitado que desee
+        </Heading>
+        <VStack space={3} mt="5">
+          <FormControl isRequired>
+            <FormControl.Label>Nombre</FormControl.Label>
+            <TextInput style={styles.input} type="text" onChangeText={(value) => setName(value)}/>
+          </FormControl>
+          <FormControl isRequired>
+            <FormControl.Label>Apellido</FormControl.Label>
+            <TextInput style={styles.input} type="text" onChangeText={(value) => setApellido(value)}/>
+          </FormControl>
+          <FormControl isRequired>
+            <FormControl.Label>Identificación</FormControl.Label>
+            <TextInput style={styles.input} type="text" onChangeText={(value) => setDNI(value)}/>
+          </FormControl>
+          <FormControl isRequired>
+            <FormControl.Label>Teléfono</FormControl.Label>
+            <TextInput style={styles.input} type="text" onChangeText={(value) => setPhone(value)} />
+          </FormControl>
+          <Button mt="2" backgroundColor='tertiary.600' onPress={() => saveInvitado()}>
+           Guardar
+          </Button>
+        </VStack>
+      </Box>
+
+      </ScrollView>
+    </Center>
+
+  )
+
+
+}
+
+const styles = StyleSheet.create({
+  input: {
+    height: 10,
+    margin: 3,
+    borderWidth: 0.5,
+    padding: 5,
+    flex: 1,
+    paddingTop: 9,
+    paddingRight: 19,
+    paddingBottom: 20,
+    paddingLeft: 0,
+    marginTop: 6,
+    marginBottom: 6,
+    borderRadius: 4
+  }
+})
+

mobile-ui/components/AreaComun.js

@@ -1,17 +1,100 @@
-import React from "react";
+import React, {useContext, useEffect, useState} from "react";
-
 import {
     Box, 
     Heading, 
     VStack, 
-    FormControl, 
+    FormControl,
-    Input, 
     Button,
-    Center
+    Center, 
+    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)
+  const [service, setService] = useState("");
+  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 () => {
+        setIsRequesting(true);
+
+  
+  
+        try {
+          const jsonResponse = await fetch(`${API.BASE_URL}/commonArea/allCommonAreas`, {
+            method: "GET",
+            headers: {
+              'Content-Type': 'application/json'
+            }
+          })
+  
+          const response = await jsonResponse.json();
+          console.log(response.message);
+  
+          setAreas(response.message);
+  
+
+  
+        } catch (error) {
+            console.log("ERROR:" + error);
+        }
+  
+        setIsRequesting(false)
+      }
+  
+      onRequestReservasData()
+
+
+    }, [user])
+
+
+    const postReserva = async() => {
+
+      const data = {
+        
+        "start_time": selectedHours + ":" +selectedMinutes,
+        "finish_time": endSelectedHours + ":" +endSelectedMinutes,
+        "date_entry": "",
+        "user_id" : user._id, 
+        "common_area_id": service
+      
+      }
+
+      console.log(data);
+      // try {
+
+      //   const jsonDataResponse = await fetch(`${API.BASE_URL}/reservation/createReservation`, {
+      //     cache: 'no-cache', 
+      //     method: 'POST', 
+      //     body: JSON.stringify(data), 
+      //     headers: {
+      //       'Content-Type': 'application/json'
+      //     }
+      //   })
+
+      //   const response = await jsonResponse.json();
+      //   console.log(response.message);
+        
+      // } catch (error) {
+      //   console.log("ERROR:" + error);
+      // }
+    }
+    
+
+   
+
     return (
         <Center>
              <Box safeArea p="2" w="90%" maxW="290" py="8">
@@ -25,29 +108,70 @@ export default function AreaComun({navigation}){
       }} fontWeight="medium" size="xs">
          Reserve su área común 
         </Heading>
+        <ScrollView showsVerticalScrollIndicator={false}> 
         <VStack space={3} mt="5">
-          <FormControl>
+        <FormControl isRequired>
+            <FormControl.Label>Área común</FormControl.Label>
+            <Select selectedValue={service} minWidth="200" accessibilityLabel="Choose Service" placeholder="Elija su área común" _selectedItem={{
+        bg: "teal.600",
+        endIcon: <CheckIcon size="5" />
+      }} mt={1} onValueChange={itemValue => setService(itemValue)}>
+
+        {areas.map(item => (
+          <Select.Item label={item.name} value={item.community_id} />
+        ))}
+          
+        </Select>
+          </FormControl>
+          <FormControl isRequired>
             <FormControl.Label>Hora de inicio</FormControl.Label>
-            <Input type="text"/>
+            <View  >
+            <TimePicker 
+          selectedHours={selectedHours}
+          selectedMinutes={selectedMinutes}
+          onChange={(hours, minutes) => {
+            setSelectedHours(hours);
+            setSelectedMinutes(minutes);
+          }}/>
+            </View>
           </FormControl>
-          <FormControl>
+          <FormControl isRequired>
             <FormControl.Label>Hora de finalización</FormControl.Label>
-            <Input type="text" />
+            <View  >
-          </FormControl>
+            <TimePicker 
-          <FormControl>
+          selectedHours={selectedHours}
-            <FormControl.Label>Lugar</FormControl.Label>
+          //initial Hourse value
-            <Input type="text" />
+          selectedMinutes={selectedMinutes}
+          //initial Minutes value
+          onChange={(hours, minutes) => {
+            setEndSelectedHours(hours);
+            setEndSelectedMinutes(minutes);
+          }}/>
+            </View>
+           
           </FormControl>
+         
         
-          <Button mt="2" backgroundColor="orange.300">
+          <Button mt="2" backgroundColor="tertiary.600" onPress={()=> postReserva()}>
             Reservar
           </Button>
           <Button mt="6" colorScheme="error" onPress={() => navigation.navigate('Comunicados')}>
             Cancelar
           </Button>
         </VStack>
+
+        </ScrollView>
       </Box>
         </Center>
        
     )
-}
+}
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 10,
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: 40
+  }
+});

mobile-ui/components/CommentCard/index.js

@@ -0,0 +1,51 @@
+import { format } from "date-fns";
+import {
+    Badge,
+    Box, HStack, Pressable,
+    Spacer, Text
+} from "native-base";
+import PropTypes from 'prop-types';
+
+import React from 'react';
+
+export const CommentCard = ({ date, comment }) => {
+    const dateFormated = format(new Date(date), "dd LL yyyy")
+    return (
+        <Pressable
+            rounded="8"
+            overflow="hidden"
+            borderWidth="1"
+            borderColor="coolGray.300"
+            maxW="96"
+            shadow="3"
+            bg="coolGray.100"
+            p="5"
+            marginTop="4"
+        >
+            <Box>
+                <HStack alignItems="center">
+                    <Badge colorScheme="darkBlue" _text={{
+                        color: "white"
+                    }} variant="solid" rounded="4">
+                        Comunicado
+                    </Badge>
+                    <Spacer />
+                    <Text fontSize={10} color="coolGray.800">
+                        {dateFormated}
+                    </Text>
+                </HStack>
+                <Text color="coolGray.800" mt="3" fontWeight="medium" fontSize="xl">
+                    Administrador de Comunidad
+                </Text>
+                <Text mt="2" fontSize="sm" color="coolGray.700">
+                    {comment}
+                </Text>
+            </Box>
+        </Pressable>
+    )
+}
+
+CommentCard.propTypes = {
+    date: PropTypes.string.isRequired,
+    comment: PropTypes.string.isRequired,
+}

mobile-ui/components/Home.js

@@ -1,101 +1,67 @@
-import React from "react";
+import{Box, ScrollView} from "native-base";
-import {
+import React, { useContext, useEffect, useState } from "react";
-    Text,
+import { UserContext } from "../context/UserContext";
-    HStack,
+import { API } from "../environment/api";
-    Badge,
+import { CommentCard } from "./CommentCard";
-    Box,
-Pressable,
-    Spacer, 
-  } from "native-base";
-  import { MaterialCommunityIcons } from '@expo/vector-icons'; 
-export default function Home(){
 
-  const [selected, setSelected] = React.useState(0);
+export default function Home() {
-    return (
+  const { user } = useContext(UserContext)
+  const [isRequesting, setIsRequesting] = useState(false);
+  const [comments, setComments] = useState([]);
 
-      <Box alignItems="center">
+  useEffect(() => {
-      <Pressable onPress={() => console.log("I'm Pressed")} rounded="8" overflow="hidden" borderWidth="1" borderColor="coolGray.300" maxW="96" shadow="3" bg="coolGray.100" p="5" marginTop="4">
+
-        <Box>
+    console.log(user);
-          <HStack alignItems="center">
+
-            <Badge colorScheme="darkBlue" _text={{
+    const onRequestCommentsData = async () => {
-            color: "white"
+      setIsRequesting(true);
-          }} variant="solid" rounded="4">
+
-              Comunicado
+      try {
-            </Badge>
+        const jsonResponse = await fetch(`${API.BASE_URL}/post/allComments`, {
-            <Spacer />
+          method: "GET",
-            <Text fontSize={10} color="coolGray.800">
+          headers: {
-              1 month ago
+            'Content-Type': 'application/json'
-            </Text>
+          }
-          </HStack>
+        })
-          <Text color="coolGray.800" mt="3" fontWeight="medium" fontSize="xl">
+
-            Administrador de Comunidad
+        const response = await jsonResponse.json();
-          </Text>
+        // console.log(response);
-          <Text mt="2" fontSize="sm" color="coolGray.700">
+
-            Notificacion sobre la aplicacion
+        setComments(response.message);
-          </Text>
+
-         
+      } catch (error) {
-        </Box>
+
-      </Pressable>
+      }
-      <Pressable onPress={() => console.log("I'm Pressed")} rounded="8" overflow="hidden" borderWidth="1" borderColor="coolGray.300" maxW="96" shadow="3" bg="coolGray.100" p="5" marginTop="4">
+
-        <Box>
+      setIsRequesting(false)
-          <HStack alignItems="center">
+    }
-            <Badge colorScheme="darkBlue" _text={{
+
-            color: "white"
+    onRequestCommentsData()
-          }} variant="solid" rounded="4">
+
-              Comunicado
+  }, [user])
-            </Badge>
+
-            <Spacer />
+
-            <Text fontSize={10} color="coolGray.800">
+  return (
-              1 month ago
+
-            </Text>
+    <Box alignItems="center">
-          </HStack>
+
-          <Text color="coolGray.800" mt="3" fontWeight="medium" fontSize="xl">
+      <ScrollView width='100%' h='550' ml='1' _contentContainerStyle={{
-            Administrador General
+        px: "20px",
-          </Text>
+        mb: "4",
-          <Text mt="2" fontSize="sm" color="coolGray.700">
+        minW: "72"
-            Notificacion sobre la aplicacion
+      }}>
-          </Text>
+
-         
+        {
-        </Box>
+          comments.map(item => (
-      </Pressable>
+            <CommentCard
+              key={item._id}
+              comment={item.comment}
+              date={item.date_entry}
+            />
+          ))
+        }
+
+      </ScrollView>
     </Box>
-      //   <Center width={"100%"} marginTop={"auto"}>
+  )
-           
+}
-      // <Box safeAreaTop bg="#D7A86E" flex={1} />
-      // <HStack bg="#D7A86E" px="2" py="4" justifyContent="space-between" alignItems="center" w="100%" maxW="100%">
-
-      //   <Pressable opacity={selected === 0 ? 1 : 0.5} py="3" flex={1} onPress={() => setSelected(0) && navigation.navigate('Home')}>
-      //       <Center>
-      //         <Icon mb="2" as={<MaterialCommunityIcons name={selected === 0 ? 'home' : 'home-outline'} />} color="white" size="md" />
-      //         <Text color="white" fontSize="15">
-      //           Inicio
-      //         </Text>
-      //       </Center>
-      //     </Pressable>
-      
-        
-      //   <Pressable opacity={selected === 1 ? 1 : 0.5} py="3" flex={1} onPress={() => setSelected(1) && ( () => navigation.navigate('Reservas'))}>
-      //       <Center>
-      //         <Icon mb="2" as={<MaterialCommunityIcons name={selected === 1 ? 'tree' : 'tree-outline'} />} color="white" size="md" />
-      //         <Text color="white" fontSize="15">
-      //           Reservas
-      //         </Text>
-      //       </Center>
-      //     </Pressable>
-      
-       
-      //   <Pressable opacity={selected === 2 ? 1 : 0.5} py="3" flex={1} onPress={() => setSelected(2)}>
-      //       <Center>
-      //         <Icon mb="2" as={<MaterialCommunityIcons name={selected === 2 ? 'account' : 'account-outline'} />} color="white" size="md" />
-      //         <Text color="white" fontSize="15">
-      //           Perfil
-      //         </Text>
-      //       </Center>
-      //     </Pressable>
-     
-        
-      // </HStack>
-      // </Center>
-       
-    )
-}

mobile-ui/components/Invitados.js

@@ -0,0 +1,97 @@
+import React, { useContext, useEffect, useState } from "react";
+import { MaterialCommunityIcons } from '@expo/vector-icons';
+import { UserContext } from "../context/UserContext";
+import { API } from "../environment/api";
+import {
+  Box, Button,
+  Center, FormControl, Heading, ScrollView, VStack,FlatList, HStack,Avatar,Spacer,Text
+} from "native-base";
+
+export default function Invitados({navigation}) {
+  const [isRequesting, setIsRequesting] = useState(false);
+  const [invitados, setInvitados] = useState([]);
+  const { user } = useContext(UserContext);
+  const id = user._id;
+
+
+  useEffect(() => {
+
+    const onRequestInvitadosData = async () => {
+      setIsRequesting(true);
+
+      try {
+        const jsonResponse = await fetch(`${API.BASE_URL}/guest/findGuestUser/`+`${id}`, {
+          method: "GET",
+          headers: {
+            'Content-Type': 'application/json'
+          }
+        })
+
+        const response = await jsonResponse.json();
+        //console.log(response);
+        setInvitados(response.message);
+
+      } catch (error) {
+
+      }
+
+      setIsRequesting(false)
+    }
+
+    onRequestInvitadosData()
+
+  })
+
+  return (
+  
+       <Box>
+      <Heading fontSize="xl" p="4" pb="3">
+        Lista de invitados
+      </Heading>
+      <FlatList data={invitados} renderItem={({
+      item
+    }) => <Box key={item._id} borderBottomWidth="1" _dark={{
+      borderColor: "gray.600"
+    }} borderColor="coolGray.200" pl="4" pr="5" py="2">
+            <HStack space={3} justifyContent="space-between" >
+            <MaterialCommunityIcons name="account" size={48} color="#D7A86E" />
+              <VStack>
+                <Text _dark={{
+            color: "warmGray.50"
+          }} color="coolGray.800" bold>
+                  {item.name+" "+item.last_name}
+                </Text>
+                <Text color="coolGray.600" _dark={{
+            color: "warmGray.200"
+          }}>
+                  {item.dni}
+                </Text>
+                <Text color="coolGray.600" _dark={{
+            color: "warmGray.200"
+          }}>
+                  {item.phone}
+                </Text>
+              </VStack>
+              <Spacer />
+              <Text fontSize="xs" _dark={{
+          color: "warmGray.50"
+        }} color="coolGray.800" alignSelf="flex-start">
+                {item.number_plate}
+              </Text>
+            </HStack>
+          </Box>} keyExtractor={item => item.id} />
+
+
+          <Button width='200'  mt="4" ml='85' backgroundColor='tertiary.600' onPress={() => navigation.navigate('invitado')}>
+        Agregar invitado
+       </Button>
+
+    </Box>
+      
+
+  );
+
+  
+
+ 
+}

mobile-ui/components/LogIn.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useContext, useState } from "react";
 import Cookies from 'universal-cookie';
 import {
   Text,
@@ -12,12 +12,157 @@ import {
   Image
 } from "native-base";
 import logo from "../assets/logo-katoikia.png";
-import { Entypo } from '@expo/vector-icons'; 
+import { Entypo } from '@expo/vector-icons';
-import { MaterialCommunityIcons } from '@expo/vector-icons'; 
+import { MaterialCommunityIcons } from '@expo/vector-icons';
 import { View, TextInput, StyleSheet } from "react-native";
+import { UserContext } from "../context/UserContext";
+import { API } from "../environment/api";
 
-const baseURL = "http://localhost:4000/user/loginUser"; 
+const baseURL = `${API.BASE_URL}/user/loginUser`;
-const cookies = new Cookies(); 
+
+export default function LogIn({ navigation }) {
+
+  const { addUser } = useContext(UserContext);
+
+  const [credentials, setCredentials] = useState({
+    email: "lalo@lalo.com",
+    password: "12345"
+  });
+
+  const onHandleChange = (name) => (value) => setCredentials(prev => ({ ...prev, [name]: value }))
+
+  const iniciarSesion = async () => {
+    try {
+  
+      console.log(baseURL);
+      await fetch(baseURL, {
+        cache: 'no-cache', 
+        method: 'POST', 
+        body: JSON.stringify(credentials), 
+        headers: {
+          'Content-Type': 'application/json'
+        }
+      })
+      .then(response => {
+        if (response.status != 201){
+          console.log('ocurrio un error ');
+        }else{
+          return response.json(); 
+        }
+      })
+      .then( response => {
+
+        // inqulino 4 y guarda 3
+         const user = response.message
+          if(user.user_type == '4'){
+            addUser(user);
+
+            navigation.navigate('Comunicados', {user})
+          }else if(user.user_type == '3'){
+            addUser(user);
+            navigation.navigate('Comunicados', {user})
+          }
+      })
+      
+    } catch (error) {
+      console.log("ERROR: " +error);
+    }
+
+  }
+
+  return (
+
+    <Center w="100%">
+      <Box safeArea p="2" py="8" w="90%" maxW="290">
+
+        <Center>
+          <Image source={
+            logo
+          } width={500} height={550} m='2'
+            alt="Katoikia logo" size="xl" justifyContent="center" />
+
+        </Center>
+
+        <Heading
+          size="lg"
+          fontWeight="600"
+          color="coolGray.800"
+          _dark={{
+            color: "warmGray.50",
+          }}
+        >
+          Bienvenido a Katoikia
+        </Heading>
+        <Heading
+          mt="1"
+          _dark={{
+            color: "warmGray.200",
+          }}
+          color="coolGray.600"
+          fontWeight="medium"
+          size="xs"
+        >
+          Su app de comunidad de confianza
+        </Heading>
+
+        <View style={styles.container}>
+          <VStack space={3} mt="5">
+            <FormControl isRequired >
+              <FormControl.Label Text='bold'> Correo Electrónico </FormControl.Label>
+
+              <View style={styles.viewSection}>
+                <Entypo name="email" size={20} color="grey" style={styles.iconStyle} />
+                <TextInput
+                  name='email'
+                  type="text"
+                  style={styles.input}
+                  value={credentials.email}
+                  placeholder='Correo electrónico'
+                  onChangeText={onHandleChange("email")} />
+              </View>
+
+            </FormControl>
+            <FormControl isRequired>
+              <FormControl.Label Text='bold'> Contraseña </FormControl.Label>
+              <View style={styles.viewSection}>
+                <MaterialCommunityIcons name="form-textbox-password" size={20} color="grey" style={styles.iconStyle} />
+                <TextInput
+                  name='password'
+                  type="password"
+                  style={styles.input}
+                  value={credentials.password}
+                  placeholder='Contraseña'
+                  onChangeText={onHandleChange("password")} />
+              </View>
+              <Link
+                _text={{
+                  fontSize: "xs",
+                  fontWeight: "500",
+                  color: "indigo.500",
+                  marginTop: "10"
+                }}
+                alignSelf="flex-end"
+                mt="1"
+                onPress={() => navigation.navigate('Password')}
+
+              >
+
+                Recuperar contraseña
+
+              </Link>
+            </FormControl>
+            <Button mt="2" backgroundColor="#D7A86E" onPress={iniciarSesion}
+            >
+              <Text>Continuar</Text>
+            </Button>
+
+          </VStack></View>
+
+      </Box>
+    </Center>
+  );
+
+}
 
 const styles = StyleSheet.create({
   input: {
@@ -30,146 +175,27 @@ const styles = StyleSheet.create({
     paddingRight: 10,
     paddingBottom: 10,
     paddingLeft: 0,
-    marginTop: 50, 
+    marginTop: 50,
-    marginBottom: 10
+    marginBottom: 10,
-  }, 
+    borderRadius: 4
+  },
 
   iconStyle: {
-    padding: 10, 
+    paddingBottom: 20,
-  }, 
+    marginTop: 3,
+    paddingTop: 35
+  },
 
   viewSection: {
     flex: 1,
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
-    margin: 10
+
+    marginBottom: 28
   },
 
   container: {
 
   }
 })
-
-const iniciarSesion = async()  => {
-
-  try {
-
-    await fetch(baseURL, {
-      cache: 'no-cache', 
-      method: 'POST', 
-      body: JSON.stringify(), 
-      headers: {
-        'Content-Type': 'application/json'
-      }
-    })
-    .then(response => {
-      if (response.status != 201){
-        console.log('ocurrio un error ');
-      }else{
-        return response.json(); 
-      }
-    })
-    .then( response => {
-       const user = response.message
-
-        if(user.user_type == '3'){
-          cookies.set('id',user._id, {path: "/"} )
-          cookies.set('name',user.name, {path: "/"} )
-          cookies.set('email',user.email, {path: "/"} )
-          cookies.set('type',user.user_type, {path: "/"} )
-        }
-    })
-    
-  } catch (error) {
-    
-  }
-
-   
-}
-
-export default function LogIn({navigation}) {
-  return (
-  
-      
-      <Center w="100%">
-        <Box safeArea p="2" py="8" w="90%" maxW="290">
-
-          <Center> 
-          <Image  source={
-          logo
-        } width={500} height={550} m='2'
-    alt="Katoikia logo" size="xl" justifyContent="center" />
-
-          </Center>
-      
-          <Heading
-            size="lg"
-            fontWeight="600"
-            color="coolGray.800"
-            _dark={{
-              color: "warmGray.50",
-            }}
-          >
-            Bienvenido a Katoikia 
-          </Heading>
-          <Heading
-            mt="1"
-            _dark={{
-              color: "warmGray.200",
-            }}
-            color="coolGray.600"
-            fontWeight="medium"
-            size="xs"
-          >
-             Su app de comunidad de confianza
-          </Heading>
-
-<View style={styles.container}>
-  <VStack space={3} mt="5">
-            <FormControl>
-              <FormControl.Label> Correo Electrónico </FormControl.Label>
-
-              <View style={styles.viewSection}> 
-              <Entypo name="email" size={20} color="grey" style={styles.iconStyle} />
-              <TextInput type="text" style={styles.input} />
-              </View>
-              
-            </FormControl>
-            <FormControl>
-            <FormControl.Label> Contraseña </FormControl.Label>
-                <View style={styles.viewSection}> 
-                <MaterialCommunityIcons name="form-textbox-password" size={20} color="grey" style={styles.iconStyle}/>
-                <TextInput type="password" style={styles.input} />
-                </View>
-              <Link
-                _text={{
-                  fontSize: "xs",
-                  fontWeight: "500",
-                  color: "indigo.500",
-                  marginTop: "10"
-                }}
-                alignSelf="flex-end"
-                mt="1"
-                onPress={() => navigation.navigate('Password')}
-                
-              >
-             
-                  Recuperar contraseña
-               
-              </Link>
-            </FormControl>
-            <Button  mt="2" backgroundColor="#D7A86E" onPress={() => navigation.navigate('Comunicados')}
-            >
-              <Text>Continuar</Text>
-            </Button>
-           
-          </VStack></View>
-          
-        </Box>
-      </Center>
-  );
-
-
- 
-}

mobile-ui/components/Profile.js

@@ -1,24 +1,83 @@
-import React from "react";
+import React, { useContext, useState } from "react";
+import { API } from "../environment/api";
 
 import {
-    Box, 
+  Box, Button,
-    Heading, 
+  Center, FormControl, Heading, ScrollView, VStack
-    VStack, 
+} from "native-base";
-    FormControl, 
-    Input, 
-    Button,
-    Center
-  } from "native-base";
 
-export default function Profile({navigation}){
+import { StyleSheet, TextInput } from "react-native";
+import { UserContext } from "../context/UserContext";
 
+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 userData = useContext(UserContext)
+  const id = userData.user._id;
+
+  console.log(userData.user);
+
+
+  const updateInfo = async() => {
+
+    const data = {
+      "_id": "6301df20dac7dcf76dcecade",
+      "dni": "1234567890",
+      "name": name,
+      "last_name": apellido,
+      "email": email,
+      "phone": 12121212,
+      "password": "827ccb0eea8a706c4c34a16891f84e7b",
+      "user_type": "3",
+      "status": "1",
+      "date_entry": "2022-08-21T07:30:09.929Z",
+      "community_id": null,
+    }
+
+    try {
+
+      await fetch(baseURL+`${id}`, {
+
+        cache: 'no-cache', 
+        method: 'PUT', 
+        body: JSON.stringify(data), 
+        headers: {
+          'Content-Type': 'application/json'
+        }
+      })
+      .then(response => {
+
+        console.log(baseURL+`${id}`);
+        if (response.status != 201){
+          console.log('ocurrio un error ');
+        }else{
+          return response.json(); 
+        }
+      })
+      
+    } catch (error) {
+      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">
-          Katoikia
+          Bienvenido {userData.user.name}
         </Heading>
         <Heading mt="1" color="coolGray.600" _dark={{
         color: "warmGray.200"
@@ -26,24 +85,32 @@ export default function Profile({navigation}){
           Modifique sus datos
         </Heading>
         <VStack space={3} mt="5">
-          <FormControl>
+        <FormControl>
-            <FormControl.Label>Nombre</FormControl.Label>
+            <FormControl.Label>DNI</FormControl.Label>
-            <Input type="text"/>
+            <TextInput type="text" defaultValue={userData.user.dni} editable={false} />
-          </FormControl>
-          <FormControl>
-            <FormControl.Label>Correo Electrónico</FormControl.Label>
-            <Input type="text" />
           </FormControl>
           <FormControl>
             <FormControl.Label>Teléfono</FormControl.Label>
-            <Input type="text" />
+            <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>
-            <Input type="password" />
+            <TextInput style={styles.input} type="password" defaultValue="" onChangeText={(value) => setPassword(value) }/>
           </FormControl>
           
-          <Button mt="2" backgroundColor="orange.300">
+          <Button mt="2" backgroundColor="orange.300" onPress={() => updateInfo()}>
             Actualizar
           </Button>
           <Button mt="6" colorScheme="error" onPress={() => navigation.navigate('Inicio')}>
@@ -51,7 +118,29 @@ export default function Profile({navigation}){
           </Button>
         </VStack>
       </Box>
-        </Center>
+
-       
+      </ScrollView>
-    )
+    </Center>
-}
+
+  )
+
+
+}
+
+const styles = StyleSheet.create({
+  input: {
+    height: 10,
+    margin: 3,
+    borderWidth: 0.5,
+    padding: 5,
+    flex: 1,
+    paddingTop: 9,
+    paddingRight: 19,
+    paddingBottom: 20,
+    paddingLeft: 0,
+    marginTop: 6,
+    marginBottom: 6,
+    borderRadius: 4
+  }
+})
+

mobile-ui/components/ProfileGuarda.js

@@ -0,0 +1,103 @@
+import React, { useState } from "react";
+
+import {
+    Box, 
+    Heading, 
+    VStack, 
+    FormControl,  
+    Button,
+    Center,
+    ScrollView
+  } from "native-base";
+
+  import { View, TextInput, StyleSheet } from "react-native";
+
+export default function ProfileGuarda({route, navigation}){
+
+  const userData = JSON.parse(JSON.stringify(route.params));
+  const [name, setName] = useState(); 
+  const [apellido, setApellido] =useState(); 
+  const [email, setEmail] = useState(); 
+  const [password, setPassword] = useState();
+
+  console.log(userData.user);
+
+
+  const updateInfo = async() => {
+
+  }
+    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>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">
+            Actualizar
+          </Button>
+          <Button mt="6" colorScheme="error" onPress={() => navigation.navigate('Inicio')}>
+            Cerrar sesión
+          </Button>
+        </VStack>
+      </Box>
+
+      </ScrollView>
+        </Center>
+       
+    )
+
+   
+}
+
+const styles = StyleSheet.create({
+  input: {
+    height: 10,
+    margin:3,
+    borderWidth: 0.5,
+    padding: 5,
+    flex: 1,
+    paddingTop: 9,
+    paddingRight: 19,
+    paddingBottom: 20,
+    paddingLeft: 0,
+    marginTop: 6, 
+    marginBottom:6, 
+    borderRadius: 4
+  }
+  })
+

mobile-ui/components/Reservas.js

@@ -1,137 +1,75 @@
-import React from "react";
+import React, {useContext, useEffect, useState} from "react";
 import {
-  Text,
-  HStack,
-  AntDesign,
-  Heading,
-  Stack,
   Box,
   ScrollView,
   Fab,
   Icon
 } from "native-base";
-import logo from "../assets/logo-katoikia.png";
+import { API } from "../environment/api";
-import { Entypo } from '@expo/vector-icons'; 
 import { MaterialCommunityIcons } from '@expo/vector-icons'; 
-import { View, TextInput, StyleSheet } from "react-native";
 
-const styles = StyleSheet.create({
+import { UserContext } from "../context/UserContext";
-  input: {
+import { ReservasCard } from "./ReservasCard";
-    height: 40,
-    margin: 10,
-    borderWidth: 0.5,
-    padding: 5,
-    flex: 1,
-    paddingTop: 10,
-    paddingRight: 10,
-    paddingBottom: 10,
-    paddingLeft: 0,
-    marginTop: 50, 
-    marginBottom: 10
-  }, 
-
-  iconStyle: {
-    padding: 10, 
-  }, 
-
-  viewSection: {
-    flex: 1,
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
-    margin: 10
-  },
-
-  container: {
-
-  }
-})
 
 export default function Reservas({navigation}) {
+
+  const { user } = useContext(UserContext)
+  const [isRequesting, setIsRequesting] = useState(false);
+  const [reservas, setReservas] = useState([]);
+
+  useEffect(() => {
+
+    const onRequestReservasData = async () => {
+      setIsRequesting(true);
+
+      try {
+        const jsonResponse = await fetch(`${API.BASE_URL}/reservation/allReservations`, {
+          method: "GET",
+          headers: {
+            'Content-Type': 'application/json'
+          }
+        })
+
+        const response = await jsonResponse.json();
+        console.log(response);
+
+        setReservas(response.message);
+
+        try {
+
+         
+        } catch (error) {
+          console.log("ERROR:" + error);
+        }
+
+      } catch (error) {
+          console.log("ERROR:" + error);
+      }
+
+      setIsRequesting(false)
+    }
+
+    onRequestReservasData()
+
+  }, [user])
+
+
   return (
   
     <ScrollView showsVerticalScrollIndicator={false}>
           
-       
+          {
-      
+          reservas.map(item => (
-    <Box alignItems="center">
+            <ReservasCard
-      <Box width="80" rounded="lg" overflow="hidden" borderColor="coolGray.200" borderWidth="1" _dark={{
+              key={item._id}
-      borderColor: "coolGray.600",
+              date={item.date_entry}
-      backgroundColor: "gray.700"
+              startTime={item.start_time}
-    }} _web={{
+              endTime={item.finish_time}
-      shadow: 2,
+              status={item.status}
-      borderWidth: 0
+            />
-    }} _light={{
+          ))
-      backgroundColor: "gray.50"
+        }
-    }}>
-        <Stack p="4" space={3}>
-          <Stack space={2}>
-            <Heading size="md" ml="-1">
-              Reserva #1
-            </Heading>
-            <Text fontSize="xs" _light={{
-            color: "violet.500"
-          }} _dark={{
-            color: "violet.400"
-          }} fontWeight="500" ml="-0.5" mt="-1">
-              horario de Reserva
-            </Text>
-          </Stack>
-          <Text fontWeight="400">
-            Descripcion
-          </Text>
-          <HStack alignItems="center" space={4} justifyContent="space-between">
-            <HStack alignItems="center">
-              <Text color="coolGray.600" _dark={{
-              color: "warmGray.200"
-            }} fontWeight="400">
-                6 mins ago
-              </Text>
-            </HStack>
-          </HStack>
-        </Stack>
-      </Box>
-    </Box>
 
-    <Box alignItems="center" width={"100%"}>
-      <Box width="80" rounded="lg" overflow="hidden" borderColor="coolGray.200" borderWidth="1" _dark={{
-      borderColor: "coolGray.600",
-      backgroundColor: "gray.700"
-    }} _web={{
-      shadow: 2,
-      borderWidth: 0
-    }} _light={{
-      backgroundColor: "gray.50"
-    }}>
-        
-        <Stack p="4" space={3}>
-          <Stack space={2}>
-            <Heading size="md" ml="-1">
-              Reserva #1
-            </Heading>
-            <Text fontSize="xs" _light={{
-            color: "violet.500"
-          }} _dark={{
-            color: "violet.400"
-          }} fontWeight="500" ml="-0.5" mt="-1">
-              horario de Reserva
-            </Text>
-          </Stack>
-          <Text fontWeight="400">
-            Descripcion
-          </Text>
-          <HStack alignItems="center" space={4} justifyContent="space-between">
-            <HStack alignItems="center">
-              <Text color="coolGray.600" _dark={{
-              color: "warmGray.200"
-            }} fontWeight="400">
-                6 mins ago
-              </Text>
-            </HStack>
-          </HStack>
-        </Stack>
-      </Box>
-    </Box>
 
     <Box height="200" w="300" shadow="2" rounded="lg" m='5' ml='9' _dark={{
       bg: "coolGray.200:alpha.20"

mobile-ui/components/ReservasCard/index.js

@@ -0,0 +1,76 @@
+import { format } from "date-fns";
+import {
+    Box, HStack,
+    ScrollView,
+    Text, 
+    Stack, 
+    Heading,
+    Badge
+} from "native-base";
+import PropTypes from 'prop-types';
+
+import React from 'react';
+
+export const ReservasCard = ({ date, startTime, endTime, status}) => {
+    const dateFormated = format(new Date(date), "dd LL yyyy")
+  
+
+    try {
+        
+    } catch (error) {
+        
+    }
+
+    return (
+        <ScrollView showsVerticalScrollIndicator={false}> 
+
+             
+    <Box mt="5" alignItems="center">
+      <Box width="80" rounded="lg" overflow="hidden" borderColor="coolGray.200" borderWidth="1" _dark={{
+      borderColor: "coolGray.600",
+      backgroundColor: "gray.700"
+    }} _web={{
+      shadow: 2,
+      borderWidth: 0
+    }} _light={{
+      backgroundColor: "gray.50"
+    }}>
+        <Stack p="4" space={3}>
+          <Stack space={2}>
+
+          <Badge backgroundColor={status === 1 ? 'tertiary.500' : 'danger.600'} _text={{
+                        color: "white"
+                    }} variant="solid" rounded="4">
+                        <Text bold={true} color='danger.50'> {status === 1 ? 'LIBRE' : 'RESERVADO'}</Text>
+                    </Badge>
+            <Heading size="md" ml="-1">
+              Reserva #1
+            </Heading>
+            <Text fontSize="xs" _light={{
+            color: "violet.500"
+          }} _dark={{
+            color: "violet.400"
+          }} fontWeight="500" ml="-0.5" mt="-1">
+             {dateFormated}
+            </Text>
+          </Stack>
+          <Text fontWeight="400">
+            Hora de inicio: {startTime}
+          </Text>
+          <Text fontWeight="400">
+            Hora de finalización: {endTime}
+          </Text>
+        
+        </Stack>
+      </Box>
+    </Box>
+        </ScrollView>
+    )
+
+}
+ReservasCard.propTypes = {
+    date: PropTypes.string.isRequired,
+    startTime: PropTypes.string.isRequired,
+    endTime: PropTypes.string.isRequired,
+    status: PropTypes.string.isRequired
+}

mobile-ui/context/UserContext.js

@@ -0,0 +1,23 @@
+import React, { createContext, useState } from 'react'
+
+export const UserContext = createContext({});
+
+export const UserContextProvider = ({ children }) => {
+    const [user, setUser] = useState(null);
+
+    const addUser = (user) => setUser(user);
+
+    const removeUser = () => setUser(null);
+
+    const value = {
+        user,
+        addUser,
+        removeUser
+    }
+
+    return (
+        <UserContext.Provider value={value}>
+            {children}
+        </UserContext.Provider>
+    )
+}

mobile-ui/environment/api.js

@@ -0,0 +1,3 @@
+export class API {
+    static BASE_URL = "http://localhost:4000"
+}

mobile-ui/package.json

@@ -22,9 +22,11 @@
     "@react-navigation/native": "^6.0.11",
     "@react-navigation/native-stack": "^6.7.0",
     "@react-navigation/stack": "^6.2.2",
+    "date-fns": "^2.29.2",
     "expo": "^44.0.0",
     "expo-status-bar": "~1.2.0",
     "native-base": "3.4.0",
+    "prop-types": "^15.8.1",
     "react": "17.0.1",
     "react-dom": "17.0.1",
     "react-native": "0.64.3",
@@ -32,7 +34,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-table-component": "^1.2.2",
     "react-native-web": "0.17.1",
     "universal-cookie": "^4.0.4"
   },

servicio-invitados/src/guests/guests.controller.ts

@@ -16,7 +16,10 @@ export class GuestsController {
   findAll() {
     return this.guestsService.findAll();
   }
-
+  @MessagePattern({ cmd: 'findGuestUser' })
+  findGuestUser(@Payload() id: string) {
+    return this.guestsService.findGuestUser(id);
+  }
   @MessagePattern({ cmd: 'findOneGuest' })
   findOneById(@Payload() id: string) {
     let _id = id['_id'];

servicio-invitados/src/guests/guests.service.ts

@@ -17,6 +17,10 @@ export class GuestsService {
     return this.guestModel.find().setOptions({ sanitizeFilter: true }).exec();
   }
 
+  async findGuestUser(id: string): Promise<Guest[]> {
+    return this.guestModel.find({_tenant_id:id}).setOptions({ sanitizeFilter: true }).exec();
+  }
+
   findOneId(id: string): Promise<Guest> {
     return this.guestModel.findOne({ _id: id }).exec();
   }