Merge branch 'dev' into US-11-ModificarAdministradordeComunidaddeViviendas

.gitignore

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

api-gateway/src/app.controller.ts

@@ -400,6 +400,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(
@@ -409,6 +411,8 @@ export class AppController {
       number_plate,
       phone,
       status,
+      tenant_id,
+      community_id,
       date_entry,
     );
   }
@@ -423,6 +427,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')
@@ -509,6 +519,11 @@ export class AppController {
     return this.appService.findPost(paramPost);
   }
 
+  @Delete('post/deletePost/:id')
+  deletePost(@Param('id') id: string) {
+    return this.appService.deletePost(id);
+  }
+
   // #==== API Comment
 
   @Post('post/createComment')

api-gateway/src/app.service.ts

@@ -508,12 +508,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)
@@ -536,7 +538,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
@@ -640,6 +649,15 @@ export class AppService {
       .pipe(map((message: string) => ({ message })));
   }
 
+  //DELETE
+  deletePost(paramPostId: string) {
+    const pattern = { cmd: 'removePost' };
+    const payload = { id: paramPostId };
+    return this.clientPostApp
+      .send<string>(pattern, payload)
+      .pipe(map((message: string) => ({ message })));
+  }
+
   // ====================== COMMNENT POSTS ===============================
 
   //Comment 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,11 +1,11 @@
-import React,{useState} from "react";
+import React, { useContext, useState } from "react";
 import {
   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";
@@ -13,48 +13,63 @@ import Reservas from "./components/Reservas";
 import Profile from "./components/Profile";
 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();
 
-
+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,
-    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>
-          <HStack alignItems="center">
-            <Badge colorScheme="darkBlue" _text={{
-            color: "white"
-          }} variant="solid" rounded="4">
-              Comunicado
-            </Badge>
-            <Spacer />
-            <Text fontSize={10} color="coolGray.800">
-              1 month ago
-            </Text>
-          </HStack>
-          <Text color="coolGray.800" mt="3" fontWeight="medium" fontSize="xl">
-            Administrador de Comunidad
-          </Text>
-          <Text mt="2" fontSize="sm" color="coolGray.700">
-            Notificacion sobre la aplicacion
-          </Text>
 
-        </Box>
+    console.log(user);
-      </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>
-          <HStack alignItems="center">
-            <Badge colorScheme="darkBlue" _text={{
-            color: "white"
-          }} variant="solid" rounded="4">
-              Comunicado
-            </Badge>
-            <Spacer />
-            <Text fontSize={10} color="coolGray.800">
-              1 month ago
-            </Text>
-          </HStack>
-          <Text color="coolGray.800" mt="3" fontWeight="medium" fontSize="xl">
-            Administrador General
-          </Text>
-          <Text mt="2" fontSize="sm" color="coolGray.700">
-            Notificacion sobre la aplicacion
-          </Text>
 
-        </Box>
+    const onRequestCommentsData = async () => {
-      </Pressable>
+      setIsRequesting(true);
+
+      try {
+        const jsonResponse = await fetch(`${API.BASE_URL}/post/allComments`, {
+          method: "GET",
+          headers: {
+            'Content-Type': 'application/json'
+          }
+        })
+
+        const response = await jsonResponse.json();
+        // console.log(response);
+
+        setComments(response.message);
+
+      } catch (error) {
+
+      }
+
+      setIsRequesting(false)
+    }
+
+    onRequestCommentsData()
+
+  }, [user])
+
+
+  return (
+
+    <Box alignItems="center">
+
+      <ScrollView width='100%' h='550' ml='1' _contentContainerStyle={{
+        px: "20px",
+        mb: "4",
+        minW: "72"
+      }}>
+
+        {
+          comments.map(item => (
+            <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,
@@ -15,133 +15,125 @@ import logo from "../assets/logo-katoikia.png";
 import { Entypo } 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(); 
 
-const styles = StyleSheet.create({
+export default function LogIn({ navigation }) {
-  input: {
-    height: 40,
-    margin: 10,
-    borderWidth: 0.5,
-    padding: 5,
-    flex: 1,
-    paddingTop: 10,
-    paddingRight: 10,
-    paddingBottom: 10,
-    paddingLeft: 0,
-    marginTop: 50, 
-    marginBottom: 10
-  }, 
 
-  iconStyle: {
+  const { addUser } = useContext(UserContext);
-    padding: 10, 
-  }, 
 
-  viewSection: {
+  const [credentials, setCredentials] = useState({
-    flex: 1,
+    email: "lalo@lalo.com",
-    flexDirection: 'row',
+    password: "12345"
-    justifyContent: 'center',
+  });
-    alignItems: 'center',
-    margin: 10
-  },
 
-  container: {
+  const onHandleChange = (name) => (value) => setCredentials(prev => ({ ...prev, [name]: value }))
 
-  }
+  const iniciarSesion = async () => {
-})
+    try {
   
-const iniciarSesion = async()  => {
+      console.log(baseURL);
-
+      await fetch(baseURL, {
-  try {
+        cache: 'no-cache', 
-
+        method: 'POST', 
-    await fetch(baseURL, {
+        body: JSON.stringify(credentials), 
-      cache: 'no-cache', 
+        headers: {
-      method: 'POST', 
+          'Content-Type': 'application/json'
-      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: "/"} )
         }
-    })
+      })
+      .then(response => {
+        if (response.status != 201){
+          console.log('ocurrio un error ');
+        }else{
+          return response.json(); 
+        }
+      })
+      .then( response => {
 
-  } catch (error) {
+        // 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);
+    }
 
   }
 
-   
-}
-
-export default function LogIn({navigation}) {
   return (
 
+    <Center w="100%">
+      <Box safeArea p="2" py="8" w="90%" maxW="290">
 
-      <Center w="100%">
+        <Center>
-        <Box safeArea p="2" py="8" w="90%" maxW="290">
+          <Image source={
+            logo
+          } width={500} height={550} m='2'
+            alt="Katoikia logo" size="xl" justifyContent="center" />
 
-          <Center> 
+        </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>
 
-          <Heading
+        <View style={styles.container}>
-            size="lg"
+          <VStack space={3} mt="5">
-            fontWeight="600"
+            <FormControl isRequired >
-            color="coolGray.800"
+              <FormControl.Label Text='bold'> Correo Electrónico </FormControl.Label>
-            _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} />
+                <Entypo name="email" size={20} color="grey" style={styles.iconStyle} />
-              <TextInput type="text" style={styles.input} />
+                <TextInput
+                  name='email'
+                  type="text"
+                  style={styles.input}
+                  value={credentials.email}
+                  placeholder='Correo electrónico'
+                  onChangeText={onHandleChange("email")} />
               </View>
 
             </FormControl>
-            <FormControl>
+            <FormControl isRequired>
-            <FormControl.Label> Contraseña </FormControl.Label>
+              <FormControl.Label Text='bold'> Contraseña </FormControl.Label>
-                <View style={styles.viewSection}> 
+              <View style={styles.viewSection}>
-                <MaterialCommunityIcons name="form-textbox-password" size={20} color="grey" style={styles.iconStyle}/>
+                <MaterialCommunityIcons name="form-textbox-password" size={20} color="grey" style={styles.iconStyle} />
-                <TextInput type="password" style={styles.input} />
+                <TextInput
-                </View>
+                  name='password'
+                  type="password"
+                  style={styles.input}
+                  value={credentials.password}
+                  placeholder='Contraseña'
+                  onChangeText={onHandleChange("password")} />
+              </View>
               <Link
                 _text={{
                   fontSize: "xs",
@@ -155,21 +147,55 @@ export default function LogIn({navigation}) {
 
               >
 
-                  Recuperar contraseña
+                Recuperar contraseña
 
               </Link>
             </FormControl>
-            <Button  mt="2" backgroundColor="#D7A86E" onPress={() => navigation.navigate('Comunicados')}
+            <Button mt="2" backgroundColor="#D7A86E" onPress={iniciarSesion}
             >
               <Text>Continuar</Text>
             </Button>
 
           </VStack></View>
 
-        </Box>
+      </Box>
-      </Center>
+    </Center>
   );
 
-
- 
 }
+
+const styles = StyleSheet.create({
+  input: {
+    height: 40,
+    margin: 10,
+    borderWidth: 0.5,
+    padding: 5,
+    flex: 1,
+    paddingTop: 10,
+    paddingRight: 10,
+    paddingBottom: 10,
+    paddingLeft: 0,
+    marginTop: 50,
+    marginBottom: 10,
+    borderRadius: 4
+  },
+
+  iconStyle: {
+    paddingBottom: 20,
+    marginTop: 3,
+    paddingTop: 35
+  },
+
+  viewSection: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+
+    marginBottom: 28
+  },
+
+  container: {
+
+  }
+})

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,138 +1,76 @@
-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 => (
+            <ReservasCard
+              key={item._id}
+              date={item.date_entry}
+              startTime={item.start_time}
+              endTime={item.finish_time}
+              status={item.status}
+            />
+          ))
+        }
 
 
-    <Box 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}>
-            <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"
     }} _light={{

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();
   }

web-ui/web-react/src/components/Inquilinos.js

@@ -231,7 +231,24 @@ const Inquilinos = () => {
   }
 
   const deleteSelectedTenants = () => {
-    let _tenants = tenants.filter((val) => !selectedTentants.includes(val))
+    let _tenants = tenants.filter(
+      (val) => !selectedTentants.includes(val)
+    );
+    selectedTentants.map((item) => {
+      let _tenant = {
+        community_id: item.community_id,
+        number_house: item.number_house
+      };
+      fetch('http://localhost:4000/user/deleteTenant/' + item._id, {
+        cache: 'no-cache',
+        method: 'PUT',
+        body: JSON.stringify(_tenant),
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      });
+    });
+
     setTenants(_tenants)
     setDeleteTenantsDialog(false)
     setSelectedTenants(null)

web-ui/web-react/src/components/RegistroComunicado.js

@@ -11,155 +11,205 @@ import { Toolbar } from 'primereact/toolbar';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faHome, faUserAlt } from '@fortawesome/free-solid-svg-icons';
 import { faCommentAlt } from '@fortawesome/free-solid-svg-icons';
-import { faPhoneAlt } from '@fortawesome/free-solid-svg-icons';
-import { faAt } from '@fortawesome/free-solid-svg-icons';
-import { faIdCardAlt } from '@fortawesome/free-solid-svg-icons';
 import { faEllipsis } from '@fortawesome/free-solid-svg-icons';
-import { faHomeAlt } from '@fortawesome/free-solid-svg-icons';
-import { Dropdown } from 'primereact/dropdown';
 import classNames from 'classnames';
+
 const RegistroComunicado = () => {
 
-    let emptyComunicado = {
+  let emptyComunicado = {
-        _id: null,
+    _id: null,
-        post: '',
+    post: '',
-        user_id: '',
+    user_id: '',
-        community_id: ''
+    community_id: ''
+  };
+
+  useEffect(() => {
+    listaComunis();
+  }, [])
+
+  const [comunicado, setComunicado] = useState(emptyComunicado);
+  const [comunicados, setComunicados] = useState([]);
+  const [comunicadoId, setComunicadoId] = useState(null);
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+  const [submitted, setSubmitted] = useState(false);
+  const toast = useRef(null);
+  const dt = useRef(null);
+  const [cookies, setCookie] = useCookies();
+  const [globalFilter, setGlobalFilter] = useState(null);
+
+  async function listaComunis() {
+    let comunicadosResponse = await fetch('http://localhost:4000/post/allPosts', { method: 'GET' });
+    const comunicadosJson = await comunicadosResponse.json();
+    const comunicadosCommunity = comunicadosJson.message.filter((comunicado) => {
+      return comunicado.community_id === cookies.community_id;
+    })
+    setComunicados(comunicadosCommunity);
+    console.log(comunicadosCommunity);
+  }
+
+  const saveComunicado = () => {
+    var data = {
+      post: document.getElementById('txt_comunicado').value,
+      user_id: cookies.id,
+      community_id: cookies.community_id
     };
 
-    useEffect(()=>{
+    fetch('http://localhost:4000/post/createPost', {
-      listaComunis();
+      cache: 'no-cache',
-    },[])
+      method: 'POST',
+      body: JSON.stringify(data),
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    }).then((response) => {
+      if (response.status != 201)
+        console.log('Ocurrió un error con el servicio: ' + response.status);
+      else
+        return response.json();
+    }).then((_response) => {
 
+    }).catch(
+      err => console.log('Ocurrió un error con el fetch', err)
+    );
+  }
 
-    const [comunicado, setComunicado] = useState(emptyComunicado);
+  const header = (
-    const [comunicados,setComuicados]=useState([]);
+    <React.Fragment>
-    const [comunicadoId, setComunicadoId] = useState(null);
+      <div className="flex flex-column md:flex-row md:justify-content-between md:align-items-center">
-    const [submitted, setSubmitted] = useState(false);
+        <h5 className="m-0">Comunicados de la comunidad</h5>
-    const toast = useRef(null);
+        <span className="block mt-2 md:mt-0 p-input-icon-left">
-    const dt = useRef(null);
+          <i className="pi pi-search" />
-    const [cookies, setCookie] = useCookies();
+          <InputText type="search" onInput={(e) => setGlobalFilter(e.target.value)} placeholder="Buscar..." />
-    const [globalFilter, setGlobalFilter] = useState(null);
+        </span>
-
+      </div>
-    async function listaComunis() {
+    </React.Fragment>
-      let comunicadosA=await fetch('http://localhost:4000/post/allPosts', {method:'GET'});
-      let comunicadosRes= await comunicadosA.json();
-      setComuicados(comunicadosRes.message);
-      console.log(comunicadosRes.message);
-     }
-
-  
-    const saveComunicado = () => {
-        var data = {
-            post: document.getElementById('txt_comunicado').value,
-            user_id: cookies.id,
-            community_id: cookies.community_id
-          };
-      
-          fetch('http://localhost:4000/post/createPost', {
-            cache: 'no-cache',
-            method: 'POST',
-            body: JSON.stringify(data),
-            headers: {
-              'Content-Type': 'application/json'
-            }
-          })
-            .then(
-              function (response) {
-                if (response.status != 201)
-                  console.log('Ocurrió un error con el servicio: ' + response.status);
-                else
-                  return response.json();
-              }
-            )
-            .then(
-              function (response) {
-                
-              }
-            )
-            .catch(
-              err => console.log('Ocurrió un error con el fetch', err)
-            );
-    }
-
-    const header = (
-      <React.Fragment>
-
-          <div className="flex flex-column md:flex-row md:justify-content-between md:align-items-center">
-              <h5 className="m-0">Comunicados de la comunidad</h5>
-              <span className="block mt-2 md:mt-0 p-input-icon-left">
-                  <i className="pi pi-search" />
-                  <InputText type="search" onInput={(e) => setGlobalFilter(e.target.value)} placeholder="Buscar..." />
-              </span>
-          </div>
-      </React.Fragment>
   );
   const headerPost = (
     <>
-        <p>
+      <p>
-            {' '}
+        {' '}
-            <FontAwesomeIcon icon={faCommentAlt} style={{ color: "#D7A86E" }} />{' '}
+        <FontAwesomeIcon icon={faCommentAlt} style={{ color: "#D7A86E" }} />{' '}
-            Descripción comunicado</p>
+      Descripción comunicado</p>
     </>
   )
 
   const leftToolbarTemplate = () => {
     return (
-        <React.Fragment>
+      <React.Fragment>
-            <div className="my-2">
+        <div className="my-2">
-                <Button label="Eliminar" icon="pi pi-trash" className="p-button-danger" />
+          <Button label="Eliminar" icon="pi pi-trash" className="p-button-danger" />
-            </div>
-        </React.Fragment>
-    )
-}
-
-const rightToolbarTemplate = () => {
-    return (
-        <React.Fragment>
-            <Button label="Exportar" icon="pi pi-upload" className="p-button-help" />
-        </React.Fragment>
-    )
-}
-
-    return (
-        <div className="grid">
-            <div className="col-12">
-                  <Toast ref={toast} />
-                  <div className="card">
-                      <Toolbar className="mb-4" left={leftToolbarTemplate} right={rightToolbarTemplate}></Toolbar>
-                      <DataTable ref={dt} value={comunicados} dataKey="_id" paginator rows={5}
-                          scrollable scrollHeight="400px" scrollDirection="both" header={header}
-                          rowsPerPageOptions={[5, 10, 25]} className="datatable-responsive mt-3"
-                          paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
-                          currentPageReportTemplate="Mostrando {first} a {last} de {totalRecords} administradores de comunidades de viviendas"
-                          globalFilter={globalFilter} emptyMessage="No hay administradores de comunidades registrados.">
-                          <Column selectionMode="multiple" headerStyle={{ width: '3rem' }}></Column>
-                          <Column field="post" sortable header={headerPost} style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}></Column>
-        
-                      </DataTable>
-                  </div>
-              </div>
-            <div className="col-12">
-                <div className="card">
-                    <h5>Registro de un comunicado para la comunidad</h5>
-                    <div className="p-fluid formgrid grid">
-                        <div className="field col-12 md:col-12">
-                            <label htmlFor="name">Contenido del comunicado</label>
-                            <div className="p-0 col-12 md:col-12">
-                                <div className="p-inputgroup">
-                                    <span className="p-inputgroup-addon p-button p-icon-input-khaki">
-                                        <i className="pi pi-pencil"></i>
-                                    </span>
-                                    <InputTextarea id="txt_comunicado" rows="4"/>
-                                </div>
-                            </div>
-                        </div>
-                        <Button label="Registrar" onClick={saveComunicado} />
-                    </div>
-                </div>
-            </div>
         </div>
-    );
+      </React.Fragment>
+    )
+  }
+
+  const rightToolbarTemplate = () => {
+    return (
+      <React.Fragment>
+        <Button label="Exportar" icon="pi pi-upload" className="p-button-help" />
+      </React.Fragment>
+    )
+  }
+
+  const actions = (rowData) => {
+    return (
+      <div className="actions">
+        <Button
+          icon='pi pi-trash'
+          className='p-button-rounded p-button-danger mt-2 mx-2'
+          onClick={() => confirmDelete(rowData)}
+          title='Eliminar Inquilino'
+        />
+      </div>
+    )
+  }
+
+  const confirmDelete = (post) => {
+    setComunicado(post);
+    setShowDeleteDialog(true);
+  }
+
+  const deleteDialogFooter = (
+    <>
+      <Button label="Cancelar" icon="pi pi-times" className="p-button-secondary" onClick={() => setShowDeleteDialog(false)} />
+      <Button label="Eliminar" icon="pi pi-check" className="p-button-danger" onClick={() => deleteComunicado()} />
+    </>
+  );
+
+  const deleteComunicado = () => {
+    fetch(`http://localhost:4000/post/deletePost/${comunicado._id}`, {
+      cache: 'no-cache',
+      method: 'DELETE',
+      headers: { 'Content-Type': 'application/json' }
+    }).then((response) => {
+      if (response.status != 200)
+        console.log('Ocurrió un error con el servicio: ' + response.status);
+      else
+        return response.json();
+    }).then((_response) => {
+      setShowDeleteDialog(false);
+      listaComunis();
+      setComunicado(emptyComunicado);
+    }).catch(err => console.log('Ocurrió un error con el fetch', err));
+  }
+
+  return (
+    <div className="grid">
+      <div className="col-12">
+        <Toast ref={toast} />
+        <div className="card">
+          <Dialog
+            header="Eliminar comunicado"
+            visible={showDeleteDialog}
+            style={{ width: '450px' }}
+            modal={true} onHide={() => setShowDeleteDialog(false)}
+            footer={deleteDialogFooter}
+          >
+            <div className="flex align-items-center justify-content-center">
+              <i className="pi pi-exclamation-triangle mr-3" style={{ fontSize: '2rem' }} />
+              {comunicado && <span>¿Estás seguro que desea eliminar el aviso "<b>{comunicado.post}</b>"?</span>}
+            </div>
+          </Dialog>
+          <Toolbar className="mb-4" left={leftToolbarTemplate} right={rightToolbarTemplate}></Toolbar>
+          <DataTable ref={dt} value={comunicados} dataKey="_id" paginator rows={5}
+            scrollable scrollHeight="400px" scrollDirection="both" header={header}
+            rowsPerPageOptions={[5, 10, 25]} className="datatable-responsive mt-3"
+            paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
+            currentPageReportTemplate="Mostrando {first} a {last} de {totalRecords} administradores de comunidades de viviendas"
+            globalFilter={globalFilter} emptyMessage="No hay administradores de comunidades registrados.">
+            <Column selectionMode="multiple" headerStyle={{ width: '3rem' }}></Column>
+            <Column field="post" sortable header={headerPost} style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}></Column>
+            <Column
+              style={{
+                flexGrow: 1,
+                flexBasis: '80px',
+                minWidth: '80px'
+              }}
+              body={actions} />
+          </DataTable>
+        </div>
+      </div>
+      <div className="col-12">
+        <div className="card">
+          <h5>Registro de un comunicado para la comunidad</h5>
+          <div className="p-fluid formgrid grid">
+            <div className="field col-12 md:col-12">
+              <label htmlFor="name">Contenido del comunicado</label>
+              <div className="p-0 col-12 md:col-12">
+                <div className="p-inputgroup">
+                  <span className="p-inputgroup-addon p-button p-icon-input-khaki">
+                    <i className="pi pi-pencil"></i>
+                  </span>
+                  <InputTextarea id="txt_comunicado" rows="4" />
+                </div>
+              </div>
+            </div>
+            <Button label="Registrar" onClick={saveComunicado} />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
 };
 
 export default React.memo(RegistroComunicado);