reservas fetch

mobile-ui/App.js

@@ -19,8 +19,6 @@ import AgregarInvitados from "./components/AgregarInvitados";
 const Stack = createNativeStackNavigator();
 const Tab = createBottomTabNavigator();
 
-
-
 function HomeTab({ route }) {
   const { user } = useContext(UserContext);
   const [selected, setSelected] = useState(0);

mobile-ui/components/Home.js

@@ -11,6 +11,8 @@ export default function Home() {
 
   useEffect(() => {
 
+    console.log(user);
+
     const onRequestCommentsData = async () => {
       setIsRequesting(true);
 
@@ -23,7 +25,7 @@ export default function Home() {
         })
 
         const response = await jsonResponse.json();
-        console.log(response);
+        // console.log(response);
 
         setComments(response.message);
 

mobile-ui/components/Reservas.js

@@ -1,97 +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(() => {
+
+    console.log("im in");
+
+    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 mt="5" 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 height="200" w="300" shadow="2" rounded="lg" m='5' ml='9' _dark={{

mobile-ui/components/ReservasCard/index.js

@@ -0,0 +1,69 @@
+import { format } from "date-fns";
+import {
+    Box, HStack,
+    ScrollView,
+    Text, 
+    Stack, 
+    Heading
+} 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}>
+            <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
+}