src/views/diary/DiaryView.js
import React from 'react';
import {StyleSheet, View} from 'react-native';
import DiaryCover from './components/DiaryCover';
import DiaryPage from './components/DiaryPage';
import Header from './components/Header';
import Helper from '../../components/helper/Helper';
import HomeRoundButton from '../../components/buttons/HomeRoundButton';
import NavNextPage from './components/NavNextPage';
import NavPreviousPage from './components/NavPreviousPage';
import NavToStart from './components/NavToStart';
import SafeAreaWrapper from '../../components/wrappers/SafeAreaWrapper';
import {getAssessments} from '../../database/UsersDAO';
import {DiaryPageContext} from '../../utils/Contexts';
import {RoundButtonSize} from '../../utils/DimensionsConstants';
/**
* View showing the diary
* @param {Object} props - Properties
* @param {boolean} props.setGoToDiary - If true, displays the diary (navigation)
* @returns {Object} View component showing the diary
*/
export default function DiaryView(props) {
// Retrieve props
const setGoToDiary = props.setGoToDiary; // navigation
// Initialize constants
const [toPage, setToPage] = React.useState(0);
const numberOfPages = getAssessments().length;
const isCover = toPage == 0;
const isLastPage = toPage === numberOfPages;
// Navigation
const goToDiary = () => setGoToDiary(false);
const goToCover = () => setToPage(0);
const goToPreviousPage = () => {
setToPage(toPage - 1);
};
const goToNextPage = () => {
setToPage(toPage + 1);
};
return (
<SafeAreaWrapper>
<DiaryPageContext.Provider value={{toPage, setToPage}}>
<Header
leftComponent={
<NavToStart isVisible={!isCover} onPress={goToCover} />
}
middleComponent={<Helper id={5} />}
rightComponent={
<HomeRoundButton
buttonSize={RoundButtonSize.SMALL}
onPress={goToDiary}
/>
}
/>
<View style={styles.section}>
<NavPreviousPage
containerStyle={styles.navigation}
isVisible={!isCover}
onPress={goToPreviousPage}
/>
<View style={styles.mainSection}>
{isCover && <DiaryCover />}
{!isCover && <DiaryPage toPage={toPage} />}
</View>
<NavNextPage
containerStyle={styles.navigation}
isVisible={!isLastPage}
onPress={goToNextPage}
/>
</View>
</DiaryPageContext.Provider>
</SafeAreaWrapper>
);
}
/** Local styles */
const styles = StyleSheet.create({
safeContainer: {
flex: 1,
width: '100%',
height: '100%',
},
section: {
flex: 0.75,
flexDirection: 'row',
zIndex: 3,
},
mainSection: {
flex: 0.76,
},
navigation: {
flex: 0.12,
justifyContent: 'center',
alignItems: 'center',
},
});