src/views/diary/components/GradingsOverview.js
import React from 'react';
import {StyleSheet, Text, View} from 'react-native';
import GradingCardBack from './GradingCardBack';
import {iOSxLargeTypo} from '../../../styles/Typography';
import {numberOfQuestions} from '../../../database/ActivityTypesDAO';
/**
* Component displaying an overview of all answers to questions related to
* an activity. The number of questions the user has answered to is also
* displayed.
* @param {Object} props - Properties
* @param {number} props.activityType - Type of activity
* @param {Object[]} props.grading - Array of grading for an activity
* @returns {Object} Box containing the number of answered
* questions, and cards showing the answers.
*/
export default function GradingsOverview(props) {
// Retrieve props
const activityType = props.activityType;
const gradingArray = props.grading;
const hasGrading =
gradingArray.length !== 0 &&
gradingArray !== null &&
gradingArray !== undefined;
const nbOfQuestions = hasGrading ? numberOfQuestions(activityType) : 0;
const gradingCardArray = [];
let questionNumber = nbOfQuestions;
if (hasGrading) {
for (index = nbOfQuestions - 1; index >= 0; index--) {
const grading = gradingArray[index];
if (grading !== null && grading !== undefined) {
gradingCardArray.push(
<GradingCardBack
key={grading.questionId}
grading={grading}
random={nbOfQuestions}
questionNumber={questionNumber}
activityType={activityType}
/>,
);
}
questionNumber--;
}
}
return (
<View style={styles.container}>
<Text style={[iOSxLargeTypo.title2, styles.text]}>
Mine smilefjes
</Text>
<Text style={[iOSxLargeTypo.body, styles.text]}>
Jeg har svart på {nbOfQuestions} spørsmål!
</Text>
<View style={styles.cardsContainer}>{gradingCardArray}</View>
</View>
);
}
/** Local styles */
const styles = StyleSheet.create({
container: {
position: 'absolute',
alignItems: 'center',
flex: 1,
width: '50%',
height: '53%',
top: 20,
left: 20,
bottom: 30,
paddingVertical: 15,
backgroundColor: '#E2F0FB',
borderRadius: 10,
},
cardsContainer: {
flex: 1,
width: '100%',
height: 100,
flexDirection: 'row-reverse',
justifyContent: 'space-around',
},
text: {
textAlign: 'center',
padding: 3,
},
});