Teamway-Test-Project/frontend/src/component/questionnaire.js

import React from 'react';
import url from '../server';
import Question from './question';
import QuestionnaireResult from './questionnaire_result';

function Questionnaire(props){
    const [currentIndex, onMoveToIndex] = React.useState(0);
    const [questionnaireDataFetched, onQuestionnaireDataFetched] = React.useState(null);
    const [resultsAvailable, onQuestionnaireCompleted] = React.useState(false);

    //-------------------------------
    // Fetch questionnaire
    //-------------------------------
    if(null === questionnaireDataFetched)
    {
        fetch(url+"/questionnaire")
            .then(response => response.json())
            .then(result => {
                if('error' in result)
                    console.error(result);
                onQuestionnaireDataFetched(result);
            })
            .catch( e => {
                console.log(e);
            });
    }

    if(!resultsAvailable)
    return (<React.Fragment>
        {
            null === questionnaireDataFetched ?
            <div> Questionnaire is loading </div>
            :
            <Question
                key={"question_"+currentIndex}   //force throw away to ease radio buttons management 
                sessionId={props.sessionId}
                questions={questionnaireDataFetched.questions}
                index={currentIndex}
                moveToQuestion={onMoveToIndex}
                questionnaireCompleted={onQuestionnaireCompleted}/>
        }
        <div>
        {
            currentIndex > 0 ? <div onClick={() => onMoveToIndex(currentIndex-1)}>Previous Question</div> : ''  
        }
        {
            null != questionnaireDataFetched && currentIndex < questionnaireDataFetched.questions.length - 1 && 'answer' in questionnaireDataFetched.questions[currentIndex] && 
            <div onClick={() => onMoveToIndex(currentIndex+1)}>Next Question</div>
        }
        </div>
        </React.Fragment>
    )
    else
    return(
        <QuestionnaireResult sessionId={props.sessionId}/>
    )
}

export default Questionnaire;