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