Home Reference Source

src/views/journal/JournalView.js

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

import AssessmentView from './AssessmentView';
import Header from './components/Header';
import JournalButton from '../../components/buttons/JournalButton';
import SafeAreaWrapper from '../../components/wrappers/SafeAreaWrapper';
import TableCell from './components/TableCell';
import TableTitle from './components/TableTitle';

import {getAssessments, getUser} from '../../database/UsersDAO';
import {getName} from '../../database/ActivityTypesDAO';
import {isValidId, handleLogout} from '../../utils/AuthenticationUtils';

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

/**
 * Component displaying the landing view of the journal module, after successfull
 * login. Shows an overview of all assessments of the user that is logged in.
 * @param {Object} props - Properties
 * @param {function} props.setGoToJournal -  If true, displays the journal overview.
 * @returns {Object} Overview of all assessments made by an user (journal)
 */
export default function JournalView(props) {
    // Retrieve props
    const setGoToJournal = props.setGoToJournal;

    // Navigation: go to assessment if true
    const [goToAssessment, setGoToAssessment] = React.useState(false);

    // Get context
    const {isLoggedOut, setIsLoggedOut} = React.useContext(JournalContext);
    const {therapistId} = React.useContext(JournalContext);

    // Valid "session"
    const {isValidConnection, setIsValidConnection} =
        React.useContext(JournalContext);

    // Id of assessment that will be detailed in Assessment screen
    const [assessmentId, setAssessmentId] = React.useState(-1);

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

    // Check that the connection is valid. Redirect to journal login if not.
    if (!isValidId(therapistId) || !isValidConnection || isLoggedOut) {
        return logout;
    } else if (goToAssessment) {
        // Check details of a specific assessment
        return (
            <AssessmentView
                setGoToAssessment={setGoToAssessment}
                setGoToJournal={setGoToJournal}
                assessmentId={assessmentId}
            />
        );
    } else {
        // Display the journal screen. It shows the overview of all assessments.

        // Get user (the userId is defined in the function). User data will be provided
        // by main application and userId does not need to be used in the activity
        // module.
        const user = getUser();

        // Prepare data to be displayed in the table.
        // The table show one assessment on each row.
        const assessments = [];
        getAssessments().forEach(assessment => {
            assessments.push(
                <DataTable.Row
                    key={assessment.assessmentID}
                    style={journalStyles.tableRow}>
                    <TableCell
                        style={styles.cellId}
                        text={assessment.assessmentID}
                    />
                    <TableCell
                        style={styles.cellDate}
                        text={assessment.activityCreateDate}
                    />
                    <TableCell
                        style={styles.cellActivity}
                        text={getName(assessment.activityType)}
                    />
                    <TableCell
                        style={styles.cellGrading}
                        text={assessment.grading.map(
                            grading => grading.grading.toString() + '  ',
                        )}
                    />
                    <TableCell
                        style={styles.cellFreeText}
                        text={assessment.comment.content}
                    />
                    <TableCell
                        style={styles.cellDrawing}
                        text={assessment.drawing == null ? 'False' : 'True'}
                    />

                    <DataTable.Cell style={styles.cellDetails}>
                        <View>
                            <JournalButton
                                length={ButtonLength.SHORT}
                                label={'Detaljer'}
                                onPress={() => {
                                    setGoToAssessment(true),
                                        setAssessmentId(
                                            assessment.assessmentID,
                                        );
                                }}
                            />
                        </View>
                    </DataTable.Cell>
                </DataTable.Row>,
            );
        });

        return (
            <SafeAreaWrapper safeAreaStyle={[journalStyles.container]}>
                <Header setGoToJournal={setGoToJournal} />

                <View
                    style={[
                        journalStyles.userInfoBar,
                        {justifyContent: 'flex-start'},
                    ]}>
                    <Avatar.Image
                        style={journalStyles.avatar}
                        size={75}
                        source={user.image}
                    />
                    <Text style={iOSTypography.title2}>
                        Siste tilbakemeldinger fra {user.name}
                    </Text>
                </View>

                <View style={journalStyles.body}>
                    <Text style={{paddingTop: 5, paddingBottom: 5}}>
                        Skala smilefjesvurdering: (0) Ikke besvart; (1) Dårlig;
                        (2) OK; (3) Bra
                    </Text>
                    <DataTable style={journalStyles.table}>
                        <DataTable.Header style={journalStyles.tableHeader}>
                            <TableTitle style={styles.cellId} text={'Id'} />
                            <TableTitle style={styles.cellDate} text={'Dato'} />
                            <TableTitle
                                style={styles.cellActivity}
                                text={'Aktivitet'}
                            />
                            <TableTitle
                                style={styles.cellGrading}
                                text={'Smilefjesvurd'}
                            />
                            <TableTitle
                                style={styles.cellFreeText}
                                text={'Fritekst'}
                            />
                            <TableTitle
                                style={styles.cellDrawing}
                                text={'Illustrasjon'}
                            />
                            <TableTitle
                                style={styles.cellDetails}
                                text={'Detaljer'}
                            />
                        </DataTable.Header>

                        <ScrollView style={journalStyles.table}>
                            {assessments}
                        </ScrollView>
                    </DataTable>
                </View>
            </SafeAreaWrapper>
        );
    }
}

/** Local styles */
const styles = StyleSheet.create({
    cellContainer: {
        flex: 1,
        justifyContent: 'center',
    },
    cellId: {
        flex: 1,
        marginRight: 1,
    },
    cellDate: {
        flex: 3,
        marginLeft: 1,
        marginRight: 1,
    },
    cellActivity: {
        flex: 3,
        marginLeft: 1,
        marginRight: 1,
    },
    cellGrading: {
        flex: 4,
        marginLeft: 1,
        marginRight: 1,
    },
    cellFreeText: {
        flex: 9,
        marginLeft: 1,
        marginRight: 1,
    },
    cellDrawing: {
        flex: 3,
        marginLeft: 1,
        marginRight: 1,
    },
    cellDetails: {
        flex: 3,
        marginLeft: 1,
    },
});