Home Reference Source

src/views/diary/components/DiaryPage.js

import React from 'react';
import {ImageBackground, StyleSheet, View} from 'react-native';

import DateCalendar from './DateCalendar';
import Drawing from './Drawing';
import FreeText from './FreeText';
import GradingsOverview from './GradingsOverview';
import PageTitle from './PageTitle';
import PictureActivity from './PictureActivity';

import {getAssessments} from '../../../database/UsersDAO';
import {getPicture, getName} from '../../../database/ActivityTypesDAO';

import {DiaryPageContext} from '../../../utils/Contexts';

/**
 * Component displaying the right page of the diary with all the answers to
 * assessment for an activity session. The page/assessment that is displayed is
 * given by the context (page number).
 * @returns {Object} Diary page with assessment for an activity
 */
export default function DiaryPage() {
    // toPage is current page number. Fetched from context.
    const {toPage} = React.useContext(DiaryPageContext);
    const assessment = getAssessments()[toPage - 1];

    return (
        <ImageBackground
            source={require('../../../assets/backgrounds/rightPage.png')}
            resizeMode="stretch"
            style={styles.imageBackground}>
            <View style={styles.container}>
                <View style={styles.pageContentContainer}>
                    <PictureActivity
                        source={getPicture(assessment.activityType)}
                    />
                    <PageTitle title={getName(assessment.activityType)} />
                    <DateCalendar date={assessment.activityCreateDate} />
                    <GradingsOverview
                        activityType={assessment.activityType}
                        grading={assessment.grading}
                    />
                    <FreeText
                        freeText={assessment.comment}
                        componentStyle={styles.freeTextComponent}
                    />
                    <Drawing
                        source={assessment.drawing}
                        componentStyle={styles.drawingComponent}
                    />
                </View>
            </View>
        </ImageBackground>
    );
}

/**
 * Local styles
 * @type {Object}
 */
const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
    },
    imageBackground: {
        flex: 1,
        justifyContent: 'flex-start',
    },
    pageContentContainer: {
        width: '97%',
        height: '95%',
        borderTopRightRadius: 20,
        borderBottomRightRadius: 20,
        marginLeft: 4,
    },
    freeTextComponent: {
        flex: 1,
        position: 'absolute',
        width: '53%',
        height: '36%',
        bottom: 20,
        left: 10,
    },
    drawingComponent: {
        width: '35%',
        height: '35%',
        top: '60%',
        left: '62%',
    },
});