@olea-bps/components 1.0.0

package/CourseInfo/index.js

@@ -0,0 +1,219 @@
+/**
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useState, useMemo, useEffect } from 'react';
+import {
+    StyleSheet,
+    Text,
+    TouchableOpacity,
+    View,
+} from 'react-native';
+
+import { useTheme } from 'react-native-paper';
+import { useTranslation } from 'react-i18next';
+import { useNavigation } from '@react-navigation/native';
+
+import moment from 'moment';
+import { DateTime } from 'luxon';
+
+import IconsOpenasist from '@olea-bps/icons-openasist';
+import { useDateCourses } from '@olea-bps/context-timetable';
+
+import componentStyles from './styles';
+
+/**
+ * Course Info Component
+ *
+ * Shows the informations of the next course, if the student has imported a timetable.
+ * If where is no timetable available, a notice will be displayed.
+ *
+ * Parameters:
+ *  - none
+ *
+ * Navigation-Parameters:
+ *  - none
+ */
+export default function CourseInfoComponent(props) {
+    const componentName = CourseInfoComponent.name;
+    const theme = useTheme();
+    const { colors } = theme;
+    const { t } = useTranslation();
+    const navigation = useNavigation();
+
+    const [now, setNow] = useState(moment());
+
+    const todayDate = DateTime.now().toISODate();
+    const academicQuarter = moment.duration(30, 'minutes');
+
+    // Vorlesungen von Stundenplan-Kontext abrufen, die heute stattfinden.
+    const [courses] = useDateCourses(todayDate);
+
+    console.debug(componentName, ': Count of courses: ', courses?.length ?? 0);
+
+    // Genieren der Styles, wenn nicht vorhanden oder das Theme sich geändert hat
+    const styles = useMemo(
+        () => StyleSheet.create(componentStyles(theme)),
+        [theme]
+    );
+
+    const isoWeekDaysLabels = useMemo(
+        () => new Map(
+            ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']
+                .map(
+                    (dayTranslationLabel, index) =>
+                        [
+                            index + 1,
+                            {
+                                short: t(`common:day${dayTranslationLabel}Short`),
+                                long: t(`common:day${dayTranslationLabel}`),
+                            }
+                        ]
+                )
+        ),
+        [t]
+    );
+
+    // Suchen der nächsten Vorlesung
+    const nextCourse = courses
+        // Berechnen der heutigen Startzeitpunkt der Vorlesung als Datetime und speichern als startMoment-Property.
+        // Berechnen der heutigen mit academischen Viertel der Vorlesung als Datetime und speichern als academicQuarterMoment-Property.
+        ?.map?.(course => {
+            // Holen der Uhrzeit der Vorlesung
+            const courseTime = course.times[0];
+            // Erstellen der datetime aus dem heutigen Datum und der Enduhrzeit
+            const courseStartMoment = moment(courseTime.start, 'HH:mm');
+
+            return {
+                ...course,
+                startMoment: courseStartMoment,
+                academicQuarterMoment: courseStartMoment.add(academicQuarter),
+                // Ursprüngliche Vorlesung als eigene Instanz einbetten
+                // Diese Instanze sollte als Abhängigkeit für Hooks verwendet werden, hier bei jedem Rendern eine neue Instaze entsteht
+                origineCourse: course,
+            }
+        })
+        // Sortieren der Vorlesung nach ihren Start-Datetimes. unix()-Methode gibt einen Integer-Zeitstempel zurück.
+        ?.sort?.((courseA, courseB) => courseA.startMoment.unix() - courseB.startMoment.unix())
+        // Suche die erste Vorlesung, anhand der Startzeit mit academischen Viertel nach Jetzt ist.
+        ?.find?.(course => course.academicQuarterMoment.isAfter(now));
+
+    const nextOrigineCourse = nextCourse?.origineCourse
+
+    console.debug(componentName, ': next course:', nextCourse);
+
+    // now neu setzen, wenn die nächste Vorlesung anfängt oder der Tag zu Ende ist
+    useEffect(
+        () => {
+            // Millisekunden bis zum anzeigen der nächste Vorlesung bzw. des Tagesende ausrechnen und den mathematischen Betrag nehmen
+            const timeoutToCalculateNextCourse = Math.abs(
+                moment().diff(
+                    // Prüfen ob es heute noch eine Vorlesung geben wird
+                    nextCourse
+                        // Es wird der Anfang mit academischen Viertel der nächsten/aktuellen Vorlesung genommen
+                        ? nextCourse.academicQuarterMoment
+                        // Es wird das Ende des heutigen Tages genommen
+                        : moment().endOf('day')
+                )
+            );
+
+            console.debug(componentName, ': recalculating next course in ', timeoutToCalculateNextCourse, ' miliseconds');
+
+            // Timer setzen und Handel zum Löschen des Timeouts zwischenspeichern
+            const timeoutHandle = setTimeout(() => setNow(moment()), timeoutToCalculateNextCourse);
+            return () => {
+                // Timer löschen, falls die nächste Vorlesung wechselt
+                clearTimeout(timeoutHandle);
+            }
+        },
+        [nextOrigineCourse]
+    );
+
+    const errorMessage = !nextOrigineCourse && courses?.length ? t('course:noLecturesAvailable') : t('course:noLectureFound');
+
+    return useMemo(
+        () => {
+            const courseTitle = nextOrigineCourse?.title?.data;
+            const courseTime = nextOrigineCourse?.times?.[0];
+            const courseIsoDayOfWeek = courseTime?.dayOfWeek;
+            const courseWeekDaysLabels = isoWeekDaysLabels.get(courseIsoDayOfWeek);
+
+            const courseTimeStart = courseTime?.start;
+            const courseTimeStartAccessibility = courseTimeStart
+                ? courseTimeStart.slice(0, 2) + ' ' + t('accessibility:pts:speechTime') + ' ' + (courseTimeStart.slice(3, 5) !== '00' ? courseTimeStart.slice(3, 5) : '') + ','
+                : null;
+
+            const courseTimeEnd = courseTime?.end;
+            const coursetimeEndAccessibility = courseTimeEnd
+                ? courseTimeEnd.slice(0, 2) + ' ' + t('accessibility:pts:speechTime') + ' ' + (courseTimeEnd.slice(3, 5) !== '00' ? courseTimeEnd.slice(3, 5) : '') + ','
+                : null;
+
+            const courseDayOfWeek = courseWeekDaysLabels?.short;
+            const courseDayOfWeekAccessibility = courseWeekDaysLabels?.long;
+
+            const courseTimeText = courseDayOfWeek && courseTimeStart && courseTimeEnd
+                ? `${courseDayOfWeek} ${courseTimeStart} - ${courseTimeEnd}`
+                : t('common:noDetails');
+
+            const courseTimeAccessibility = courseDayOfWeekAccessibility && courseTimeStartAccessibility && coursetimeEndAccessibility
+                ? `${courseDayOfWeekAccessibility} ${t('accessibility:timetable:at')} ${courseTimeStartAccessibility} ${t('accessibility:timetable:to')} ${coursetimeEndAccessibility}`
+                : null;
+
+            const courseRoom = Array.isArray(nextOrigineCourse?.room)
+                ? nextOrigineCourse?.room?.[0]?.data
+                : nextOrigineCourse?.room?.data;
+
+            const courseRoomText = courseRoom?.replace(/\([\w\W]+/, '') ?? t('common:noDetails');
+
+            return (
+                <TouchableOpacity
+                    onPress={
+                        () => navigation.navigate(
+                            'timetableModule',
+                            nextOrigineCourse
+                                ? { course: nextOrigineCourse }
+                                : { showCodeInput: true }
+                        )
+                    }
+                    accessible={true}
+                    accessibilityLabel={t('course:nextLecture')}
+                    accessibilityHint={
+                        nextOrigineCourse
+                            ? [courseTitle, courseTimeAccessibility, courseRoom].join(' ')
+                            : errorMessage
+                    }
+                >
+                    <View style={styles.container}>
+                        <Text style={styles.headline}>{t('course:nextLecture')}</Text>
+                    </View>
+                    <View style={styles.innerContainer}>
+                        <View style={styles.iconContainer}>
+                            <IconsOpenasist icon={"timetable"} color={colors.black} size={40} />
+                        </View>
+                        {
+                            nextOrigineCourse
+                                ? <View style={styles.contentContainer}>
+                                    <Text style={styles.title}>{courseTitle}</Text>
+                                    <Text style={styles.title}>{courseTimeText}{courseTimeText && courseRoomText ? ' | ' : ''}{courseRoomText}</Text>
+                                </View>
+                                : <View style={styles.contentContainer}>
+                                    <Text style={styles.title}>{errorMessage}</Text>
+                                </View>
+                        }
+                    </View>
+                </TouchableOpacity>
+            )
+        },
+        [nextOrigineCourse, errorMessage, navigation, styles, t, colors]
+    );
+}

package/CourseInfo/styles.js

@@ -0,0 +1,40 @@
+export default function(theme) {
+    return {
+        container: {
+            flex: 1,
+            flexDirection: 'row',
+            alignItems: 'center',
+            paddingHorizontal: theme.paddings.default,
+            paddingVertical: theme.paddings.small,
+            paddingBottom: 0
+        },
+        innerContainer: {
+            flex: 1,
+            flexDirection: 'row',
+            paddingVertical: theme.paddings.small,
+            paddingHorizontal: theme.paddings.default,
+
+        },
+        iconContainer: {
+            paddingTop: theme.paddings.xsmall / 2,
+            paddingBottom: theme.paddings.xsmall / 2,
+            paddingRight: theme.paddings.small,
+        },
+        contentContainer: {
+            flex: 1,
+            padding: theme.paddings.xsmall
+        },
+        headline: {
+            ...theme.fonts.regular,
+            fontSize: theme.fontSizes.m,
+            textTransform: 'uppercase'
+        },
+        title: {
+            ...theme.fonts.regular,
+            fontSize: theme.fontSizes.m,
+        },
+        modalContainer: {
+            flex: 1
+        }
+    }
+};

package/DevelopmentDialog/index.js

@@ -0,0 +1,208 @@
+/**
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useMemo, useCallback, FC } from 'react';
+import {
+    StyleSheet,
+    Text,
+    View
+} from 'react-native';
+
+import { useDispatch } from 'react-redux';
+import { useTheme, Portal, Dialog, Checkbox, Button } from 'react-native-paper';
+import { useTranslation } from 'react-i18next';
+
+import { onSettingDevelopOverride, useActiveStagingMenuItems, useShowDeeplinkAlert, useStagingServer, useSubscriberId } from '@olea-bps/core';
+
+import componentStyles from './styles'
+
+/**
+ * Ein Dialog, welches Optionen für Entwickler anzeigt.
+ * Der Dialog verwendet sein eigenes {@link Portal}, sodass nur die Einbindung dieser Komponente für die richtige Funktionweise nötig ist.
+ *
+ * Über diesen Dialog, kann auf den Staging-Server umgeschaltet werden.
+ *
+ * @param {object} props
+ * @param {boolean} props.visible Wird der Dialog angezeigt?
+ * @param {() => void} [props.onDismiss] Callback-Funktion welche ausgeführt wird, wenn der Dialog geschlossen werden soll.
+ * @returns {FC}
+ */
+export default function DevelopmentDialog({ visible, onDismiss }) {
+    const { t } = useTranslation();
+    const theme = useTheme();
+    const { colors, appSettings } = theme;
+    const mainMenuSettings = appSettings?.mainMenu;
+    const menuItems = mainMenuSettings?.items ?? {};
+    const menuRoutes = mainMenuSettings?.routes ?? [];
+    const isStagingServerActive = useStagingServer();
+    const subscriberId = useSubscriberId();
+    const showDeeplinkAlert = useShowDeeplinkAlert();
+    const activeStagingMenuItems = useActiveStagingMenuItems();
+    const dispatch = useDispatch();
+
+    const styles = useMemo(
+        () => StyleSheet.create(componentStyles(theme)),
+        [theme, componentStyles]
+    )
+
+    // Erzeugen einer Funktion, die die Entwicklereinstellugen setzt.
+    // Dabei werden immer die derzeitigen Werte gesetzt, außer es werden neue Werte zum überschreiben übergeben.
+    // Diese Funktion sollte langfristig entfallen.
+    const setDevelopmentSettings = useCallback(
+        (settings) => dispatch(
+            onSettingDevelopOverride(
+                'settingsDevelop',
+                {
+                    useStaging: isStagingServerActive,
+                    showDeeplinkAlert: showDeeplinkAlert,
+                    activeStagingMenuItems: activeStagingMenuItems,
+                    ...settings,
+                }
+            )
+        ),
+        [isStagingServerActive, showDeeplinkAlert, activeStagingMenuItems, onSettingDevelopOverride]
+    )
+
+    const output = [];
+
+    output.push(
+        <View key={'item_use_stg'} style={styles.selectOption}>
+            <Text>{t('settings:develop.useStagingServer')}</Text>
+            <Checkbox.Android status={isStagingServerActive ? 'checked' : 'unchecked'}
+                onPress={() => setDevelopmentSettings({ useStaging: !isStagingServerActive })}
+                color={colors.checkboxChecked}
+                uncheckedColor={colors.checkboxUnchecked}
+            />
+        </View>
+    );
+
+    output.push(
+        <View key={'item_notification_subscriber'} style={[{ marginBottom: 30 }]}>
+            <Text>{t('settings:develop.notificationSubscriberId')}</Text>
+            <Text>{subscriberId}</Text>
+        </View>
+    );
+    output.push(
+        <View key={'item_notification_push_message'} style={[{ marginBottom: 30 }]}>
+            <Text>{t('settings:develop.resetPushMessage')}</Text>
+            <Button
+                buttonColor={colors.primary}
+                textColor={colors.buttonText}
+                onPress={() => dispatch({ type: 'UPDATE_PUSH_MESSAGE_SHOWN', pushMessageShown: false })}
+            >
+                Reset
+            </Button>
+        </View>
+    );
+    output.push(
+        <View key={'item_deeplink_show_url'} style={[{ marginBottom: 30 }, styles.selectOption]}>
+            <Text>{t('settings:develop.showDeepLink')}</Text>
+            <Checkbox
+                status={showDeeplinkAlert ? 'checked' : 'unchecked'}
+                onPress={() => setDevelopmentSettings({ showDeeplinkAlert: !showDeeplinkAlert })}
+                color={colors.checkboxChecked}
+                uncheckedColor={colors.checkboxUnchecked}
+            ></Checkbox>
+        </View>
+    );
+
+    // Für jeden Menü-Tab einen Bereich erstellen und im Bereich für jeden Menüpunkt eine Checkbox anbieten.
+    // Menüpunkte-Objekt in ein Array umwandeln
+    const activatableMenuItemsSettings = Object.entries(menuItems)
+        // Aus der Liste der Menüpunkten, werden die Menüpunkte herausgefiltert, die immer aktiv/eingeschaltet sind.
+        .map(
+            ([menuItemKey, menuItemEntries]) => {
+                const stagingMenuItemEntries = menuItemEntries.filter(
+                    menuItemEntry =>
+                        // Wenn active-Property nicht vorhanden, ist der Menüpunkt activ, dann Negierung, weil nicht aktive Menueinträge gefiltert werden
+                        !(menuItemEntry?.active ?? true)
+                );
+                return [menuItemKey, stagingMenuItemEntries];
+            }
+        )
+        // Es werden Menü-Tabs herausgefiltert, die keine Menüpunkte, die nur im Stagingmodus zu sehen sind.
+        .filter(
+            ([menuItemKey, stagingMenuItemEntries]) => (stagingMenuItemEntries?.length ?? 0) > 0
+        )
+        // Rendern der Menü-Tabs und deren Menüeinträge
+        .map(
+            ([menuItemKey, stagingMenuItemEntries]) => {
+                const mainMenuRouteTitleKey = menuRoutes
+                    ?.find(menuRoute => menuRoute?.key === menuItemKey)
+                    ?.title;
+
+                return (
+                    < View key={`item_menuitems_${menuItemKey}`} >
+                        <Text>{t(mainMenuRouteTitleKey)}-Tab</Text>
+                        {
+                            // Rendern der Menüpunkte eines Menü-Tabs
+                            stagingMenuItemEntries.map(
+                                stagingMenuItemEntry => {
+                                    const stagingMenuItemEntryKey = `${stagingMenuItemEntry?.title}`;
+
+                                    // Der Menüpunkt ist aktiv, wenn sein Schlüssel in der Liste der activen Menüpunkte zu finden ist
+                                    const isActive = activeStagingMenuItems.includes(stagingMenuItemEntryKey);
+
+                                    return (
+                                        <Checkbox.Item
+                                            key={stagingMenuItemEntryKey}
+                                            label={t(stagingMenuItemEntry?.title)}
+                                            status={isActive ? 'checked' : 'unchecked'}
+                                            color={colors.checkboxChecked}
+                                            uncheckedColor={colors.checkboxUnchecked}
+                                            theme={theme}
+                                            style={styles.selectOption}
+                                            onPress={() => setDevelopmentSettings(
+                                                {
+                                                    activeStagingMenuItems: isActive
+                                                        // Wenn der Menüpunkt schon aktiv ist, wird er aus der Liste der aktiven Punkte entfernt.
+                                                        ? activeStagingMenuItems.filter(activeStagingMenuItem => activeStagingMenuItem !== stagingMenuItemEntryKey)
+                                                        // Wenn der Menüpunkt nicht aktiv ist, wird er zur Liste der aktiven Punkte hinzugefügt.
+                                                        : [...activeStagingMenuItems, stagingMenuItemEntryKey]
+                                                }
+                                            )}
+                                        />
+                                    )
+                                }
+                            )
+                        }
+                    </View>
+                )
+            }
+        );
+
+    return (
+        <Portal>
+            <Dialog visible={visible} onDismiss={onDismiss}>
+                <Dialog.Title>{t('settings:develop.dialog')}</Dialog.Title>
+                <Dialog.Content>
+                    {
+                        [
+                            ...output,
+                            ...activatableMenuItemsSettings,
+                        ]
+                    }
+                </Dialog.Content>
+                <Dialog.Actions>
+                    <Button
+                        onPress={onDismiss}
+                        textColor={colors.buttonText}
+                    >
+                        {t('common:okLabel')}
+                    </Button>
+                </Dialog.Actions>
+            </Dialog>
+        </Portal>
+    );
+}

package/DevelopmentDialog/styles.js

@@ -0,0 +1,10 @@
+export default function (theme) {
+    return {
+        selectOption: {
+            display: 'flex',
+            flexDirection: 'row',
+            justifyContent: 'space-between'
+        },
+    }
+};
+

package/EventCodeInput/index.js

@@ -0,0 +1,146 @@
+/**
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useMemo, useState } from 'react';
+import {
+    ActivityIndicator,
+    KeyboardAvoidingView,
+    ScrollView,
+    StyleSheet,
+    TouchableOpacity,
+    View,
+    Linking,
+    Text
+} from 'react-native';
+
+import { useTranslation } from 'react-i18next';
+import {
+    Headline,
+    Paragraph,
+    TextInput,
+    useTheme,
+} from 'react-native-paper';
+
+import { usePersonalEvents, usePersonalEventsCode } from '@olea-bps/context-event';
+
+import componentStyles from './styles';
+
+
+/**
+ * View Name
+ *
+ * Shows the View
+ *
+ * Parameters:
+ *  - none
+ *
+ * Navigation-Parameters:
+ *  - none
+ */
+export default function EventCodeInputComponent({ onClose, onPersonalEventsImported }) {
+    const theme = useTheme();
+    const { colors } = theme;
+    const { t } = useTranslation();
+
+    const [, refreshPersonalEvents] = usePersonalEvents();
+    const [personalEventsCode, setPersonalEventsCode] = usePersonalEventsCode();
+    const [personalEventsImportedImporting, setPersonalEventsImportedImporting] = useState(false);
+    const [personalEventsCodeInput, setPersonalEventsCodeInput] = useState(personalEventsCode ? personalEventsCode : '');
+
+    const styles = useMemo(
+        () => StyleSheet.create(componentStyles(theme)),
+        [theme]
+    )
+
+    const handleImportButtonPressed = () => {
+        setPersonalEventsImportedImporting(true);
+
+        if (personalEventsCodeInput.length < 8) {
+            alert(t('eventCode:codeShortError'));
+            setPersonalEventsImportedImporting(false);
+        } else if (personalEventsCodeInput.length > 8) {
+            alert(t('eventCode:codeLongError'));
+            setPersonalEventsImportedImporting(false);
+        } else {
+            setPersonalEventsCode(personalEventsCodeInput);
+            refreshPersonalEvents()
+                .then(() => setPersonalEventsImportedImporting(false))
+                .then(() => onPersonalEventsImported?.());
+        }
+    }
+
+    return (
+        <ScrollView style={styles.container}>
+            <KeyboardAvoidingView behavior={"padding"} >
+                <View style={styles.paragraph}>
+                    <Text style={styles.paragraphText} selectable={true} dataDetectorType={'link'}>
+                        {
+                            personalEventsCodeInput
+                                ? t('eventCode:inputEventCode')
+                                : <Text style={styles.paragraphText} selectable={true} dataDetectorType={'link'}>
+                                    {t('eventCode:notImportedYet')}
+                                    <Text style={styles.linkText} selctable={true} dataDetectorType={'link'} onPress={() => Linking.openURL('https://www.tu-chemnitz.de/tu/veranstaltungen/tuctag/alle-angebote.html')}>
+                                        {t('eventCode:tucDayLinkText')}
+                                    </Text>
+                                </Text>
+                        }
+                    </Text>
+                </View>
+                <View style={styles.importTextInput}>
+                    <TextInput
+                        theme={{ colors: { primary: colors.textInput, placeholder: colors.textLighter } }}
+                        style={styles.paragraphText}
+                        maxLength={8}
+                        selectionColor={colors.textInputSelection}
+                        label={t('eventCode:inputPlaceholder')}
+                        value={personalEventsCodeInput}
+                        onChangeText={text => setPersonalEventsCodeInput(text.trim())}
+                    />
+                </View>
+
+                <View style={styles.container}>
+                    <TouchableOpacity
+                        style={styles.importButton}
+                        labelStyle={styles.importButtonLabel}
+                        label={t('eventCode:importButton')}
+                        onPress={handleImportButtonPressed}
+                    >
+                        <Headline style={styles.importButtonLabel} color={colors.buttonText}>
+                            {t('eventCode:importButton')}
+                        </Headline>
+                    </TouchableOpacity>
+                    <TouchableOpacity
+                        style={styles.continueWithoutCodeButton}
+                        labelStyle={styles.importButtonLabel}
+                        label={t('eventCode:importButton')}
+                        onPress={() => onClose?.()}>
+                        <Headline style={styles.continueWithoutCodeButtonLabel} color={colors.buttonText}>{t('eventCode:continueWithoutCodeButton')}</Headline>
+                    </TouchableOpacity>
+                </View>
+
+
+                {
+                    personalEventsImportedImporting
+                        ? <ActivityIndicator style={styles.activity} size="large" color={colors.loadingIndicator} />
+                        : null
+                }
+                {
+                    personalEventsImportedImporting
+                        ? <View style={styles.paragraph}><Paragraph>{t('timetable:importInProgress', '')}</Paragraph></View>
+                        : null
+                }
+            </KeyboardAvoidingView>
+        </ScrollView>
+    );
+}