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 HobbiesModal = ({
    show = false,
    userIdEncrypted = '',
    userHobbiesAndInterests = [],
    hobbiesAndInterestsOptions = [],
    closeModal = () => { },
    setUserHobbiesAndInterests = () => { },
}) => {
    const { register, errors, handleSubmit, setValue, getValues, setError } = useForm();
    const [modalLoading, setModalLoading] = useState(false);
    const [settedHobbyAndInterestTags, setSettedHobbyAndInterestTags] = 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("hobbiesAndInterests", newTags);
            setSettedHobbyAndInterestTags(tags);
        } else {
            setValue("hobbiesAndInterests", "");
            setSettedHobbyAndInterestTags("");
        }
    };

    const onSubmitHandler = async () => {
        setModalLoading(true);
        const formData = new FormData();
        getValues("hobbiesAndInterests").map((language) => {
            formData.append("hobbies_and_interests[]", language);
        });
        await axios
            .post(`/profile/my-profiles/hobby-and-interest/${userIdEncrypted}`, formData)
            .then((response) => {
                const resData = response.data;
                if (resData.success) {
                    setUserHobbiesAndInterests(settedHobbyAndInterestTags);
                    dispatch(addNotification({ style: "success", msg: 'Registro actualizado' }))
                    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 }))
                    }
                }
            });
        setModalLoading(false);
    };

    useEffect(() => {
        register("hobbiesAndInterests", {
            required: "Por favor seleccione al menos un pasatiempo o interés",
        });
    }, []);

    return (
        <Modal show={show} onHide={handleModalOpen}>
            <Modal.Header closeButton>
                <Modal.Title>Pasatiempos e intereses</Modal.Title>
            </Modal.Header>
            <form onSubmit={handleSubmit(onSubmitHandler)}>
                <Modal.Body>
                    <div className="form-group">
                        <TagsInput
                            suggestions={hobbiesAndInterestsOptions}
                            settedTags={userHobbiesAndInterests}
                            onChange={handleTagsChange}
                        />
                        {errors.hobbiesAndInterests && <FormErrorFeedback>{errors.hobbiesAndInterests.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 HobbiesModal