Skip to content
Snippets Groups Projects
SurveyNavigationComponent.tsx 2.14 KiB
import React, { useEffect, useState } from "react";
import ProgressBar from './ProgressBar';
import { Container, Row } from "react-bootstrap";


function SurveyNavigationComponent({ surveyModel, endSurvey, saveSurvey, validatePage, children }) {
    const [pageNo, setPageNo] = useState(0);

    useEffect(() => {
        setPageNo(surveyModel.currentPageNo)
    }, [surveyModel]);

    const pageNoSetter = (page) => {
        setPageNo(page);
        surveyModel.currentPageNo = page;
    }
    const decrementPageNo = () => { pageNoSetter(surveyModel.currentPageNo - 1); };
    const incrementPageNo = () => { pageNoSetter(surveyModel.currentPageNo + 1); };

    const renderButton = (text, func) => {
        // TODO add sv-footer__complete-btn for complete button, and save button perhaps too?
        return (
            <button className="sv-btn sv-btn--navigation" onClick={func}>
                {text}
            </button>
        );
    };

    const renderExternalNavigation = () => {
        return (
            <div className="navigation-block">
                <div className="navigation-progress-container">
                    <div className="navigation-buttons-container">
                        {(pageNo === surveyModel.visiblePages.length - 1) && renderButton('Complete Survey', endSurvey)}
                        {renderButton('Save progress', saveSurvey)}
                        {/* {(pageNo !== surveyModel.visiblePages.length - 1) && renderButton('Next Page', incrementPageNo)} */}
                        {/* {renderButton('Validate Page', validatePage)} */}
                        {/* {pageNo !== 0 && renderButton('Previous Page', decrementPageNo)} */}
                    </div>
                </div>
            </div>
        );
    };

    return (
        <Container>
            <Row>
                {renderExternalNavigation()}
            </Row>
            <Row>
                <ProgressBar surveyModel={surveyModel} pageNoSetter={pageNoSetter} />
                {children}
            </Row>
            <Row>
                {renderExternalNavigation()}
            </Row>

        </Container>
    );
}

export default SurveyNavigationComponent;