@olea-bps/base 1.1.9 → 1.1.11

package/components/TimetableDay/index.js

@@ -12,26 +12,25 @@
  * limitations under the License.
  */
 
-import React, { useState, useMemo, useCallback, useEffect } from 'react';
-import { View, Text, TouchableOpacity, StyleSheet, useWindowDimensions } from 'react-native';
-import { connect } from 'react-redux';
-import { withTheme } from 'react-native-paper';
-import { withTranslation } from 'react-i18next';
-import { onUpdateRefreshing } from '../../libraries/core';
-import componentStyles from "./styles";
-import { Calendar } from 'react-native-big-calendar';
-import { useCourses } from '../../context/context-timetable';
-import CalendarStrip from 'react-native-calendar-strip';
-import CourseDetailDialog from '../CourseDetailDialog';
-import { DateTime, Duration } from 'luxon';
-import { TabView } from 'react-native-tab-view';
-import moment from 'moment';
-import 'moment/locale/de';
+import React, { useMemo, useCallback } from 'react'
+import { View, Text, TouchableOpacity, StyleSheet, useWindowDimensions } from 'react-native'
+import { connect } from 'react-redux'
+import { withTheme } from 'react-native-paper'
+import { withTranslation } from 'react-i18next'
+import { onUpdateRefreshing } from '../../libraries/core'
+import componentStyles from './styles'
+import { Calendar } from 'react-native-big-calendar'
+import { useCourses } from '../../context/context-timetable'
+import CalendarStrip from 'react-native-calendar-strip'
+import { DateTime, Duration } from 'luxon'
+import { TabView } from 'react-native-tab-view'
+import moment from 'moment'
+import 'moment/locale/de'
 
 /**
  * Die Zeitspanne, welche vor und nach heute angezeigt werden soll.
  */
-const daysTabDuration = Duration.fromISO('P6M');
+const daysTabDuration = Duration.fromISO('P6M')
 
 /**
  *
@@ -39,214 +38,214 @@ const daysTabDuration = Duration.fromISO('P6M');
  * @param {(DateTime) => void} props.onDateChanged Callback, welche aufgerufen wird, wenn der Tag in der Ansicht wechselt
  * @returns
  */
-function CalendarDay({ selectedDate, theme, settings, calendarScrollOffsetMinutes, calendarHeight, onDateChanged, onCourseSelected }) {
-    const { appSettings: { modules: { timetable: { showDetails } } } } = theme;
-    const today = DateTime.now().toISODate();
-
-    const { width } = useWindowDimensions();
-
-    const [courses] = useCourses();
-
-    const language = settings?.settingsGeneral?.language;
-
-    const styles = useMemo(
-        () => StyleSheet.create(componentStyles(theme)),
-        [theme]
-    );
-
-    const calendarStripMinDate = useMemo(
-        () => DateTime.fromISO(today).minus(daysTabDuration).toJSDate(),
-        [today, daysTabDuration]
-    );
-
-    const calendarStripMaxDate = useMemo(
-        () => DateTime.fromISO(today).plus(daysTabDuration).toJSDate(),
-        [today, daysTabDuration]
-    );
-
-    const daysTabViewRoutes = useMemo(
-        () => {
-            const dateRoutes = [];
-            const todayDateTime = DateTime.fromISO(today);
-            const beginDateTime = todayDateTime.minus(daysTabDuration);
-            const endDateTime = todayDateTime.plus(daysTabDuration);
-            let currentDateTime = DateTime.fromObject(beginDateTime.toObject());
-
-            const eventColor = theme.colors.eventContainerSidebar;
-
-            while (currentDateTime <= endDateTime) {
-                const currentISODate = currentDateTime.toISODate();
-                const currentDateTimeCourses = courses?.[currentISODate]
-                    ?.map(
-                        course => (
-                            {
-                                title: course.title.data,
-                                start: new Date(Date.parse(course.startDateTime)),
-                                end: new Date(Date.parse(course.endDateTime)),
-                                color: eventColor,
-                                type: course.type?.data,
-                                professor: course.lecturer[0]?.data,
-                                room: course.room.data,
-                                // Anfügen des Ürsprügnlichen Vorlesungsobjektes, damit es beim Klick zur Verfügung steht
-                                origine: course,
-                            }
-                        )
-                    ) ?? [];
-
-                dateRoutes.push(
-                    {
-                        key: currentISODate,
-                        date: currentDateTime,
-                        events: currentDateTimeCourses,
-                    }
-                );
-
-                currentDateTime = currentDateTime.plus({ day: 1 });
+function CalendarDay ({ selectedDate, theme, settings, calendarScrollOffsetMinutes, calendarHeight, onDateChanged, onCourseSelected }) {
+  const { appSettings: { modules: { timetable: { showDetails } } } } = theme
+  const today = DateTime.now().toISODate()
+
+  const { width } = useWindowDimensions()
+
+  const [courses] = useCourses()
+
+  const language = settings?.settingsGeneral?.language
+
+  const styles = useMemo(
+    () => StyleSheet.create(componentStyles(theme)),
+    [theme]
+  )
+
+  const calendarStripMinDate = useMemo(
+    () => DateTime.fromISO(today).minus(daysTabDuration).toJSDate(),
+    [today, daysTabDuration]
+  )
+
+  const calendarStripMaxDate = useMemo(
+    () => DateTime.fromISO(today).plus(daysTabDuration).toJSDate(),
+    [today, daysTabDuration]
+  )
+
+  const daysTabViewRoutes = useMemo(
+    () => {
+      const dateRoutes = []
+      const todayDateTime = DateTime.fromISO(today)
+      const beginDateTime = todayDateTime.minus(daysTabDuration)
+      const endDateTime = todayDateTime.plus(daysTabDuration)
+      let currentDateTime = DateTime.fromObject(beginDateTime.toObject())
+
+      const eventColor = theme.colors.eventContainerSidebar
+
+      while (currentDateTime <= endDateTime) {
+        const currentISODate = currentDateTime.toISODate()
+        const currentDateTimeCourses = courses?.[currentISODate]
+          ?.map(
+            course => (
+              {
+                title: course.title.data,
+                start: new Date(Date.parse(course.startDateTime)),
+                end: new Date(Date.parse(course.endDateTime)),
+                color: eventColor,
+                type: course.type?.data,
+                professor: course.lecturer[0]?.data,
+                room: course.room.data,
+                // Anfügen des Ürsprügnlichen Vorlesungsobjektes, damit es beim Klick zur Verfügung steht
+                origine: course
+              }
+            )
+          ) ?? []
+
+        dateRoutes.push(
+          {
+            key: currentISODate,
+            date: currentDateTime,
+            events: currentDateTimeCourses
+          }
+        )
+
+        currentDateTime = currentDateTime.plus({ day: 1 })
+      }
+
+      return dateRoutes
+    },
+    [today, courses, language]
+  )
+
+  const daysTabViewIndexes = useMemo(
+    () => daysTabViewRoutes
+      .reduce(
+        (accumulator, currentRoute, currentIndex) =>
+          (
+            {
+              ...accumulator,
+              [currentRoute.key]: currentIndex
             }
-
-            return dateRoutes;
-        },
-        [today, courses, language]
-    );
-
-    const daysTabViewIndexes = useMemo(
-        () => daysTabViewRoutes
-            .reduce(
-                (accumulator, currentRoute, currentIndex) =>
-                (
-                    {
-                        ...accumulator,
-                        [currentRoute.key]: currentIndex
-                    }
-                ),
-                {}
-            ),
-        [daysTabViewRoutes]
-    )
-
-    const daysTabViewIndex = useMemo(
-        () => {
-            const selectedISODate = selectedDate.toISODate();
-            return daysTabViewIndexes[selectedISODate];
-        },
-        [daysTabViewIndexes, selectedDate]
+          ),
+        {}
+      ),
+    [daysTabViewRoutes]
+  )
+
+  const daysTabViewIndex = useMemo(
+    () => {
+      const selectedISODate = selectedDate.toISODate()
+      return daysTabViewIndexes[selectedISODate]
+    },
+    [daysTabViewIndexes, selectedDate]
+  )
+
+  const renderEvent = useCallback((event, touchableOpacityProps) => {
+    const { key, style, ...restTouchableOpacityProps } = touchableOpacityProps
+    return (
+      <TouchableOpacity key={key} {...restTouchableOpacityProps} style={[style, styles.eventContainer, { borderLeftColor: event.color || '#000' }]}>
+        <View style={styles.eventHeader}>
+          <Text style={styles.eventTitle} numberOfLines={1} ellipsizeMode='tail'>
+            {event.title}
+          </Text>
+          <Text style={styles.eventType} numberOfLines={1} ellipsizeMode='tail'>
+            {event.type}
+          </Text>
+        </View>
+        <Text style={styles.eventProfessor} numberOfLines={1} ellipsizeMode='head'>
+          {event.professor}
+        </Text>
+        <View style={styles.eventFooter}>
+          <Text style={styles.eventTime} numberOfLines={1} ellipsizeMode='tail'>
+            {`${event.start.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })} - ${event.end.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })}`}
+          </Text>
+          <Text style={styles.eventRoom} numberOfLines={1} ellipsizeMode='tail'>
+            {event.room}
+          </Text>
+        </View>
+      </TouchableOpacity>
     )
-
-    const renderEvent = useCallback((event, touchableOpacityProps) => {
-        const { style, ...restTouchableOpacityProps } = touchableOpacityProps;
-        return (
-            <TouchableOpacity {...restTouchableOpacityProps} style={[style, styles.eventContainer, { borderLeftColor: event.color || '#000' }]} >
-                <View style={styles.eventHeader}>
-                    <Text style={styles.eventTitle} numberOfLines={1} ellipsizeMode="tail">
-                        {event.title}
-                    </Text>
-                    <Text style={styles.eventType} numberOfLines={1} ellipsizeMode="tail">
-                        {event.type}
-                    </Text>
-                </View>
-                <Text style={styles.eventProfessor} numberOfLines={1} ellipsizeMode="head">
-                    {event.professor}
-                </Text>
-                <View style={styles.eventFooter}>
-                    <Text style={styles.eventTime} numberOfLines={1} ellipsizeMode="tail">
-                        {`${event.start.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })} - ${event.end.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })}`}
-                    </Text>
-                    <Text style={styles.eventRoom} numberOfLines={1} ellipsizeMode="tail">
-                        {event.room}
-                    </Text>
-                </View>
-            </TouchableOpacity>
-        );
-    }, [styles]);
-
-    const renderScene = useCallback(
-        ({ route }) => {
-            return (
-                <View style={{ flex: 1, width: width }}>
-                    <Calendar
-                        events={route.events}
-                        renderEvent={renderEvent}
-                        renderHeader={() => null}
-                        overlapOffset={95}
-                        mode={'day'}
-                        height={calendarHeight}
-                        headerContentStyle={{ backgroundColor: 'transparent' }}
-                        weekStartsOn={1}
-                        date={route.key}
-                        swipeEnabled={false}
-                        onPressEvent={
+  }, [styles])
+
+  const renderScene = useCallback(
+    ({ route }) => {
+      return (
+        <View style={{ flex: 1, width }}>
+          <Calendar
+            events={route.events}
+            renderEvent={renderEvent}
+            renderHeader={() => null}
+            overlapOffset={95}
+            mode='day'
+            height={calendarHeight}
+            headerContentStyle={{ backgroundColor: 'transparent' }}
+            weekStartsOn={1}
+            date={route.key}
+            swipeEnabled={false}
+            onPressEvent={
                             showDetails
-                                // Wenn eine Vorlesung im Kalender angeklickt wird, wird die ursprüngliche Vorlesung ausgelesen und selektiert
-                                ? (event) => onCourseSelected(event.origine)
-                                : null
+                            // Wenn eine Vorlesung im Kalender angeklickt wird, wird die ursprüngliche Vorlesung ausgelesen und selektiert
+                              ? (event) => onCourseSelected(event.origine)
+                              : null
                         }
-                        scrollOffsetMinutes={calendarScrollOffsetMinutes}
-                        hourStyle={styles.hourStyle}
-                    />
-                </View>
-            );
-        },
-        [styles, calendarScrollOffsetMinutes, courses, width, renderEvent]
-    );
-
-    return (
-        <>
-            <View style={styles.stripShadow}>
-                <CalendarStrip
-                    style={styles.strip}
-                    locale={{
-                        name: language,
-                        config: moment.localeData(language)
-                    }}
-                    selectedDate={selectedDate.toJSDate()}
-                    onDateSelected={
+            scrollOffsetMinutes={calendarScrollOffsetMinutes}
+            hourStyle={styles.hourStyle}
+          />
+        </View>
+      )
+    },
+    [styles, calendarScrollOffsetMinutes, courses, width, renderEvent]
+  )
+
+  return (
+    <>
+      <View style={styles.stripShadow}>
+        <CalendarStrip
+          style={styles.strip}
+          locale={{
+            name: language,
+            config: moment.localeData(language)
+          }}
+          selectedDate={selectedDate.toJSDate()}
+          onDateSelected={
                         (date) =>
-                            onDateChanged?.(
-                                DateTime.fromObject(
-                                    {
-                                        year: date.year(),
-                                        month: date.month() + 1,
-                                        day: date.date(),
-                                    }
-                                )
+                          onDateChanged?.(
+                            DateTime.fromObject(
+                              {
+                                year: date.year(),
+                                month: date.month() + 1,
+                                day: date.date()
+                              }
                             )
+                          )
                     }
-                    highlightDateContainerStyle={styles.highlightDateContainer}
-                    showMonth={false}
-                    iconStyle={{ display: 'none' }}
-                    scrollable={true}
-                    minDate={calendarStripMinDate}
-                    maxDate={calendarStripMaxDate}
-                />
-            </View>
-
-            <TabView
-                navigationState={{ index: daysTabViewIndex, routes: daysTabViewRoutes }}
-                renderTabBar={() => null}
-                lazy
-                lazyPreloadDistance={1}
-                onIndexChange={
+          highlightDateContainerStyle={styles.highlightDateContainer}
+          showMonth={false}
+          iconStyle={{ display: 'none' }}
+          scrollable
+          minDate={calendarStripMinDate}
+          maxDate={calendarStripMaxDate}
+        />
+      </View>
+
+      <TabView
+        navigationState={{ index: daysTabViewIndex, routes: daysTabViewRoutes }}
+        renderTabBar={() => null}
+        lazy
+        lazyPreloadDistance={1}
+        onIndexChange={
                     (index) => {
-                        const currentDateTime = daysTabViewRoutes?.[daysTabViewIndex].date;
-                        const indexDelta = index - daysTabViewIndex;
-                        const deltaDateTime = currentDateTime.plus({ days: indexDelta });
-                        onDateChanged?.(deltaDateTime);
+                      const currentDateTime = daysTabViewRoutes?.[daysTabViewIndex].date
+                      const indexDelta = index - daysTabViewIndex
+                      const deltaDateTime = currentDateTime.plus({ days: indexDelta })
+                      onDateChanged?.(deltaDateTime)
                     }
                 }
-                renderScene={renderScene}
-            />
-        </>
-    )
+        renderScene={renderScene}
+      />
+    </>
+  )
 }
 
 const mapStateToProps = (state) => {
-    return {
-        pluginComponent: state.pluginReducer.timetable.component,
-        pluginStyles: state.pluginReducer.timetable.styles,
-        settings: state.settingReducer,
-        refreshing: state.stateReducer.refreshing,
+  return {
+    pluginComponent: state.pluginReducer.timetable.component,
+    pluginStyles: state.pluginReducer.timetable.styles,
+    settings: state.settingReducer,
+    refreshing: state.stateReducer.refreshing
 
-    };
-};
+  }
+}
 
-export default connect(mapStateToProps, { onUpdateRefreshing })(withTranslation()(withTheme(CalendarDay)));
+export default connect(mapStateToProps, { onUpdateRefreshing })(withTranslation()(withTheme(CalendarDay)))

package/components/TimetableMonth/index.js

@@ -12,50 +12,50 @@
  * limitations under the License.
  */
 
-import React, { useState, useMemo, useEffect, useRef, useCallback } from 'react';
-import { Text, TouchableOpacity, StyleSheet, View } from 'react-native';
-import { connect } from 'react-redux';
-import { withTheme } from 'react-native-paper';
-import { withTranslation } from 'react-i18next';
-import { onUpdateRefreshing } from '../../libraries/core';
-import componentStyles from "./styles";
-import { Calendar } from 'react-native-big-calendar';
-import { useCourses } from '../../context/context-timetable';
-import CourseDetailDialog from '../CourseDetailDialog';
-import CalendarStrip from 'react-native-calendar-strip';
-import { DateTime } from 'luxon';
-
-function CalendarMonth(props) {
-  const { theme, setMonth, today, locale, onMonthChanged, calendarHeight } = props;
+import React, { useState, useMemo, useEffect, useRef, useCallback } from 'react'
+import { Text, TouchableOpacity, StyleSheet, View } from 'react-native'
+import { connect } from 'react-redux'
+import { withTheme } from 'react-native-paper'
+import { withTranslation } from 'react-i18next'
+import { onUpdateRefreshing } from '../../libraries/core'
+import componentStyles from './styles'
+import { Calendar } from 'react-native-big-calendar'
+import { useCourses } from '../../context/context-timetable'
+import CourseDetailDialog from '../CourseDetailDialog'
+import CalendarStrip from 'react-native-calendar-strip'
+import { DateTime } from 'luxon'
+
+function CalendarMonth (props) {
+  const { theme, setMonth, today, locale, calendarHeight } = props
   const styles = useMemo(
     () => StyleSheet.create(componentStyles(theme)),
     [theme]
-  );
+  )
 
-  const [courses, refreshCourses] = useCourses();
-  const selectedDate = useRef(new Date());
-  const [selectedDateState, setSelectedDateState] = useState(selectedDate.current);
-  const [dialogVisible, setDialogVisible] = useState(false);
-  const [selectedEvent, setSelectedEvent] = useState(null);
+  const [courses, refreshCourses] = useCourses()
+  const selectedDate = useRef(new Date())
+  const [, setSelectedDateState] = useState(selectedDate.current)
+  const [dialogVisible, setDialogVisible] = useState(false)
+  const [selectedEvent, setSelectedEvent] = useState(null)
 
-  const selectedDateStartISO = DateTime.fromISO(JSON.stringify(selectedDate.current).slice(1, -1)).startOf('month').toISODate();
-  const selectedDateEndISO = DateTime.fromISO(JSON.stringify(selectedDate.current).slice(1, -1)).endOf('month').toISODate();
+  const selectedDateStartISO = DateTime.fromISO(JSON.stringify(selectedDate.current).slice(1, -1)).startOf('month').toISODate()
+  const selectedDateEndISO = DateTime.fromISO(JSON.stringify(selectedDate.current).slice(1, -1)).endOf('month').toISODate()
 
   useEffect(() => {
-    refreshCourses(selectedDateStartISO, selectedDateEndISO);
-  }, [selectedDateStartISO, selectedDateEndISO]);
+    refreshCourses(selectedDateStartISO, selectedDateEndISO)
+  }, [selectedDateStartISO, selectedDateEndISO])
 
   const handleDateChange = (date) => {
-    selectedDate.current = date;
-    setSelectedDateState(date);
-  };
+    selectedDate.current = date
+    setSelectedDateState(date)
+  }
 
   const monthCourses = useMemo(() => {
-    const startDate = DateTime.fromISO(selectedDateStartISO);
-    const daysInMonth = startDate.daysInMonth;
-    const daysArray = Array.from({ length: daysInMonth }, (_, index) => startDate.plus({ days: index }).toISODate());
-    return daysArray.reduce((acc, date) => acc.concat(courses?.[date] ?? []), []);
-  }, [selectedDateStartISO, courses]);
+    const startDate = DateTime.fromISO(selectedDateStartISO)
+    const daysInMonth = startDate.daysInMonth
+    const daysArray = Array.from({ length: daysInMonth }, (_, index) => startDate.plus({ days: index }).toISODate())
+    return daysArray.reduce((acc, date) => acc.concat(courses?.[date] ?? []), [])
+  }, [selectedDateStartISO, courses])
 
   const monthEvents = useMemo(() => {
     try {
@@ -69,35 +69,32 @@ function CalendarMonth(props) {
             type: course.type?.data,
             professor: course.lecturer[0]?.data,
             room: course.room.data
-          };
-        });
+          }
+        })
     } catch (error) {
-      console.error('Error in useMemo for monthEvents:', error);
-      return [];
+      console.error('Error in useMemo for monthEvents:', error)
+      return []
     }
-  }, [monthCourses]);
+  }, [monthCourses])
 
   useEffect(() => {
-    handleDateChange(today);
-    setMonth(today.getMonth());
-  }, [today, setMonth]);
+    handleDateChange(today)
+    setMonth(today.getMonth())
+  }, [today, setMonth])
 
   const renderEvent = useCallback((event, touchableOpacityProps) => {
-    const { style, ...restTouchableOpacityProps } = touchableOpacityProps;
-
+    const { key, style, ...restTouchableOpacityProps } = touchableOpacityProps
     return (
-      <TouchableOpacity {...restTouchableOpacityProps}
-        style={[style, styles.event]}
-      >
+      <TouchableOpacity key={key} {...restTouchableOpacityProps} style={[style, styles.event]}>
         <Text style={styles.eventTitle} numberOfLines={1}>
           {event.title}
         </Text>
       </TouchableOpacity>
-    );
-  }, [styles]);
+    )
+  }, [styles])
 
   const renderHeader = useCallback(() => (
-    <View pointerEvents="none">
+    <View pointerEvents='none'>
       <CalendarStrip
         style={styles.strip}
         locale={locale}
@@ -112,7 +109,7 @@ function CalendarMonth(props) {
       />
 
     </View>
-  ), [selectedDate]);
+  ), [selectedDate])
 
   return (
     <>
@@ -122,16 +119,16 @@ function CalendarMonth(props) {
         renderHeaderForMonthView={renderHeader}
         date={selectedDate.current}
         height={calendarHeight}
-        mode={'month'}
+        mode='month'
         headerContentStyle={{ backgroundColor: 'transparent' }}
         weekStartsOn={1}
         onSwipeEnd={(date) => {
-          handleDateChange(date);
-          setMonth(new Date(date).getMonth());
+          handleDateChange(date)
+          setMonth(new Date(date).getMonth())
         }}
         onPressEvent={(event) => {
-          setDialogVisible(true);
-          setSelectedEvent(event);
+          setDialogVisible(true)
+          setSelectedEvent(event)
         }}
       />
       {dialogVisible && selectedEvent && (
@@ -144,13 +141,13 @@ function CalendarMonth(props) {
         />
       )}
     </>
-  );
+  )
 }
 
 const mapStateToProps = (state) => {
   return {
-    settings: state.settingReducer,
-  };
-};
+    settings: state.settingReducer
+  }
+}
 
-export default connect(mapStateToProps, { onUpdateRefreshing })(withTranslation()(withTheme(CalendarMonth)));
+export default connect(mapStateToProps, { onUpdateRefreshing })(withTranslation()(withTheme(CalendarMonth)))