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