Home Reference Source

src/views/assessment/grading/components/Face.js

import React from 'react';
import {TouchableOpacity} from 'react-native';

import Avatar from '../../../../components/avatar/Avatar';

import {setGrading} from '../../../../objects/Assessment';
import {playSound} from '../../../../utils/SoundUtils';

import Moods from '../../../../utils/Moods';
import {MoodContext} from '../../../../utils/Contexts';

/**
 * Component for each face in Grading.
 * @param {number} mood - The mood the face should be in
 * @param {number} question - The id of the current question
 * @param {function} setAnswered - If set to true, the user can go to next question
 * @returns {Object} The complete face component
 */
export default function Face({mood, question, setAnswered}) {
    //The sound that is to be played
    const sound =
        mood === Moods.BAD
            ? 'ikkegoy_dialog'
            : mood === Moods.OK
            ? 'ok_dialog'
            : 'goy_dialog';

    //Get function to change avatar mood
    const {setMood} = React.useContext(MoodContext);

    return (
        <TouchableOpacity //Make face touchable
            style={{flex: 1}}
            onPress={() => {
                setMood(mood); //Change avatar mood
                setGrading({questionId: question, grading: mood}); //Save the grading for the question
                playSound(sound); // Play the sound
                setAnswered(true); // User can go to next question
            }}>
            {/* Draw the face in the specified mood */}
            <Avatar full={false} mood={mood} />
        </TouchableOpacity>
    );
}