Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */

import React, { useEffect, useState } from 'react'

import { Button, Modal } from 'react-bootstrap'

import { useForm } from 'react-hook-form';

import { useDispatch } from 'react-redux';

import { addNotification } from '../../../../redux/notification/notification.actions';

import FormErrorFeedback from '../../../../shared/form-error-feedback/FormErrorFeedback';

import Spinner from '../../../../shared/loading-spinner/Spinner';

import TagsInput from '../../../../shared/tags-input/TagsInput';

import { axios } from '../../../../utils';

const LanguagesModal = ({

    show = false,

    userIdEncrypted = '',

    languagesOptions = [],

    userLanguages = [],

    closeModal = () => { },

    setLanguages = () => { },

}) => {

    const { register, errors, handleSubmit, setValue, getValues, setError } = useForm();

    const [modalLoading, setModalLoading] = useState(false);

    const [settedLanguageTags, setSettedLanguageTags] = useState([]);

    const dispatch = useDispatch();

    const handleModalOpen = (event) => {

        event && event.preventDefault();

        Object.keys(getValues()).map(([key]) => setValue(key, ""))

        closeModal();

    };

    const handleTagsChange = (tags) => {

        if (tags.length) {

            let newTags = [];

            tags.map((tag) => {

                newTags = [...newTags, tag.value];

            });

            setValue("languages", newTags);

            setSettedLanguageTags(tags);

        } else {

            setValue("languages", "");

            setSettedLanguageTags("");

        }

    };

    const onSubmitHandler = async () => {

        setModalLoading(true);

        const formData = new FormData();

        getValues("languages").map((language) => {

            formData.append("languages[]", language);

        });

        await axios

            .post(`/profile/my-profiles/language/${userIdEncrypted}`, formData)

            .then((response) => {

                const resData = response.data;

                if (resData.success) {

                    dispatch(addNotification({ style: "success", msg: 'Registro actualizado' }))

                    setLanguages(settedLanguageTags);

                    handleModalOpen();

                } else {

                    const resError = resData.data;

                    if (resError.constructor.name === "Object") {

                        Object.entries(resError).map(([key, value]) => {

                            if (key in getValues()) {

                                setError(key, {

                                    type: "manual",

                                    message: Array.isArray(value) ? value[0] : value,

                                });

                            }

                        });

                    } else {

                        dispatch(addNotification({ style: "danger", msg: resError }))

                    }

                }

            });

        (getValues("languages"));

        setModalLoading(false);

    };

    useEffect(() => {

        register("languages", {

            required: "Por favor seleccione al menos un lenguaje",

        });

    }, []);

    return (

        <Modal

            show={show}

            onHide={handleModalOpen}

            style={{ overflowY: "scroll" }}

        >

            <Modal.Header closeButton>

                <Modal.Title>Idiomas</Modal.Title>

            </Modal.Header>

            <form onSubmit={handleSubmit(onSubmitHandler)}>

                <Modal.Body>

                    <div className="form-group">

                        <TagsInput

                            suggestions={languagesOptions}

                            settedTags={userLanguages}

                            onChange={handleTagsChange}

                        />

                        {errors.languages && <FormErrorFeedback>{errors.languages.message}</FormErrorFeedback>}

                    </div>

                </Modal.Body>

                <Modal.Footer>

                    <Button size="sm" type="submit">Enviar</Button>

                    <Button size="sm" variant="danger" onClick={handleModalOpen}>

                        Cancelar

                    </Button>

                </Modal.Footer>

            </form>

            {modalLoading && <Spinner />}

        </Modal>

    )

}

export default LanguagesModal