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,
},
});