Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useState } from "react";
import { axios } from '../../../utils';
import Section from "./section/Section";
import Spinner from "../../../shared/loading-spinner/Spinner";
import ConfirmationBox from "../../../shared/confirmation-box/ConfirmationBox";

const Test = (props) => {

    //init states 
    const [confirmationBoxShow, setConfirmationBoxShow] = useState(false);
    const [valid, setValid] = 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) {
                    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) {
                        //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);
    }

    const removeOptionMultiple = (arr, item) => {
        console.log(arr);
        var i = arr.indexOf(item);
        console.log(i);

        console.log(arr.splice(arr.indexOf(item), 1));
        
        return 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) {
                    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('');

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

                            <ConfirmationBox
                                show={confirmationBoxShow}
                                onClose={handleConfirmationBoxShow}
                                onAccept={handleCancel}
                            />


                            <button
                                type="buttton"
                                className="btn btn-primary"
                                disabled={!valid}
                                onClick={() => handleSubmit()}>
                                {backendVars.LBL_SAVE}
                            </button>
                        </div>
                    </div>
                </div>
            )}


        </div>
    )
}

export default Test;