Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useState } from "react";

import Option from "../option/Option";

const Section = (props) => {

    // get props

    const { section, backendVars, page, setPage, total, index } = props;

    //init states

    const [errors, setErrors] = useState([]);

    const [input, setInput] = useState(section.answer);

    /**

     * Check if there are options to answer

     * @returns

     */

     const validateSection = () => {

        setErrors([]);

        let formValid = true;

        let messages = [];

        if (section.type == 'multiple') {

            section.options.map((option) => {

                //Validate if the answer is empty

                if (!option.answer || option.answer.length == 0) {

                    formValid = false;

                }

            });

        } else {

            if (!section.answer || section.answer.length == 0) {

                formValid = false;

            }

        }

        setErrors(messages);

        return formValid;

    }

    /**

     * Return to previous section

     * @returns

     */

    const handlePrevious = () => {

        setErrors([]);

        setPage(page - 1);

    };

    /**

     * Update section answer

     * @param {*} value

     */

    const handleAnswer = (value) => {

        setInput(value);

        section.answer = value;

    }

    /**

     * Continue to the next section

     */

    const handleNext = () => validateSection() && setPage(page + 1);

    /**

     * componentDidMount

     */

    useEffect(() => {

        setInput(section.answer);

    }, [section]);

    return (

        <div className="panel-group" hidden={page == index ? false : true}>

            <div className="panel panel-default" id={`panel-${section.id_section}`}>

                <div className="panel-heading">

                    <h4 className="panel-title">{section.title}</h4>

                </div>

                <div id={section.id_section} className="panel-collapse in collapse show">

                    <div className="panel-body">

                        <div

                            dangerouslySetInnerHTML={{ __html: section.text }}

                            className="description"

                        />

                        <div className="row">

                            {section.type == 'simple' ? (

                                <div className="form-group">

                                    <textarea

                                        className="form-control"

                                        rows="5"

                                        value={input}

                                        maxLength='200'

                                        name={section.id_section}

                                        onChange={e =>

                                            handleAnswer(e.target.value)}

                                    />

                                </div>

                            ) : (

                                <div>

                                    {section.options.length > 0 &&

                                        <div>

                                            {section.options.map((option, i) => {

                                                return <Option

                                                    option={option}

                                                    key={i}

                                                    handleAnswer={handleAnswer}

                                                />

                                            })}

                                        </div>}

                                </div>)}

                        </div>

                        <div className="row">

                            {errors.length > 0 &&

                                <div className="col-md-12 np-padding">

                                    {errors.map((error, index) => {

                                        return (

                                            <div className="alert alert-danger alert-dismissible fade show" role="alert" key={index}>

                                                {error}

                                                <button type="button" className="close" data-dismiss="alert" aria-label="Close">

                                                    <span aria-hidden="true">&times;</span>

                                                </button>

                                            </div>);

                                    })}

                                </div>

                            }

                            <div className="col-md-12 np-padding">

                                <ul className="wizard">

                                    <li className="previous">

                                        {index != 0 &&

                                            <button

                                                type="button"

                                                className="btn btn-secondary"

                                                onClick={() => handlePrevious()}

                                            >

                                                {backendVars.LBL_EVALUATION_TEST_FORM_PREVIOUS}

                                            </button>

                                        }

                                    </li>

                                    <li className="next">

                                        {index != total - 1 &&

                                            <button

                                                type="button"

                                                onClick={() => handleNext()}

                                                className="btn btn-secondary">

                                                {backendVars.LBL_EVALUATION_TEST_FORM_NEXT}

                                            </button>

                                        }

                                    </li>

                                </ul>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    )

}

export default Section;