Home Reference Source

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