SurveyNavigationComponent.tsx

import React, { useContext, useEffect, useState, useCallback } from "react";
import ProgressBar from './ProgressBar';
import { Container, Row } from "react-bootstrap";
import { userContext } from "./providers/UserProvider";


function SurveyNavigationComponent({ surveyModel, surveyActions, year, nren, children }) {
    // We use some state variables that are directly derived from the surveyModel to
    // ensure React rerenders properly. It would honestly be just as easy to remove the state
    // and force the rerender ourselves, because we know exactly when the rerender is necessary.
    const [pageNo, setPageNo] = useState(0);
    const [editing, setEditing] = useState(false);
    const [lockedBy, setLockedBy] = useState("");
    const [responseStatus, setResponseStatus] = useState("");
    const { user: loggedInUser } = useContext(userContext);

    // useCallback to keep the linter happy with the useEffect dependencies below
    const copySurveyState = useCallback(() => {
        setEditing(surveyModel.mode == 'edit');
        setLockedBy(surveyModel.lockedBy);
        setPageNo(surveyModel.currentPageNo);
        setResponseStatus(surveyModel.status);
    }, [surveyModel]);

    useEffect(() => {
        copySurveyState();
    }, [copySurveyState]);

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

    const doSurveyAction = async (action) => {
        await surveyActions[action]();
        copySurveyState();
    }

    const renderButton = (text, action) => {
        return (
            <button className="sv-btn sv-btn--navigation" onClick={() => doSurveyAction(action)}>
                {text}
            </button>
        );
    };

    const renderExternalNavigation = () => {
        return (
            <div className="survey-edit-buttons-block">
                {!editing && !lockedBy && surveyModel.editAllowed && renderButton('Start editing', 'startEdit')}
                {!editing && lockedBy && lockedBy == loggedInUser.name && renderButton('Discard any unsaved changes and release your lock', 'releaseLock')}
                {editing && (pageNo === surveyModel.visiblePages.length - 1) && renderButton('Complete Survey', 'complete')}
                {editing && renderButton(saveAndStopEdit, 'saveAndStopEdit')}
                {editing && renderButton('Save progress', 'save')}
                {/* {(pageNo !== surveyModel.visiblePages.length - 1) && renderButton('Next Page', incrementPageNo)} */}
                {/* {renderButton('Validate Page', 'validatePage')} */}
                {/* {pageNo !== 0 && renderButton('Previous Page', decrementPageNo)} */}
            </div>
        );
    };

    const saveAndStopEdit = 'Save and stop editing';
    const _year = parseInt(year);
    return (
        <Container>
            <Row className="survey-content">
                <h2><span className="survey-title">{year} Compendium Survey </span><span className="survey-title-nren"> {nren} </span><span> - {responseStatus}</span></h2>
                <p style={{marginTop: '1rem'}}>
                    To get started, check that nobody else from your NREN is currently working on the survey, then click “start editing” to end read-only mode.
                    <br />Where available, the survey questions are pre-filled with answers from the previous year. The survey asks about the past year, i.e. the {year} survey asks about data from {_year - 1} (or {_year - 1}/{year} if your NRENs financial year does not match the calendar year). You can edit the prefilled answer to provide new information, or press the “no change from previous year” button.
                    <br />As long as the survey remains open, any Compendium administrator from your NREN can add answers or amend existing ones, i.e. different parts of your NREN can contribute to the survey if needed.
                    <br />When you reach the last section of the survey (Services), you will find a “Complete Survey“ button which saves all answers in the survey and lets the Compendium team know that you wish to submit your responses. If you accidentally complete the survey before you have completed it, please contact us and we will re-open the survey for you.
                    <br />Some fields require specific data, such as numerical data, valid http-addresses, and in some questions, the answer has to add up to 100%. If an answer does not fulfil the set criteria, the question will turn pink and an error message will appear. Fields can be left blank if you prefer not to answer a question.
                </p>
                <p>Thank you for taking the time to fill in the {year} Compendium Survey. Any questions or requests can be sent to <a href={`mailto:Partner-Relations@geant.org`}><span>Partner-Relations@geant.org</span></a></p>
                {editing && <><br /><b>Remember to click “{saveAndStopEdit}” before leaving the page.</b></>}
            </Row>
            <Row>
                {renderExternalNavigation()}
            </Row>
            <Row className="survey-content">
                {!editing && (
                    <div className="survey-edit-explainer">
                        {!lockedBy && surveyModel.editAllowed && <span>The survey is in read-only mode; click the “Start editing“ button to start editing the answers.</span>}
                        {!lockedBy && !surveyModel.editAllowed && <span>The survey is in read-only mode and can not be edited by you.</span>}
                        {lockedBy && lockedBy != loggedInUser.name && 'The survey is in READONLY mode and currently being edited by: ' + lockedBy + '. To start editing the survey, ask them to complete their edits.'}
                        {lockedBy && lockedBy == loggedInUser.name && 'The survey is in READONLY mode because you started editing in another tab, browser or device. To start editing the survey, either complete those edits or click the "Discard any unsaved changes" button.'}
                    </div>
                )}
            </Row>
            <Row>
                <ProgressBar surveyModel={surveyModel} pageNoSetter={pageNoSetter} />
                {children}
            </Row>
            <Row>
                {renderExternalNavigation()}
            </Row>

        </Container>
    );
}

export default SurveyNavigationComponent;