eduardo
/
katoikia-app
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

reservas fetch

This commit is contained in:
Maria Sanchez 2022-08-22 20:53:58 -06:00
parent 2a8233cceb
commit 1ccadfe6a7
4 changed files with 131 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
mobile-ui/App.js
View File

@ -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);

4
mobile-ui/components/Home.js
View File

@ -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);

129
mobile-ui/components/Reservas.js
View File

@ -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 { Entypo } from '@expo/vector-icons';
import { API } from "../environment/api";
import { MaterialCommunityIcons } from '@expo/vector-icons';
import { View, TextInput, StyleSheet } from "react-native";
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
},
import { UserContext } from "../context/UserContext";
import { ReservasCard } from "./ReservasCard";
iconStyle: {
padding: 10,
},
export default function Reservas({navigation}) {
viewSection: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
margin: 10
},
const { user } = useContext(UserContext)
const [isRequesting, setIsRequesting] = useState(false);
const [reservas, setReservas] = useState([]);
container: {
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'
}
})
export default function Reservas({navigation}) {
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}>
<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">
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>
{
reservas.map(item => (
<ReservasCard
key={item._id}
date={item.date_entry}
startTime={item.start_time}
endTime={item.finish_time}
status={item.status}
/>
))
}
<Box height="200" w="300" shadow="2" rounded="lg" m='5' ml='9' _dark={{

69
mobile-ui/components/ReservasCard/index.js Normal file
View File

@ -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
}