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