Proyectos de Subversion LeadersLinked - Antes de SPA

import React from "react";
import Section from "./section/Section";
import Spinner from "../../../shared/loading-spinner/Spinner";

const Test = (props) => {

    // get props
    const { backendVars, test, loading, setTest, action  } = props;


    /**
     * Send form data
     */
    const handleSubmit = async () => {
        if (validateForm()) {
            axios.post(action, test).then((response) => {
                if (response.data.success) {
                    console.info('Formulario almacenado');
                    setTest(null);
                }
            });
        }
    }
    /**
     * Update question answer
     * @param {*} slug_section 
     * @param {*} slug_question 
     * @param {*} answer 
     */
    const handleAnswer = (slug_section, slug_question, answer) => {
        test.content.filter((section) => {
            if (section.slug_section == slug_section) {
                section.questions.map((question) => {
                    if (question.slug_question == slug_question) {
                        question.answer = answer;
                    }
                })
            }
        })
        setTest(test);
    }
    /**
     * Check if there are questions to answer
     * @returns 
     */
    const validateForm = () => {
        let formValid = true;
        test.content.map((section) => {
            section.questions.map((question) => {
                if (!question.answer) {
                    console.error(`Debe ingresar una respuesta en la pregunta ${question.position + 1} de la sección ${section.name}`);
                    formValid = false;
                }
            })
        })

        return formValid;
    }


    return (
        <div>
            {loading ? (
                <div className="row">
                    <Spinner />
                </div>
            ) : (
                <div className="row test-section">
                    <div className="col-md-12 col-sm-12 col-xs-12">
                        <div className="company-title">
                            <div className="section_admin_title_buttons">
                                <h1 className="title">{test.name}</h1>
                            </div>
                        </div>
                        <div
                            dangerouslySetInnerHTML={{ __html: test.text }}
                            className="description company-title"
                        ></div>
                    </div>
                    <div className="col-md-12 col-sm-12 col-xs-12">
                        <div className="company-title">
                            {test.content.map((section, key) => {
                                return <Section
                                    section={section}
                                    key={key}
                                    backendVars={backendVars}
                                    handleAnswer={handleAnswer}
                                />
                            })}
                        </div>
                    </div>
                    <div className="col-md-12 col-sm-12 col-xs-12">
                        <div className="company-title">
                            <button type="button" className="btn btn-danger" onClick={() => setTest(null)}>{backendVars.LBL_CANCEL}</button>
                            <button type="buttton" className="btn btn-success" onClick={() => handleSubmit()}>{backendVars.LBL_SAVE}</button>
                        </div>
                    </div>
                </div>
            )}
        </div>
    )
}

export default Test;