Home Reference Source

src/views/journal/components/Header.js

import React from 'react';
import {StyleSheet, Text, View} from 'react-native';
import {Avatar} from 'react-native-paper';

import JournalButton from '../../../components/buttons/JournalButton';

import {
    getTherapistImageFromId,
    getTherapistNameFromId,
} from '../../../database/TherapistsDAO';
import {handleLogout} from '../../../utils/AuthenticationUtils';

import {ButtonLightness} from '../../../utils/DimensionsConstants';
import {JournalColors} from '../../../utils/ColorConstants';
import {JournalContext} from '../../../utils/Contexts';
import {iOSTypography} from '../../../styles/Typography';
import {journalStyles} from '../Styles';

/**
 * Component displaying the header of the journal, with info on the user
 * currently logged in and logout button.
 * @param {Object} props - Properties
 * @param {function} props.setGoToJournal - If true, displays the journal (navigation)
 * @returns {Object} Header of the journal
 */
export default function Header(props) {
    // Retrieve props
    const setGoToJournal = props.setGoToJournal; // Navigation

    // Get connection info from context
    const {isLoggedOut, setIsLoggedOut} = React.useContext(JournalContext);
    const {isValidConnection, setIsValidConnection} =
        React.useContext(JournalContext);
    const {therapistId} = React.useContext(JournalContext);

    const logout = () =>
        handleLogout(setIsLoggedOut, setIsValidConnection, setGoToJournal);

    return (
        <View style={styles.container}>
            <Text style={iOSTypography.title1Dark}>
                Aktivitetsmodul - Journal
            </Text>

            <View style={journalStyles.avatarContainer}>
                <Text style={iOSTypography.title2Dark}>
                    {getTherapistNameFromId(therapistId)}
                </Text>
                <Avatar.Image
                    style={journalStyles.avatar}
                    size={75}
                    source={getTherapistImageFromId(therapistId)}
                />
                <JournalButton
                    lightness={ButtonLightness.LIGHT}
                    label={'Logg ut'}
                    onPress={logout}
                />
            </View>
        </View>
    );
}

/** Local styles */
const styles = StyleSheet.create({
    container: {
        flex: 1,
        maxHeight: 80,
        flexDirection: 'row',
        backgroundColor: JournalColors.BACKGROUND_DARK,
        justifyContent: 'space-between',
        alignItems: 'center',
        paddingLeft: 30,
        paddingRight: 30,
    },
});