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 [confirmationBoxShow, setConfirmationBoxShow] = useState(false);

    const [valid, setValid] = useState(false);

    const [success, setSuccess] = useState(false);

    const [page, setPage] = useState(0);

    // get props

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

    /**

     * Send form data

     */

    const handleSubmit = async () => {

        if (validateForm()) {

            //init form data

            const formData = new FormData();

            formData.append("content", JSON.stringify(test));

            await axios.post(action, formData).then((response) => {

                if (response.data.success) {

                    setSuccess(true);

                }

            });

        }

    }

    /**

     * 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) {

                        //valid if the question has more than one answer

                        question.type == 'multiple' ?

                            !question.answer ?

                                question.answer = [answer] :

                                question.answer.includes(answer) ?

                                    question.answer = removeOptionMultiple(question.answer, answer) :

                                    question.answer.push(answer)

                            : question.answer = answer;

                    }

                })

            }

        });

        validateForm();

        setTest(test);

    }

    /**

     * Delete existing option

     * @param {*} arr

     * @param {*} item

     * @returns

     */

    const removeOptionMultiple = (arr, item) => arr.splice(arr.indexOf(item), 1);

    /**

     * Check if there are questions to answer

     * @returns

     */

    const validateForm = () => {

        let formValid = true;

        test.content.map((section) => {

            section.questions.map((question) => {

                //Validate if the answer is empty

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

                    formValid = false;

                }

            })

        })

        setValid(formValid);

        return formValid;

    }

    /**

     * Update component status

     * @returns

     */

    const handleConfirmationBoxShow = () => setConfirmationBoxShow(!confirmationBoxShow);

    /**

     * Cancel test and send to the list of forms

     * @returns

     */

    const handleCancel = () => setTest('');

    /**

     * componentDidMount

     */

    useEffect(() => {

        if (test.content.length <= 0) {

            setPage(test.content[0].position);

        }

    }, []);

    return (

        <div>

            {loading ? (

                <div className="row">

                    <Spinner />

                </div>

            ) : (

                <div>

                    {!success ? (

                        <div className="row test-section">

                            <ConfirmModal

                                show={confirmationBoxShow}

                                title={backendVars.LBL_TITLE_CONFIRM_SELF_EVALUATION}

                                message={backendVars.LBL_TEXT_CONFIRM_SELF_EVALUATION}

                                acceptLabel={backendVars.LBL_BTN_CONFIRM_SELF_EVALUATION}

                                onClose={handleConfirmationBoxShow}

                                onAccept={handleCancel}

                            />

                            <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}

                                                    key={key}

                                                    page={page}

                                                    setPage={setPage}

                                                    total={test.content.length}

                                                    backendVars={backendVars}

                                                    handleAnswer={handleAnswer}

                                                />)

                                        })}

                                    </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={handleConfirmationBoxShow}>

                                        {backendVars.LBL_CANCEL}

                                    </button>

                                    <button

                                        type="buttton"

                                        className="btn btn-primary"

                                        disabled={!valid}

                                        onClick={() => handleSubmit()}>

                                        {backendVars.LBL_SAVE}

                                    </button>

                                </div>

                            </div>

                        </div>

                    ) : (

                        <div className="row">

                            <div class="company-title text-center">

                                <div class="section_admin_title_buttons">

                                    <h1 class="title">{backendVars.LBL_SUCCESS_SELF_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={() => {

                                        setTest(null);

                                        setSuccess(false)

                                    }}>{backendVars.LBL_GO_BACK}</button>

                            </div>

                        </div>

                    )}

                </div>

            )}

        </div>

    )

}

export default Test;