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 renderActionButton = (text, action) => {
        return renderButton(text, () => doSurveyAction(action));
    };

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


    const saveAndStopEdit = 'Save and stop editing';
    const save = 'Save progress';
    const startEditing = 'Start editing';
    const completeSurvey = 'Complete Survey';

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

    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, click “{startEditing}” to end read-only mode. This is only possible when nobody else from your NREN is currently working on the survey.
                    <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 />Press the “{save}“ or “{saveAndStopEdit}“ button to save all answers in the survey. When you reach the last section of the survey (Services), you will find a “{completeSurvey}“ button which saves all answers in the survey and lets the Compendium team know that your answers are ready to be published.
                    <br />As long as the survey remains open, any Compendium administrator from your NREN can add answers or amend existing ones, even after using the “{completeSurvey}“ button. Different people from your NREN can contribute to the survey if needed.
                    <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.
                    <br />If you notice any errors after the survey was closed, please contact us for correcting those.
                </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;