Home Reference Source

src/views/diary/components/GradingCardFront.js

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

import {getEmojiImage, getLegend} from '../../../utils/GradingScale';
import {getQuestion} from '../../../database/ActivityTypesDAO';

import {globalStyles} from '../../../styles/styles';
import {typography} from '../../../styles/Typography';

/**
 * Component displaying the front size of a grading card. It displays the question
 * number and the grad, shown with an emoticon having the corresponding mood.
 * @param {Object} props - Properties
 * @param {Object} props.grading - The grading with question id, question and answer
 * @param {string} props.cardColor - Color of the grading card
 * @param {number} props.activityType - Type of activity
 * @returns {Object} The front size of the grading card
 */
export default function GradingCard(props) {
    // Retrieve props
    const grading = props.grading;
    const cardColor = props.cardColor;
    const activityType = props.activityType;

    // Set the "random" background color of the card
    const emojiImage = getEmojiImage(grading.grading);
    const legend = getLegend(grading.grading);
    return (
        <View
            style={[
                styles.container,
                globalStyles.shadow,
                {backgroundColor: cardColor},
            ]}>
            <Text style={[typography.title2, styles.label]}>
                {getQuestion(activityType, grading.questionId).question}
            </Text>
            <View style={styles.image}>
                <Image source={emojiImage} style={globalStyles.resetImage} />
            </View>
            <Text style={[typography.headline, styles.legend]}>{legend}</Text>
        </View>
    );
}

/** Local styles
 * @type {Object}
 */
const styles = StyleSheet.create({
    container: {
        justifyContent: 'space-evenly',
        alignItems: 'center',
        alignContent: 'center',
        width: 500,
        aspectRatio: 3 / 2,
        margin: 5,
        paddingTop: 3,
        paddingHorizontal: 2,
        borderWidth: 10,
        borderRadius: 25,
        borderColor: '#FFCD4C',
    },
    label: {
        color: 'white',
    },
    image: {
        width: 100,
        height: 100,
    },
    legend: {
        color: 'white',
        lineHeight: 24,
    },
});