Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useState, useEffect } from "react";
import { axios } from '../../../utils';
import Section from "./section/Section";
import Spinner from "../../../shared/loading-spinner/Spinner";
import ConfirmModal from "../../../shared/confirm-modal/ConfirmModal";

const Test = (props) => {

    //init states 
    const [confirmModalShow, setConfirmModalShow] = useState(false);
    const [success, setSuccess] = useState(false);
    const [error, setError] = useState(false);
    const [draft, setDraft] = useState(false);
    const [page, setPage] = useState(0);

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

    /**
 * Send form data
 */
    const handleSubmit = async () => {
        //set states
        setDraft(false);
        setSuccess(false);
        setError(false);
        setConfirmModalShow(false);
        // check if the form has at least one response
        if (leastOneAnswer()) {
            formCompleted() ?
                setConfirmModalShow(true) :
                sendData();
        } else {
            setError(true);
        }
    }


    const sendData = async () => {
        setConfirmModalShow(false);
        // set form data
        const formData = new FormData();
        formData.append("content", JSON.stringify(test.content));
        formData.append("status",
            formCompleted() ?
                backendVars.STATUS_PENDING :
                backendVars.STATUS_DRAFT);
        await axios.post(action, formData).then((response) => {
            if (response.data.success) {
                formCompleted() ?
                    setSuccess(true) :
                    setDraft(true)
            }
        })
    }




    /**
     * Check if there are options to answer
     * @returns 
     */
    const formCompleted = () => {
        let completed = true;
        test.content.map((section) => {
            if (section.type == 'multiple') {
                section.options.map((option) => {
                    //Validate if the answer is empty
                    if (!option.answer || option.answer.length == 0) {
                        completed = false;
                    }
                });
            } else {
                if (!section.answer || section.answer.length == 0) {
                    completed = false;
                }
            }
        })
        return completed;
    }
    /**
     * Check if there is at least one answer
     * @returns 
     */
    const leastOneAnswer = () => {
        let answer = false;
        test.content.map((section) => {
            if (section.type == 'multiple') {
                section.options.map((option) => {
                    //Validate if the answer is not empty
                    if (option.answer != "" || option.answer.length != 0) {
                        answer = true;
                    }
                });
            } else {
                if (section.answer || section.answer.length != 0) {
                    answer = true;
                }
            }
        })
        return answer;
    }
    /**
     * Cancel test and send to the list of forms
     * @returns 
     */
    const handleGoBack = () => {
        setTest(null);
        setSuccess(false)
    }
    /**
     * componentDidMount
     */
    useEffect(() => {
        setPage(0);
    }, [action]);

    /**
     * Click cancel modal
     * @returns 
     */
    const handleConfirmModalShow = () => setConfirmModalShow(!confirmModalShow);


    /**
     * Click accept modal
     * @returns 
     */
    const handleConfirmModalAccept = async () => sendData();



    return (
        <div>
            {loading ? (
                <div className="row">
                    <Spinner />
                </div>
            ) : (
                <div>

<ConfirmModal
                                show={confirmModalShow}
                                onClose={handleConfirmModalShow}
                                onAccept={handleConfirmModalAccept}
                            />

                    {!success ? (
                        <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>
                            {test.content.length <= 0 ? (
                                <div className="col-md-12 col-sm-12 col-xs-12 text-center">
                                    {backendVars.LBL_DATATABLE_SZERORECORDS}
                                </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}
                                                    index={key}
                                                    page={page}
                                                    setPage={setPage}
                                                    total={test.content.length}
                                                    backendVars={backendVars}
                                                />)
                                        })}

                                        
                                    </div>
                                </div>
                            )}

                            {draft &&
                                <div className="col-md-12 col-sm-12 col-xs-12">
                                    <div className="company-title">
                                        <div className="alert alert-success alert-dismissible fade show" role="alert" >
                                            {backendVars.LBL_TEXT_SAVE_CONTINUE_FORM}
                                            <button
                                                type="button"
                                                className="close"
                                                data-dismiss="alert" aria-label="Close"
                                                onClick={() => setDraft(false)}

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

                            {error &&

                                <div className="col-md-12 col-sm-12 col-xs-12">
                                    <div className="company-title">
                                        <div className="alert alert-danger alert-dismissible fade show" role="alert" >
                                            {backendVars.LBL_ERROR_ANSWER_FORM}
                                            <button
                                                type="button"
                                                className="close"
                                                data-dismiss="alert" aria-label="Close"
                                                onClick={() => setError(false)}

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


                            <div className="col-md-12 col-sm-12 col-xs-12 text-right">
                                <div className="company-title">
                                    <button
                                        type="button"
                                        className="btn btn-secondary"
                                        onClick={() => handleGoBack()}>
                                        {backendVars.LBL_GO_BACK}
                                    </button>
                                    <button
                                        type="buttton"
                                        className="btn btn-primary"
                                        onClick={() => handleSubmit()}>
                                        {backendVars.LBL_SAVE}
                                    </button>
                                </div>
                            </div>
                        </div>
                    ) : (
                        <div className="row">
                            <div className="company-title text-center">
                                <div className="section_admin_title_buttons">
                                    <h1 className="title">{backendVars.LBL_SUCCESS_EVALUATION}</h1>
                                </div>
                            </div>
                            <div className="col-md-12 col-sm-12 col-xs-12 text-center">
                                <br />
                                <button
                                    className="btn btn-sm btn-primary"
                                    onClick={() => handleGoBack()}>
                                    {backendVars.LBL_GO_BACK}
                                </button>
                            </div>
                        </div>
                    )}
                </div>
            )}
        </div>
    )
}

export default Test;