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