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 { axios } from "../../../../../utils";
import Spinner from "../../../../loading-spinner/Spinner";
import DropzoneComponent from "../../../../dropzone/DropzoneComponent";
import FormErrorFeedback from "../../../../form-error-feedback/FormErrorFeedback";
import { addNotification } from "../../../../../redux/notification/notification.actions";
import { profileTypes } from "../../../Profile.types";
import { useDispatch } from 'react-redux';

const ImageModal = ({
    isModalOpen,
    handleModalOpen,
    imageProfileCover,
    profileType,
    profileId,
    groupId,
    setProfileImg
}) => {
    const { register, errors, handleSubmit, setValue, clearErrors, setError, getValues } = useForm();
    const [loading, setLoading] = useState(false);
    const dispatch = useDispatch();

    const onUploadedHandler = (files) => {
        setValue("image", files);
        clearErrors("image");
    };

    const dropZoneRender = () => (
        <DropzoneComponent
            modalType="IMAGE"
            onUploaded={onUploadedHandler}
            recomendationText={`Imágenes recomendadas de ${imageProfileCover}`}
        />
    );

    const onSubmitHandler = async (data) => {
        let postPath = "";
        switch (profileType) {
            case profileTypes.USER:
                postPath = `/profile/my-profiles/image/${profileId}/operation/upload`;
                break;
            case profileTypes.COMPANY:
                postPath = `/my-company/${profileId}/profile/image/upload`;
                break;
            case profileTypes.GROUP:
                postPath = `/group/my-groups/image/${groupId}/operation/upload`;
                break;
            default:
                break;
        }
        ("called");
        setLoading(true);
        const formData = new FormData();
        Object.entries(data).map(([key, value]) => {
            formData.append(key, value);
        });
        await axios.post(postPath, formData).then((response) => {
            const resData = response.data;
            (resData);
            if (resData.success) {
                setLoading(false);
                let newCoverImg
                profileType === profileTypes.GROUP
                    ? newCoverImg = { path: resData.data, uid: Date.now() }
                    : newCoverImg = { path: resData.data.profile, uid: Date.now() }
                if (resData.data.update_navbar) sessionStorage.setItem('user_session_image', resData.data.user)
                setProfileImg(newCoverImg);
                setValue("image", "");
                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 }))
                }
            }
        });
        setLoading(false);
    };

    useEffect(() => {
        register("image", {
            required: { value: "true", message: "El campo es requerido" },
        })
    }, [])

    return (
        <Modal show={isModalOpen} onHide={handleModalOpen}>
            <Modal.Header closeButton>
                <Modal.Title>Imagen</Modal.Title>
            </Modal.Header>
            <form
                encType="multipart/form-data"
                onSubmit={handleSubmit(onSubmitHandler)}
            >
                <Modal.Body>
                    {dropZoneRender()}
                    {errors.image && <FormErrorFeedback>{errors.image.message}</FormErrorFeedback>}
                </Modal.Body>
                <Modal.Footer>
                    <Button type="submit">Enviar</Button>
                    <Button variant="danger" onClick={handleModalOpen}>
                        Cancelar
                    </Button>
                </Modal.Footer>
            </form>
            {loading && <Spinner />}
        </Modal>
    )
}

export default ImageModal