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