Home Reference Source

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