Proyectos de Subversion LeadersLinked - SPA

import React from "react";

import { useDispatch, useSelector } from "react-redux";

import { Controller, useForm } from "react-hook-form";

import { axios } from "@utils";

import { addNotification } from "@store/notification/notification.actions";

import Modal from "../modal/Modal";

import FormErrorFeedback from "../form/FormErrorFeedback";

import DropzoneComponent from "@components/dropzone/DropzoneComponent";

const CoverModal = ({

  show = false,

  sizes = "",

  onClose = () => {},

  onChange = () => {},

  url = "",

}) => {

  const labels = useSelector(({ intl }) => intl.labels);

  const dispatch = useDispatch();

  const {

    control,

    formState: { isSubmitting },

    handleSubmit,

  } = useForm();

  const onSubmit = handleSubmit(async () => {

    try {

      const newCover = await axios.post(url, cover);

      onChange(newCover);

      onClose();

    } catch (error) {

      dispatch(

        addNotification({

          style: "danger",

          msg: "Error al actualizar el portada",

        })

      );

    }

  });

  return (

    <Modal

      title={labels.cover}

      show={show}

      onClose={onClose}

      onAccept={onSubmit}

      loading={isSubmitting}

    >

      <Controller

        name="cover"

        control={control}

        rules={{ required: "Portada requerida" }}

        render={({ field: { onChange, value }, fieldState: { error } }) => (

          <>

            <DropzoneComponent

              type="IMAGE"

              onUploaded={onChange}

              settedFile={value}

              recomendationText={`Imágenes recomendadas de ${sizes}`}

            />

            {error && <FormErrorFeedback>{error.message}</FormErrorFeedback>}

          </>

        )}

      />

    </Modal>

  );

};

export default CoverModal;