Geen omschrijving

calendar.js 7.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245
  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. // react hooks, useState and useEffect
  9. const userslist = 'https://ada.uprrp.edu/~pablo.puig1/TPMG/userslist.php'
  10. const eventlist = 'https://ada.uprrp.edu/~pablo.puig1/TPMG/eventslist.php'
  11. export default function Calendario({ navigation }) {
  12. // state = {
  13. // array: []
  14. // }
  15. const [eventos, setEventos] = useState({});
  16. useEffect(() => {
  17. fetch(eventlist)
  18. .then(response => response.json())
  19. .then(dat => setEventos(dat))
  20. // this.setState({ array: response })
  21. // state.array = response
  22. // console.log(response)
  23. // );
  24. // console.log(state.array)
  25. // state.array = array
  26. .catch(error => console.error(error))
  27. }, []);
  28. {/*
  29. TODO: Convert array of dictionary into a dictionary of dictionary where the keys are the `startDate
  30. */}
  31. var events = {}
  32. // console.log('array: ', this.state.array)
  33. // {this.state.array.map(value => {
  34. // console.log('value: ', value)
  35. // events[value.startDate] = [{ // this have a problem because we can have multiple events in the same date, so it is not a best key
  36. // 'id' : value.id,
  37. // 'activityDescription' : value.activityDescription,
  38. // 'subscribed' : value.subscribed,
  39. // 'icon' : value.icon,
  40. // 'totalSubscribed' : value.totalSubscribed,
  41. // 'maxSubscribed' : value.maxSubscribed
  42. // }]
  43. // });}
  44. // console.log('events: ', events);
  45. // getMoviesFromApi();
  46. // const [dates, setDates] = useState([
  47. // {
  48. // date: '2022-12-06',
  49. // items: [1, 2, 3]
  50. // },
  51. // {
  52. // date: '2022-12-07',
  53. // items: [1, 2, 3]
  54. // }
  55. // ]);
  56. // const [items, setItems] = useState([
  57. // {id: '1', date: '2022-12-06', name: 'matricula', sub: false, count: 10, max: 10}
  58. // ])
  59. // TODO 1: make sure more than one activity on the same date appears on screen
  60. // TO SOLVE: Two items of the same date, just the last item appear
  61. // TODO 2: make can we add images as part of the item? (this is more advanced, which could be implemented in the future)
  62. const [items, setItems] = useState({
  63. '2022-12-21': [{
  64. id: '1',
  65. activityDescription: 'aaaa',
  66. subscribed: false,
  67. icon: 'person-add-outline',
  68. totalSubscribed: 10,
  69. maxSubscribed: 10 }],
  70. '2022-12-22':[{
  71. id: '2',
  72. activityDescription: 'Actividad de cocina para la comunidad de Santa Rita, Río Piedras 🍲',
  73. subscribed: false,
  74. icon: 'person-add-outline',
  75. totalSubscribed: 3,
  76. maxSubscribed: 7 }],
  77. '2022-12-23': [{
  78. id: '3',
  79. activityDescription: 'Taller de aprendizaje de construcción de techos 🏠',
  80. subscribed: false,
  81. icon: 'person-add-outline',
  82. totalSubscribed: 7,
  83. maxSubscribed: 7 }],
  84. '2022-12-24': [],
  85. });
  86. const [data, setData] = useState({data});
  87. const [selectedIcon, setSelectedIcon] = useState('person-add-outline');
  88. const formattedEvents = Object.keys(eventos).reduce((result, key) => {
  89. const item = eventos[key];
  90. const date = item.startDate;
  91. // result[date] = item;
  92. if (result[date]){
  93. result[date].push(item);
  94. }else{
  95. result[date] = [item];
  96. }
  97. return result;
  98. }, {});
  99. // const [current, setCurrent] = useState({formattedEvents});
  100. console.log(formattedEvents)
  101. console.log(items)
  102. const onButtonClick = useCallback((itemClicked) => {
  103. // [1]. change selected icon sub status from false to true or vice versa
  104. // [2]. change icon from 'person-add-outline' to 'person-sharp' or vice versa
  105. {
  106. Object.keys(items).map(key => {
  107. items[key].map(item => {
  108. // alert(item.id)
  109. if (item.id === itemClicked.id) {
  110. // alert(item.icon)
  111. // alert(item.sub)
  112. return{
  113. ...item,
  114. subscribed: true, //item.sub === false ? true : false,
  115. icon: 'person-sharp' //item.icon === 'person-add-outline' ? 'person-sharp' : 'person-add-outline'
  116. }
  117. // setSelectedIcon(selectedIcon === 'person-add-outline' ? 'person-sharp' : 'person-add-outline')
  118. }
  119. else{
  120. return item
  121. }
  122. // {items[key].id}
  123. })
  124. })
  125. }
  126. }, [setItems]);
  127. // const onButtonClick = useCallback((itemClicked) => {
  128. // Object.keys(items).map(key => {
  129. // items[key].map(item => {
  130. // const id = itemClicked
  131. // alert(id)
  132. // if (item.id === itemClicked.id) {
  133. // // alert(item.id)
  134. // // if (typeof items[key] === 'object'){
  135. // setItems({
  136. // ...items,
  137. // sub: !item.sub, //item.sub === false ? true : false,
  138. // icon: 'person-sharp' // item.icon === 'person-add-outline' ? 'person-sharp' : 'person-add-outline'
  139. // });
  140. // // }
  141. // }
  142. // })
  143. // })
  144. // }, [setItems]);
  145. function renderItem(item) {
  146. console.log('item.activityDescription: ', item.activityDescription)
  147. return (
  148. <View>
  149. <View style={[styles.item, { height: item.height }]}>
  150. <Text> {item.activityDescription}</Text>
  151. {/* <Text> {data.title}</Text> */}
  152. {/* <TouchableOpacity onPress={() => onButtonClick(item)}> */}
  153. <TouchableOpacity onPress={() => alert("Te has subcrito a la actividad!")}>
  154. <Ionicons name={item.icon} />
  155. </TouchableOpacity>
  156. </View>
  157. <ProgressBar progress={(item.totalSubscribed / item.maxSubscribed)} color={item.totalSubscribed != item.maxSubscribed ? '#1AA7EC' : '#00AB41'} style={styles.progress} />
  158. </View>
  159. );
  160. }
  161. return (
  162. <Agenda
  163. items={formattedEvents}
  164. // items={items}
  165. // item={current}
  166. // items={state.array}
  167. // data={data}
  168. renderItem={renderItem}
  169. // renderItem={(eventos, eventos.startDate)}
  170. />
  171. );
  172. // return (
  173. // <Agenda
  174. // items={current}
  175. // renderItem={(item, firstItemInDay) => {
  176. // return (
  177. // <View>
  178. // <Text>{item.activityName}</Text>
  179. // <Text>{item.startDate}</Text>
  180. // </View>
  181. // );
  182. // }}
  183. // />
  184. // );
  185. }
  186. const styles = StyleSheet.create({
  187. container: {
  188. padding: 24
  189. },
  190. item: {
  191. flexDirection: 'row',
  192. justifyContent: 'space-between',
  193. backgroundColor: 'white',
  194. flex: 1,
  195. padding: 15,
  196. marginRight: 10,
  197. marginTop: 32
  198. },
  199. progress: {
  200. height: 5,
  201. width: 355.2 // this is harcoded and need to be calculated based on the previous View width
  202. }
  203. });