Home Reference Source

src/views/startview/StartView.js

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

import Avatar from '../../components/avatar/Avatar';
import ToDiaryButton from '../../components/buttons/ToDiaryButton';
import ToJournalButton from '../../components/buttons/ToJournalButton';
import JournalAlertBoxOverlay from '../../components/dialogBoxes/JournalAlertBoxOverlay';
import Helper from '../../components/helper/Helper';
import ActivityList from './components/ActivityList';
import JournalLoginView from '../journal/JournalLoginView';
import DiaryView from '../diary/DiaryView';

import {getActivity} from '../../database/ActivitiesDAO';
import {getAssessments} from '../../database/UsersDAO';
import {getActivityId} from '../../objects/Assessment';
import {globalStyles} from '../../styles/styles';

import {MoodContext, MuteContext} from '../../utils/Contexts';
import Moods from '../../utils/Moods';
import Activity from '../assessment/ActivityView';

/**
 * The Landing page showing the main menu
 * @returns {Object} The main window with all of its components
 */
export default function StartView() {
    //Temporary code to show current assessments
    let i = 1;
    console.log('CURRENT ASSESSMENTS:');
    getAssessments().forEach(assessment => {
        console.log(assessment);
    });

    //Initializing mood state.
    const [mood, setMood] = React.useState(Moods.NOTANSWERED);

    //Initalising mute state.
    const [mute, setMute] = React.useState(false);

    //Determining whether program should go to Activity.js
    const [goToActivity, setGoToActivity] = React.useState(false);

    //Variables setting the visibility of the modal overlay view for journal
    const [modalVisible, setModalVisible] = React.useState(false);

    //Toggles the modal visibility
    const toggleModalVisibility = () => {
        setModalVisible(!modalVisible);
    };

    //To show the modal warning the user that the journal is only for therapists
    const displayModal = () => setModalVisible(true);

    //Determining whether program should go to the journal screen
    const [goToJournalLogin, setGoToJournalLogin] = React.useState(false);

    //When user confirms it wants to go to journal, remove modal and go to journal
    const goToJournalLoginAction = () => {
        setModalVisible(false);
        setGoToJournalLogin(true);
    };

    //Determining whether program should go to the diary screen
    const [goToDiary, setGoToDiary] = React.useState(false);

    //If true, the program goes to ActivityView for chosen activity
    if (goToActivity)
        //Need to pass mute-variables and mood-variables down the hieararchy, because they are needed for assessments
        return (
            <MuteContext.Provider value={{mute, setMute}}>
                <MoodContext.Provider value={{mood, setMood}}>
                    <Activity
                        //Pass down the id of chosen activity and method to come back to startview
                        activity={getActivity(getActivityId())}
                        setGoToActivity={setGoToActivity}
                    />
                </MoodContext.Provider>
            </MuteContext.Provider>
        );
    //If true, the program goes to the login screen for journal
    else if (goToJournalLogin) {
        return (
            //Passes down method to come back to startview and state variables for modal
            <JournalLoginView
                setGoToJournalLogin={setGoToJournalLogin}
                modalVisible={modalVisible}
                setModalVisible={setModalVisible}
            />
        );
        //If true, the program goes to diary
    } else if (goToDiary) {
        //Need to pass down mute variables due to the helper also being in diary
        return (
            //The compnenent gets a method for returning to the startview
            <MuteContext.Provider value={{mute, setMute}}>
                <DiaryView setGoToDiary={setGoToDiary} />
            </MuteContext.Provider>
        );
    } else {
        return (
            <View style={globalStyles.background}>
                {/*Draws the backround*/}
                <ImageBackground
                    source={require('../../assets/backgrounds/backgroundHome.png')}
                    resizeMode="cover"
                    style={{flex: 1, justifyContent: 'center'}}>
                    {/*Avatar on top of backorund*/}
                    <Avatar full={true} mood={Moods.OK} />

                    {/*Text above ActivityList*/}
                    <Text style={[globalStyles.text, styles.textPos]}>
                        Dine aktiviteter: hvordan var det?
                    </Text>

                    {/*Making the scrollable activitylist*/}
                    <ActivityList setGoToActivity={setGoToActivity} />

                    {/*Button to go to Diary*/}
                    <ToDiaryButton
                        style={styles.diaryButton}
                        onPress={() => setGoToDiary(true)}
                    />

                    {/*Button to go to Journal*/}
                    <ToJournalButton
                        style={styles.journalButton}
                        onPress={displayModal}
                    />

                    {/*The helper with mute variables available*/}
                    <MuteContext.Provider value={{mute, setMute}}>
                        {/*The id only tells where the helper is called from. 0 means its startview*/}
                        <Helper id={0} />
                    </MuteContext.Provider>

                    {/*The modal with the warning, but it is not visible unting modalVisible === true*/}
                    <View>
                        <JournalAlertBoxOverlay
                            modalVisible={modalVisible}
                            onModalRequestCloseAction={toggleModalVisibility}
                            onPressOkButtonAction={goToJournalLoginAction}
                            onPressCancelButtonAction={toggleModalVisibility}
                        />
                    </View>
                </ImageBackground>
            </View>
        );
    }
}

/**
 * Local styles
 * @type {Object}
 */
const styles = StyleSheet.create({
    textPos: {
        position: 'absolute',
        top: '4%',
        left: '1%',
    },
    diaryButton: {
        position: 'absolute',
        bottom: '25%',
        right: '15%',
    },
    journalButton: {
        position: 'absolute',
        bottom: 50,
        right: 50,
    },
});