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;