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