clean calendar view

screens/calendar.js

@@ -6,183 +6,38 @@ 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 }) {
 
-  // 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];
-    }
+    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 (
       <View>
           <View style={[styles.item, { height: item.height }]}>
-            <Text> {item.activityDescription}</Text>
-            {/* <Text> {data.title}</Text> */}
+            <View>
+              <Text style = {[styles.activity_name]}> {item.activityName}</Text>
+              <Text style = {[styles.time]}> 10:00AM-2:00PM</Text>
+              <Text style = {[styles.activity_description]}> {item.activityDescription}</Text>
+            </View>
             {/* <TouchableOpacity onPress={() => onButtonClick(item)}> */}
             <TouchableOpacity onPress={() => alert("Te has subcrito a la actividad!")}>
                 <Ionicons name={item.icon} />
@@ -197,34 +52,11 @@ export default function Calendario({ navigation }) {
   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
@@ -238,6 +70,16 @@ const styles = StyleSheet.create({
     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