Kliko/app/(tabs)/index.tsx

import React, { useEffect, useState } from 'react';
import { StyleSheet, ScrollView, SafeAreaView, View, StatusBar } from 'react-native';
// @ts-ignore
import CalendarPicker from 'react-native-calendar-picker';
import { useIsFocused } from '@react-navigation/core';
import { useSelector } from 'react-redux';
import { LogLevel, OneSignal } from 'react-native-onesignal';
import { useTranslation } from 'react-i18next';

import { ThemedText } from '@/src/components/themed/ThemedText';
import { ThemedView } from '@/src/components/themed/ThemedView';
import { Colors } from '@/src/constants/Colors';
import { useColorScheme } from '@/src/hooks/useColorScheme';
import { useToken } from '@/src/context/AppProvider';
import { Request } from '@/src/services/request';
import List from '@/src/components/List';
import { Message } from '@/src/services/message';
import { ThemedIcon } from '@/src/components/themed/ThemedIcon';

export default function HomeScreen() {
    const colorScheme = useColorScheme() ?? 'light';
    const isFocused = useIsFocused();
    const { t } = useTranslation();
    const session = useSelector( (state: any) => state.data.session );
    const reloadCalendar = useSelector( (state: any) => state.data.reloadCalendar );
    const { token } = useToken();
    const [ name, setName ] = useState( ' ' ); // Default empty space to prevent layout shifting
    const [ dates, setDates ] = useState<any | null>( [] );
    const [ types, setTypes ] = useState<any | null>( [] );
    const [ onesignalLoaded, setOnesignalLoaded ] = useState<any | null>( false );

    const loadOneSignal = () => {
        // Remove this method to stop OneSignal Debugging
        OneSignal.Debug.setLogLevel( LogLevel.Verbose );

        // OneSignal Initialization
        OneSignal.initialize( "6ef15aa7-9dc0-4d8b-b6b1-e2005bcd3dc6" );

        // Request permission
        OneSignal.Notifications.requestPermission( true ).then( () => {
            // Retrieve one signal user token
            OneSignal.User.pushSubscription.getIdAsync().then( (notificationsToken) => {
                if (notificationsToken) {
                    Request.post( 'sessions/update', { token: token, notifications_token: notificationsToken } ).then( (response) => {
                        if (!response.success) {
                            Message.error( 'Notificaties zijn uitgeschakeld door een onbekende error' );
                        }
                    } );
                }
            } )
        } )

        // Disable loading again
        setOnesignalLoaded( true );
    }

    // Load OneSignal
    useEffect( () => {
        loadOneSignal();
    }, [ onesignalLoaded ] );

    // Load session
    useEffect( () => {
        setName( session.name );
    }, [ session, isFocused ] );

    useEffect( () => {
        if (token) {
            loadCalendar();
        }
    }, [ reloadCalendar, isFocused ] );

    const getGreeting = () => {
        const myDate = new Date();
        const hours = myDate.getHours();

        if (hours < 12) {
            return t( "greeting.morning" );
        } else if (hours >= 12 && hours <= 17) {
            return t( "greeting.afternoon" );
        } else if (hours >= 17 && hours <= 24) {
            return t( "greeting.evening" );
        }

        return t( "greeting.hello" );
    }

    // Load calendar data
    const loadCalendar = () => {
        Request.post( 'calendar', { token: token } ).then( (response) => {
            if (response.success) {
                // Set dates
                let calendarDates: any[] = [];
                response.dates.forEach( (date: any) => {
                    calendarDates.push( {
                        date: new Date( date.date ),
                        style: { backgroundColor: date.color },
                        textStyle: { color: Colors.white },
                        allowDisabled: true,
                    } )
                } )
                setDates( calendarDates );

                // Set types
                setTypes( response.types );
            }
        } )
    }

    return (
        <SafeAreaView style={{ flex: 1, backgroundColor: Colors[ colorScheme ].background, }}>
            <ThemedView style={styles.container}>
                <ScrollView>
                    <ThemedView style={styles.titleContainer}>
                        <ThemedText type="title">{getGreeting()},</ThemedText>
                    </ThemedView>

                    <ThemedView style={styles.titleContainer}>
                        <ThemedText type="title" style={{ color: Colors[ colorScheme ].tint }}>{name}</ThemedText>
                    </ThemedView>

                    <ThemedView style={styles.calendarContainer}>
                        <CalendarPicker
                            showDayStragglers={true}
                            enableDateChange={false}
                            customDatesStyles={dates}
                            todayTextStyle={styles.today}
                            textStyle={{ color: Colors[ colorScheme ].text }}
                            startFromMonday={true}
                            previousComponent={
                                <ThemedIcon size={28} name="chevron-back"/>
                            }
                            nextComponent={
                                <ThemedIcon size={28} name="chevron-forward"/>
                            }
                            weekdays={[
                                t( "days.mon" ),
                                t( "days.tue" ),
                                t( "days.wed" ),
                                t( "days.thu" ),
                                t( "days.fri" ),
                                t( "days.sat" ),
                                t( "days.sun" ),
                            ]}
                            months={[
                                t( "months.january" ),
                                t( "months.february" ),
                                t( "months.march" ),
                                t( "months.april" ),
                                t( "months.may" ),
                                t( "months.june" ),
                                t( "months.july" ),
                                t( "months.august" ),
                                t( "months.september" ),
                                t( "months.october" ),
                                t( "months.november" ),
                                t( "months.december" ),
                            ]}
                        />
                    </ThemedView>

                    <ThemedView style={styles.legendaContainer}>
                        <ThemedText type='subtitle'>{t( "legenda" )}:</ThemedText>
                        <List
                            data={types}
                            viewStyle={styles.legendaList}
                            renderItem={(type: any, index: any) => (
                                <View style={styles.legendaItem} key={index}>
                                    <View style={{ ...styles.circle, backgroundColor: type.color }}/>
                                    <ThemedText type="default">{type.name}</ThemedText>
                                </View>
                            )}
                        />
                    </ThemedView>
                </ScrollView>
            </ThemedView>
        </SafeAreaView>
    );
}

const styles = StyleSheet.create( {
    container: {
        padding: 25,
        marginTop: StatusBar.currentHeight,
    },
    titleContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        gap: 8,
        paddingBottom: 8,
    },
    calendarContainer: {
        marginTop: 15,
    },
    legendaContainer: {
        marginTop: 40,
    },
    legendaList: {
        marginTop: 15,
        flex: 1,
        flexDirection: 'column',
        alignContent: 'center',
        gap: 15,
    },
    legendaItem: {
        flex: 1,
        flexDirection: 'row',
        alignItems: 'center',
        gap: 8,
        flexGrow: 1,
    },
    circle: {
        width: 25,
        height: 25,
        borderRadius: 50,
    },
    today: {
        borderWidth: 3,
        borderColor: Colors.dark.grey,
        borderRadius: 25,
        textAlign: 'center',
        paddingTop: 8,
        width: 40,
        height: 40,
    },
} );