Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useState } from "react";
import Question from "../question/Question";

const Section = (props) => {

    // get props
    const { section, backendVars, handleAnswer, page, setPage } = props;

    //init states 
    const [error, setError] = useState('');

    /**
     * Check if there are questions to answer
     * @returns 
     */
    const validateSection = () => {
        setError('');
        let formValid = true;
        section.questions.map((question) => {
            //Validate if the answer is empty
            if (!question.answer) {
                formValid = false;
            }
        })
        return formValid;
    }

    /**
     * Return to previous section
     * @returns 
     */
    const handlePrevious = () => setPage(page - 1);


    /**
     * Continue to the next section
     */
    const handleNext = () => {
        if (validateSection()) {
            setPage(page + 1);
        }
    }

    return (

        <div className="panel-group" hidden={page == section.position ? false : true}>
            <div className="panel panel-default" id={`panel-${section.slug_section}`}>
                <div className="panel-heading">
                    <h4 className="panel-title">
                        <a>{section.name}</a>
                    </h4>
                </div>
                <div id={section.slug_section} className="panel-collapse in collapse show">
                    <div className="panel-body">
                        <div
                            dangerouslySetInnerHTML={{ __html: section.text }}
                            className="description"
                        />
                        <div className="row">
                            {section.questions.map((question, i) => {
                                return <Question
                                    question={question}
                                    key={i}
                                    backendVars={backendVars}
                                    handleAnswer={handleAnswer}
                                />;
                            })}
                        </div>
                        <div className="row">
                            <div className="col-md-12 text-right np-padding">
                                <div class="alert alert-danger" role="alert">
                                    This is a danger alert—check it out!
                                </div>
                            </div>
                            <div className="col-md-12 text-right np-padding">
                                <ul class="wizard">
                                    <li class="previous">
                                        <button
                                            type="button"
                                            className="btn btn-secondary"
                                            onClick={() => handlePrevious()}
                                            disabled={section.position == 0}
                                        >
                                            {backendVars.LBL_SELF_EVALUATION_TEST_FORM_PREVIOUS}
                                        </button>
                                    </li>
                                    <li class="next">
                                        <button
                                            type="button"
                                            onClick={() => handleNext()}
                                            className="btn btn-secondary">
                                            {backendVars.LBL_SELF_EVALUATION_TEST_FORM_NEXT}
                                        </button>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Section;