Browse Source

allows to extract events from the api

José C.S. Curet 1 year ago
parent
commit
c980154771
1 changed files with 233 additions and 29 deletions
  1. 233
    29
      screens/calendar.js

+ 233
- 29
screens/calendar.js View File

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