Home Reference Source

src/views/assessment/ActivityView.js

import React from 'react';
import {Image, View} from 'react-native';
import Animated, {FadeIn} from 'react-native-reanimated';

import Menu from './menu/MenuView';
import Avatar from '../../components/avatar/Avatar';

import {getPicture} from '../../database/ActivityTypesDAO';

import {globalStyles} from '../../styles/styles';
import {ActivityContext, MoodContext} from '../../utils/Contexts';

/**
 * The landing page for activities.
 * @param {Object} activity - The current activity that is to be assessed
 * @param {function} setGoToActivity  - If set to false, the user is redirected back to main menu (StartView)
 * @returns {Object} The landing page for the chosen activity
 */
export default function Activity({activity, setGoToActivity}) {
    //Get the current mood
    const {mood} = React.useContext(MoodContext);

    return (
        <View style={globalStyles.background}>
            <Animated.View //Make the screen fade in
                style={globalStyles.coverAll}
                entering={FadeIn}>
                {/*Make the activity the background picture*/}
                <Image
                    source={getPicture(activity.activityType)}
                    style={[globalStyles.coverAll, {position: 'absolute'}]}
                />
                {/* Show the users avatar */}
                <Avatar full={true} mood={mood} />

                {/* Show the menu and passes the activity down the hierarchy*/}
                <ActivityContext.Provider value={activity}>
                    {/*Goes to menu and passes method to come back to startview*/}
                    <Menu setGoToActivity={setGoToActivity} />
                </ActivityContext.Provider>
            </Animated.View>
        </View>
    );
}