Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useState, useEffect } 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) {
                    messages.push(backendVars.LBL_ERROR_FIELDS_EMPTY);
                    formValid = false;
                }
            });
        } else {
            if (!section.answer || section.answer.length == 0) {
                messages.push(backendVars.LBL_ERROR_FIELDS_EMPTY);
                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 className="description"><p>{section.text}</p></div>
                        <div className="row">
                            {section.type == 'simple' ? (
                                <div className="col-md-12 col-sm-12 col-xs-12 np-padding">
                                    <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>
                            ) : (
                                <div className="col-md-12 col-sm-12 col-xs-12 np-padding">
                                    {section.options.length > 0 &&
                                        <div className="col-md-12 col-sm-12 col-xs-12 np-padding">
                                            {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;