import React, { Component, useCallback, useState, useEffect} from 'react';
import { StyleSheet, View, Text, TouchableOpacity, Modal, Button } from 'react-native';
import Header from '../shared/header';
import Calendar from 'react-native-calendars/src/calendar';
import { Agenda, calendarTheme } from 'react-native-calendars';
import { Ionicons } from '@expo/vector-icons';
import { ProgressBar, MD3Colors } from 'react-native-paper';
const userslist = 'https://ada.uprrp.edu/~pablo.puig1/TPMG/userslist.php'
const eventlist = 'https://ada.uprrp.edu/~pablo.puig1/TPMG/eventslist.php'
export default function Calendario({ navigation }) {
const [eventos, setEventos] = useState({});
useEffect(() => {
fetch(eventlist)
.then(response => response.json())
.then(dat => setEventos(dat))
.catch(error => console.error(error))
}, []);
const formattedEvents = Object.keys(eventos).reduce((result, key) => {
const item = eventos[key];
const date = item.startDate;
if (result[date]){ result[date].push(item);}
else{result[date] = [item];}
return result;
}, {});
function renderItem(item) {
console.log('item.activityDescription: ', item.activityDescription)
return (
{item.activityName}
10:00AM-2:00PM
{item.activityDescription}
{/* onButtonClick(item)}> */}
alert("Te has subcrito a la actividad!")}>
);
}
return (
);
}
const styles = StyleSheet.create({
container: {
padding: 24
},
item: {
flexDirection: 'row',
justifyContent: 'space-between',
backgroundColor: 'white',
flex: 1,
padding: 15,
marginRight: 10,
marginTop: 32
},
activity_name :{
// fontFamily : 'sans-serif',
fontSize : 25,
},
time : {
// fontWeight: 'bold'
},
activity_description : {
fontSize : 16,
},
progress: {
height: 5,
width: 355.2 // this is harcoded and need to be calculated based on the previous View width
}
});