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 SkillsModal = ({ setSkills, userIdEncrypted, closeModal, show, skillsOptions, userSkillsArray }) => {

    const { register, errors, handleSubmit, setValue, getValues, setError } = useForm();
    const [settedSkillTags, setSettedSkillTags] = useState([]);
    const [modalLoading, setModalLoading] = useState(false);
    const dispatch = useDispatch();

    const onSubmitHandler = async () => {
        setModalLoading(true);
        const formData = new FormData();
        getValues("skills").map((language) => formData.append("skills[]", language));

        await axios
            .post(`/profile/my-profiles/skill/${userIdEncrypted}`, formData)
            .then(({ data: response }) => {

                if (!response.success) {
                    const responseError = response.data;

                    if (responseError.constructor.name === "string") {
                        dispatch(addNotification({ style: "danger", msg: responseError }))
                        return
                    }

                    Object.entries(responseError)
                    .map(([key, value]) => {
                        if (key in getValues()) {
                            setError(key, {type: "manual",message: Array.isArray(value) ? value[0] : value});
                        }
                    });
                }

                setSkills(settedSkillTags);
                dispatch(addNotification({ style: "success", msg: 'Registro agregado' }))

                handleModalOpen()
            })
            .finally(() => setModalLoading(false))
    };

    const handleTagsChange = (tags) => {
        if (tags.length) {
            let newTags = [];
            tags.map((tag) => {
                newTags = [...newTags, tag.value];
            });
            setValue("skills", newTags);
            setSettedSkillTags(tags);
        } else {
            setValue("skills", "");
            setSettedSkillTags("");
        }
    };

    const handleModalOpen = () => {
        Object.keys(getValues()).map(([key]) => setValue(key, ""))
        closeModal()
    }

    useEffect(() => {
        register("skills", {
            required: "Por favor seleccione al menos una habilidad",
        });
    }, []);

    return (
        <Modal show={show} onHide={handleModalOpen}>
            <Modal.Header closeButton>
                <Modal.Title>Habilidades</Modal.Title>
            </Modal.Header>
            <form onSubmit={handleSubmit(onSubmitHandler)}>
                <Modal.Body>
                    <div className="form-group">
                        <TagsInput
                            suggestions={skillsOptions}
                            settedTags={userSkillsArray}
                            onChange={handleTagsChange}
                        />
                        {errors.skills && <FormErrorFeedback>{errors.skills.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 SkillsModal