allows to extract events from the api

screens/calendar.js

@@ -1,41 +1,245 @@
-import React, { useState } from 'react';
-import { StyleSheet, View, Text, TouchableOpacity, Modal } from 'react-native';
+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';
+
+// react hooks, useState and useEffect
+
+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 [items, setItems] = useState({
-      '2022-12-06': [{name: 'matricula'}],
-      '2022-12-07': [{name: 'seguir metiendole mano al sprint 🥵'}],
-      '2022-12-08': [],
-    });
-  
-    function renderItem(item) {
-      return (
-        <View>
-            <Text style={[styles.item, {height: item.height}]}>{item.name}</Text>
-        </View>
-      );
+
+  // state = {
+  //   array: []
+  // }
+  const [eventos, setEventos] = useState({});
+
+  useEffect(() => {
+    fetch(eventlist)
+      .then(response => response.json())
+      .then(dat => setEventos(dat))
+        // this.setState({ array: response })
+        // state.array = response
+        // console.log(response)
+      // );
+      // console.log(state.array)
+      // state.array = array
+      .catch(error => console.error(error))
+  }, []);
+
+  {/*
+      TODO: Convert array of dictionary into a dictionary of dictionary where the keys are the `startDate
+
+  */}
+
+  var events = {}
+  // console.log('array: ', this.state.array)
+
+  // {this.state.array.map(value => {
+  //   console.log('value: ', value)
+  //   events[value.startDate] = [{  // this have a problem because we can have multiple events in the same date, so it is not a best key
+  //     'id' : value.id,
+  //     'activityDescription' : value.activityDescription,
+  //     'subscribed' : value.subscribed,
+  //     'icon' : value.icon,
+  //     'totalSubscribed' : value.totalSubscribed,
+  //     'maxSubscribed' : value.maxSubscribed
+  //   }]
+  // });}
+
+  // console.log('events: ', events);
+
+
+  // getMoviesFromApi();
+
+  // const [dates, setDates] = useState([
+  //   {
+  //     date: '2022-12-06',
+  //     items: [1, 2, 3]
+  //   },
+  //   {
+  //     date: '2022-12-07',
+  //     items: [1, 2, 3]
+  //   }
+  // ]);
+
+  // const [items, setItems] = useState([
+  //   {id: '1', date: '2022-12-06',  name: 'matricula', sub: false, count: 10, max: 10}
+  // ])
+
+  // TODO 1: make sure more than one activity on the same date appears on screen
+  // TO SOLVE: Two items of the same date, just the last item appear
+  // TODO 2: make can we add images as part of the item? (this is more advanced, which could be implemented in the future)
+
+  const [items, setItems] = useState({
+    '2022-12-21': [{
+      id: '1',
+      activityDescription: 'aaaa',
+      subscribed: false,
+      icon: 'person-add-outline',
+      totalSubscribed: 10,
+      maxSubscribed: 10 }],
+    '2022-12-22':[{
+      id: '2',
+      activityDescription: 'Actividad de cocina para la comunidad de Santa Rita, Río Piedras 🍲',
+      subscribed: false,
+      icon: 'person-add-outline',
+      totalSubscribed: 3, 
+      maxSubscribed: 7 }],
+    '2022-12-23': [{
+      id: '3',
+      activityDescription: 'Taller de aprendizaje de construcción de techos 🏠',
+      subscribed: false,
+      icon: 'person-add-outline',
+      totalSubscribed: 7,
+      maxSubscribed: 7 }],
+    '2022-12-24': [],
+  });
+
+  const [data, setData] = useState({data});
+
+  const [selectedIcon, setSelectedIcon] = useState('person-add-outline');
+
+  const formattedEvents = Object.keys(eventos).reduce((result, key) => {
+    const item = eventos[key];
+    const date = item.startDate;
+    // result[date] = item;
+    if (result[date]){
+      result[date].push(item);
+    }else{
+      result[date] = [item];
     }
+    return result;
+  }, {});
+
+  // const [current, setCurrent] = useState({formattedEvents});
+
+  console.log(formattedEvents)
+  console.log(items)
+
+ const onButtonClick = useCallback((itemClicked) => {
+   // [1]. change selected icon sub status from false to true or vice versa
+   // [2]. change icon from 'person-add-outline' to 'person-sharp' or vice versa
+
+   {
+     Object.keys(items).map(key => {
+       items[key].map(item => {
+         // alert(item.id)
+         if (item.id === itemClicked.id) {
+            // alert(item.icon)
+           // alert(item.sub)
+             return{
+              ...item,
+              subscribed: true, //item.sub === false ? true : false,
+              icon: 'person-sharp' //item.icon === 'person-add-outline' ? 'person-sharp' : 'person-add-outline'
+           }
+
+           // setSelectedIcon(selectedIcon === 'person-add-outline' ? 'person-sharp' : 'person-add-outline')
+         }
+         else{
+           return item
+         }
+        //  {items[key].id}
+       })
+
+     })
+   }
+
+ }, [setItems]);
   
+
+
+//     const onButtonClick = useCallback((itemClicked) => {
+        
+//         Object.keys(items).map(key => {
+//             items[key].map(item => {
+
+//                 const id = itemClicked
+//                 alert(id)
+
+//                 if (item.id === itemClicked.id) {
+// //                    alert(item.id)
+// //                    if (typeof items[key] === 'object'){
+//                         setItems({
+//                             ...items,
+//                         sub: !item.sub, //item.sub === false ? true : false,
+//                         icon: 'person-sharp' // item.icon === 'person-add-outline' ? 'person-sharp' : 'person-add-outline'
+//                         });
+// //                    }
+//                 }
+//             })
+//         })
+//     }, [setItems]);
+
+
+  function renderItem(item) {
+    console.log('item.activityDescription: ', item.activityDescription)
     return (
-      <Agenda
-        items={items}
-        renderItem={renderItem}
-      />
+      <View>
+          <View style={[styles.item, { height: item.height }]}>
+            <Text> {item.activityDescription}</Text>
+            {/* <Text> {data.title}</Text> */}
+            {/* <TouchableOpacity onPress={() => onButtonClick(item)}> */}
+            <TouchableOpacity onPress={() => alert("Te has subcrito a la actividad!")}>
+                <Ionicons name={item.icon} />
+            </TouchableOpacity>
+          </View>
+          <ProgressBar progress={(item.totalSubscribed / item.maxSubscribed)} color={item.totalSubscribed != item.maxSubscribed ? '#1AA7EC' : '#00AB41'} style={styles.progress} />
+      </View>
+
     );
+  }
+
+  return (
+    <Agenda
+      items={formattedEvents}
+      // items={items}
+      // item={current}
+      // items={state.array}
+      // data={data}
+      renderItem={renderItem}
+      // renderItem={(eventos, eventos.startDate)}
+    />
+  );
+
+
+  // return (
+  //   <Agenda
+  //         items={current}
+  //         renderItem={(item, firstItemInDay) => {
+  //           return (
+  //             <View>
+  //               <Text>{item.activityName}</Text>
+  //               <Text>{item.startDate}</Text>
+  //             </View>
+  //           );
+  //         }}
+  //       />
+  // );
+
+
 }
 
+
 const styles = StyleSheet.create({
-    container: {
-        padding: 24
-    },
-    item: {
-      backgroundColor: 'white',
-      flex: 1,
-      padding: 15,
-      marginRight: 10,
-      marginTop: 32
-    }
-});
+  container: {
+    padding: 24
+  },
+  item: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    backgroundColor: 'white',
+    flex: 1,
+    padding: 15,
+    marginRight: 10,
+    marginTop: 32
+  },
+  progress: {
+    height: 5,
+    width: 355.2 // this is harcoded and need to be calculated based on the previous View width
+  }
+});