Ei kuvausta

calendar.js 2.6KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. import React, { Component, useCallback, useState, useEffect} from 'react';
  2. import { StyleSheet, View, Text, TouchableOpacity, Modal, Button } from 'react-native';
  3. import Header from '../shared/header';
  4. import Calendar from 'react-native-calendars/src/calendar';
  5. import { Agenda, calendarTheme } from 'react-native-calendars';
  6. import { Ionicons } from '@expo/vector-icons';
  7. import { ProgressBar, MD3Colors } from 'react-native-paper';
  8. const userslist = 'https://ada.uprrp.edu/~pablo.puig1/TPMG/userslist.php'
  9. const eventlist = 'https://ada.uprrp.edu/~pablo.puig1/TPMG/eventslist.php'
  10. export default function Calendario({ navigation }) {
  11. const [eventos, setEventos] = useState({});
  12. useEffect(() => {
  13. fetch(eventlist)
  14. .then(response => response.json())
  15. .then(dat => setEventos(dat))
  16. .catch(error => console.error(error))
  17. }, []);
  18. const formattedEvents = Object.keys(eventos).reduce((result, key) => {
  19. const item = eventos[key];
  20. const date = item.startDate;
  21. if (result[date]){ result[date].push(item);}
  22. else{result[date] = [item];}
  23. return result;
  24. }, {});
  25. function renderItem(item) {
  26. console.log('item.activityDescription: ', item.activityDescription)
  27. return (
  28. <View>
  29. <View style={[styles.item, { height: item.height }]}>
  30. <View>
  31. <Text style = {[styles.activity_name]}> {item.activityName}</Text>
  32. <Text style = {[styles.time]}> 10:00AM-2:00PM</Text>
  33. <Text style = {[styles.activity_description]}> {item.activityDescription}</Text>
  34. </View>
  35. {/* <TouchableOpacity onPress={() => onButtonClick(item)}> */}
  36. <TouchableOpacity onPress={() => alert("Te has subcrito a la actividad!")}>
  37. <Ionicons name={item.icon} />
  38. </TouchableOpacity>
  39. </View>
  40. <ProgressBar progress={(item.totalSubscribed / item.maxSubscribed)} color={item.totalSubscribed != item.maxSubscribed ? '#1AA7EC' : '#00AB41'} style={styles.progress} />
  41. </View>
  42. );
  43. }
  44. return (
  45. <Agenda
  46. items={formattedEvents}
  47. renderItem={renderItem}
  48. />
  49. );
  50. }
  51. const styles = StyleSheet.create({
  52. container: {
  53. padding: 24
  54. },
  55. item: {
  56. flexDirection: 'row',
  57. justifyContent: 'space-between',
  58. backgroundColor: 'white',
  59. flex: 1,
  60. padding: 15,
  61. marginRight: 10,
  62. marginTop: 32
  63. },
  64. activity_name :{
  65. // fontFamily : 'sans-serif',
  66. fontSize : 25,
  67. },
  68. time : {
  69. // fontWeight: 'bold'
  70. },
  71. activity_description : {
  72. fontSize : 16,
  73. },
  74. progress: {
  75. height: 5,
  76. width: 355.2 // this is harcoded and need to be calculated based on the previous View width
  77. }
  78. });